<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">
              <el-popover
                placement="bottom"
                width="320"
                trigger="manual"
                popper-class="popoverconsignmentCode"
                v-model="textareaVisible.formItemconsignmentCode"
              >
                <el-input
                  name="consignmentCode-textarea"
                  type="textarea"
                  :rows="5"
                  id="popoverInputconsignmentCode"
                  class="inputShadow textareaPopover"
                  v-model="searchForm.consignmentCode"
                  resize="none"
                  maxlength="13000"
                  placeholder=""
                  @blur="textareaBlur"
                  @input="input"
                ></el-input>
                <el-input
                  slot="reference"
                  name="consignmentCode"
                  type="textarea"
                  :rows="1"
                  class="inputShadow"
                  id="inputInner--consignmentCode"
                  v-model="searchForm.consignmentCode"
                  resize="none"
                  placeholder=""
                  @focus="textareaFocus"
                  @input="input"
                ></el-input>
              </el-popover>
            </Formitem>
          </el-col>
          <el-col :span="4">
            <Formitem label="物流企业代码" prop="factoryCode">
              <el-select
                type="text"
                id="inputInner--declaredPort"
                v-model="searchForm.declaredPort"
                clearable
                placeholder=""
              >
                <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=""
              >
                <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=""
              >
              </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"
      :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";

export default {
  name: "index",
  data() {
    return {
      searchForm: {
        declaredPort: "",
        consStatus: "",
        consignmentCode: "",
        accsDataImportTime: [],
        ownerName: "",
        consignmentHeadCode: "",
        isPushCustomsSys: "",
        waitOperStatus: "",
        declTime: [],
      },
      selected: [],
      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() {
    this.getPageData();
    // getAllExportingBills({
    //   pageIndex: this.page.pageIndex,
    //   pageSize: this.page.pageSize,
    // }).then((res) => {
    //   console.log("res", res);
    //   this.tableData = res.data.value;
    //   this.total = res.data.totalItems;
    // });
  },
  methods: {
    input() {
      this.$forceUpdate();
    },
    async search(val) {
      try {
      } catch (error) {
        console.error("搜索出错：", error);
      } finally {
        // 无论成功还是失败，关闭加载状态
        this.loadings.sreachLoading = false;
      }
    },
    //table选择变更
    tableSelect(selection) {
      this.selected = selection.selection;
      this.clearCheckEntry(0);
    },
    tableSelectAll() {},
    getPageData() {
      getAllExportingBills({
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize,
      }).then((res) => {
        console.log("res", res);
        this.tableData = res.data.value;
        this.total = res.data.totalItems;
      });
    },
    //分页
    currentChange(val) {
      this.page.pageIndex = val.page;
      this.getPageData();
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.getPageData();
    },
    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>