<template>
  <div>
    <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="5">
          <Formitem label="回执状态" prop="declaredPort">
            <el-select
              type="text"
              id="inputInner--receiptStatus"
              v-model="searchForm.receiptStatus"
              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="receiptTime">
            <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 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"
      @rowClick="handleRowClick"
      @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, getAllTransportBills} from "@/api/query/query";

export default {
  name: "index",
  data() {
    return {
      searchForm: {
        declaredPort: "",
        consStatus: "",
        consignmentCode: "",
        accsDataImportTime: [],
        ownerName: "",
        consignmentHeadCode: "",
        isPushCustomsSys: "",
        waitOperStatus: "",
        declTime: [],
      },
      loadings: {
        searchLoading: false,
      },
      page: {
        pageIndex: 1,
        pageSize: 20,
      },
      textareaVisible: {
        formItemconsignmentCode: false,
        formItemconsignmentHeadCode: false,
      },
      sizeChange(val) {
        this.page.pageSize = val;
        this.sreach(1);
      },
      //分页
      currentChange(val) {
        this.page.pageIndex = val.page;
        this.search(1);
      },
      tableData: [],
      total: 0,
      tableMaxheight: null,
      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: 'createTime',
          width: '150',
          align: 'left'
        },
        {
          name: '申报企业',
          value: 'declaringEnterprise',
          width: '200',
          align: 'left'
        },
        {
          name: '申报类型',
          value: 'declaringType',
          width: '100',
          align: 'left'
        }
      ],
      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"},
        ],
      },
    }
  },
  created() {
    // getAllTransportBills({
    //   pageIndex: 1,
    //   pageSize: 20
    // }).then((res) => {
    //   console.log('res', res)
    //   this.tableData = res.data.value;
    //   this.total = res.data.totalItems;
    //   debugger;
    // })
  },
  methods: {
    tableSelect(val) {
      this.selected = val.selection;
    },
    tableSelectAll(val) {
      this.selected = val;
    },
    handleRowClick(row) {
      const declareId = row.declareId;
      this.$router.push({
        path: '/listBranchDetail',
        query: {
          declareId
        }
      });
    },
    async search(val) {
      try {

      } catch (error) {
        console.error("搜索出错：", error);
      } finally {
        // 无论成功还是失败，关闭加载状态
        this.loadings.sreachLoading = false;
      }
    },
  }
}
</script>

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

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