<template>
  <div>
    <div class="entrySreach" ref="classCPortEntry">
      <el-form
        class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
        ref="sreachForm"
        :model="searchForm"
        label-position="top"
        size="small"
      >
        <el-row class="row-border">
          <el-col :span="5">
            <Formitem label="运单编号" prop="consignmentCode">
              <PopoverTextarea />
            </Formitem>
          </el-col>
          <el-col :span="4">
            <Formitem label="物流企业代码" prop="factoryCode">
              <el-select
                type="text"
                id="inputInner--declaredPort"
                v-model="searchForm.declaredPort"
                clearable
                placeholder=""
                @change="portChange"
              >
                <el-option
                  v-for="(item, index) in dictData.userport"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </Formitem>
          </el-col>

          <el-col :span="4">
            <Formitem label="回执状态" prop="receiptStatus">
              <el-select
                type="text"
                id="inputInner--declaredPort"
                v-model="searchForm.declaredPort"
                clearable
                placeholder=""
                @change="portChange"
              >
                <el-option
                  v-for="(item, index) in dictData.userport"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </Formitem>
          </el-col>

          <el-col :span="5">
            <Formitem
              label="创建时间"
              prop="createTime"
              :activeType="true"
            >
              <el-date-picker
                class="inputInner--accsDataImportTime"
                id="inputInner--accsDataImportTime"
                v-model="searchForm.accsDataImportTime"
                type="daterange"
                format="yyyy-MM-dd"
                prefix-icon="none"
                value-format="yyyyMMdd"
                range-separator="至"
                start-placeholder=""
                clearable
                end-placeholder=""
                :picker-options="importTimePickerOptions"
                @blur="datePickerBlur"
                @change="accsDataImportTimeChange"
              >
              </el-date-picker>
            </Formitem>
          </el-col>

          <el-col :span="2">
            <el-form-item class="textCenter">
              <el-button
                class="entrySreachButton"
                type="text"
                icon="el-icon-search"
                :loading="loadings.searchLoading"
                @click="search(0)"
              ></el-button>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item class="textCenter">
              <el-button
                icon="el-icon-refresh"
                size="small"
                :loading="loadings.searchLoading"
                @click="search(0)"
              >重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div style="text-align: right; margin: 10px">
      <el-button
        size="small"
        :loading="loadings.downloadLoading2"
        @click="downloadBpiData('log')"
      >
        <svg-icon class="el-icon-user-solid" icon-class="fedexUpBlue"></svg-icon>
        导出
      </el-button>
    </div>

    <Table
      class="fedexDetialTable fedexSreachTable"
      ref="entryTable"
      :data="tableData"
      :headerData="headerData"
      :maxHeight="tableMaxheight"
      :border="true"
      :pagination="true"
      :order="false"
      :loading="loadings.sreachLoading"
      :page="page.pageIndex"
      :pageSizes="[20, 30, 50, 100]"
      :totalCount="total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
      @rowClick="handleRowClick"
      :selection="true"
      :selectFixed="false"
      @tableSelect="tableSelect"
      @tableSelectAll="tableSelectAll"
      :rowSelectDataType="false"
      :selected="selected"
    >
      <template v-slot:waveName="scope">
        <span>{{ `${scope.row.waveName}(${scope.row.waveExt2})` }}</span>
      </template>
    </Table>
  </div>
</template>

<script>
import {getAllExportingBills} from "@/api/query/query";
import PopoverTextarea from "@/components/PopoverTextarea/index.vue";

export default {
  name: "index",
  components: {PopoverTextarea},
  data() {
    return {
      searchForm: {
        declaredPort: "",
        consStatus: "",
        consignmentCode: "",
        accsDataImportTime: [],
        ownerName: "",
        consignmentHeadCode: "",
        isPushCustomsSys: "",
        waitOperStatus: "",
        declTime: [],
      },
      selected: [],
      sizeChange(val) {
        this.page.pageSize = val;
        this.sreach(1);
      },
      //分页
      currentChange(val) {
        this.page.pageIndex = val.page;
        this.search(1);
      },
      tableSelect(val) {
        this.selected = val.selection;
      },
      tableSelectAll(val) {
        this.selected = val;
      },
      page: {
        pageIndex: 1,
        pageSize: 20,
      },
      tableData: [],
      tableMaxheight: null,
      total: 0,
      dictData: {
        userport: [
          {name: "Shanghai Port", code: "SH"},
          {name: "Beijing Port", code: "BJ"},
          {name: "Guangzhou Port", code: "GZ"},
          {name: "Shenzhen Port", code: "SZ"},
          {name: "Tianjin Port", code: "TJ"},
        ],
      },
      loadings: {
        searchLoading: false,
      },
      textareaVisible: {
        formItemconsignmentCode: false,
        formItemconsignmentHeadCode: false,
      },
      headerData: [
        {
          name: "回执状态",
          value: "returnStatus",
          width: "150",
          align: "left",
        },
        {
          name: "订单编号",
          value: "orderNo",
          width: '150',
          align: 'left'
        },
        {
          name: '订单类型',
          value: 'orderType',
          width: '150',
          align: 'left'
        },
        {
          name: '电商企业代码',
          value: 'ebccode',
          width: '200',
          align: 'left'
        },
        {
          name: '电商企业',
          value: 'ebcname',
          width: '200',
          align: 'left'
        },
        {
          name: '电商平台名称',
          value: 'ebpname',
          width: '250',
          align: 'left'
        },
        {
          name: '创建时间',
          value: 'createTime',
          width: '150',
          align: 'left'
        },
        {
          name: '申报企业',
          value: 'declaringEnterprise',
          width: '200',
          align: 'left'
        },
        {
          name: '申报类型',
          value: 'declaringType',
          width: '100',
          align: 'left'
        }
      ]
    }
  },
  created() {
    getAllExportingBills({
      pageIndex: 1,
      pageSize: 20
    }).then((res) => {
      console.log('res', res)
      this.tableData = res.data.value;
      this.total = res.data.totalItems;
      debugger;
    })
  },
  methods: {
    input() {
      this.$forceUpdate();
    },
    handleRowClick(row) {
      const declareId = row.declareId;
      this.$router.push({
        path: '/exportBillDetail',
        query: {
          declareId
        }
      });
    },
    async search(val) {
      try {

      } catch (error) {
        console.error("搜索出错：", error);
      } finally {
        // 无论成功还是失败，关闭加载状态
        this.loadings.sreachLoading = false;
      }
    },
    textareaBlur(val) {
      let inputInner = document.querySelector(
        "#inputInner--" + val.target.name.split("-")[0]
      );
      this.textareaVisible["formItem" + val.target.name.split("-")[0]] = false;
      inputInner.style.display = "block";
      this.$nextTick(() => {
        inputInner.blur();
        if (
          inputInner.value != undefined &&
          inputInner.value != "" &&
          inputInner.value != null
        ) {
          inputInner.classList.add("inputFocus");
        } else {
          inputInner.classList.remove("inputFocus");
        }
      });
      let arr = [];
      this.searchForm[val.target.name.split("-")[0]]
        .replace(/[\n\，\；\;]/g, ",")
        .replace(/[\t]/g, "")
        .split(",")
        .forEach((str, index) => {
          if (str != null && str != "" && index <= 1000) {
            arr.push(str.trim());
          }
        });
      this.searchForm[val.target.name.split("-")[0]] = arr.join("\n");
      this.$forceUpdate();
    },
    //文本域展示状态切换
    textareaFocus(val) {
      this.textareaVisible["formItem" + val.target.name.split("-")[0]] = true;
      this.$nextTick(() => {
        document
          .querySelector("#popoverInput" + val.target.name.split("-")[0])
          .focus();
        document.querySelector(
          "#inputInner--" + val.target.name.split("-")[0]
        ).style.display = "none";
      });
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/variables.scss";

.entrySreachButton {
  display: inline-block;
  font-size: 20px;
  color: $fedexButton !important;
}
</style>