<template>
  <div class="entrySreach">
    <el-form
      class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
      ref="sreachForm"
      :model="sreachFormData"
      label-position="top"
      size="small"
    >
      <el-row class="row-border">
        <!-- 订单编号 -->
        <el-col :span="5">
          <Formitem label="订单编号" prop="orderNo">
            <FormTextareaInput
              :formData="sreachFormData"
              dataKey="orderNo"
              @formChange="formChange"
            />
          </Formitem>
        </el-col>
        <!-- 电商企业代码 -->
        <el-col :span="5">
          <Formitem label="电商企业代码" prop="ebccode">
            <el-input
              type="text"
              class="inputShadow"
              id="inputInner--ebccode"
              resize="none"
              v-model="sreachFormData.ebccode"
              clearable
              placeholder=""
            ></el-input>
          </Formitem>
        </el-col>
        <!-- 回执状态 -->
        <el-col :span="5">
          <Formitem label="回执状态" prop="returnStatus">
            <el-select
              type="text"
              id="inputInner--returnStatus"
              v-model="sreachFormData.returnStatus"
              clearable
              placeholder=""
            >
              <el-option
                v-for="(item, index) in dictData.returnStatus"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </Formitem>
        </el-col>
        <!-- 创建时间 -->
        <el-col :span="5">
          <Formitem label="创建时间" prop="createTime" :activeType="true">
            <el-date-picker
              class="inputInner--createTime"
              id="inputInner--createTime"
              v-model="sreachFormData.createTime"
              type="daterange"
              format="yyyy-MM-dd"
              prefix-icon="none"
              value-format="yyyy-MM-dd"
              range-separator="至"
              @chagne="dateChange"
            />
          </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="2">
          <el-form-item class="textCenter">
            <el-button
              type="text"
              size="small"
              icon="el-icon-refresh"
              @click="clear"
            >
              重置
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="optionButton">
      <el-button
        class="entrySaveButton"
        size="small"
        icon="el-icon-download"
        @click="downloadData"
      >
        导出
      </el-button>
    </div>
    <Table
      class="fedexDetialTable fedexSreachTable"
      ref="entryTable"
      :data="tableData"
      :headerData="headerData"
      :maxHeight="tableMaxheight"
      :border="true"
      :pagination="true"
      :order="false"
      :loading="loadings.searchLoading"
      :page="page.pageIndex"
      :pageSizes="[20, 30, 50, 100]"
      :totalCount="page.total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
      :selection="false"
      :selectFixed="false"
      :rowSelectDataType="false"
    >
      <template v-slot:returnStatus="scope">
        <TablePopover
          dataKey="returnStatus"
          :parentDom="$refs.entryTable"
          :receiptDataHead="receiptDataHead"
          :rowData="scope.row"
          :tableData="tableData"
          @popoverChange="popoverChange"
          @popoverClose="popoverClose"
        >
          <div slot="title">
            <span style="font-weight: 700; color: #515a6e">订单编号：</span
            >{{ scope.row.orderno }}
          </div>
          <div slot="buttonLabel">
            {{ scope.row.returnStatus }}
          </div>
        </TablePopover>
      </template>
      <template v-slot:orderNo="scope">
        <el-button type="text" @click="view(scope.row)">{{
          scope.row.orderNo
        }}</el-button>
      </template>
    </Table>
  </div>
</template>

<script>
import { getAllExportingBills } from "@/api/exportQuery.js";

export default {
  name: "index",
  data() {
    return {
      sreachFormData: {
        orderNo: "",
        ebccode: "",
        returnStatus: "",
        createTime: [],
      },
      page: {
        pageIndex: 1,
        pageSize: 20,
        total: 0,
      },
      tableData: [],
      headerData: [
        {
          name: "回执状态",
          value: "returnStatus",
          width: "",
          align: "left",
          slot: true,
        },
        {
          name: "订单编号",
          value: "orderNo",
          width: "",
          align: "left",
          slot: true,
        },
        {
          name: "订单类型",
          value: "orderType",
          width: "",
          align: "left",
        },
        {
          name: "电商企业代码",
          value: "ebccode",
          width: "",
          align: "left",
        },
        {
          name: "电商企业",
          value: "ebcname",
          width: "",
          align: "left",
        },
        {
          name: "电商平台名称",
          value: "ebpname",
          width: "",
          align: "left",
        },
        {
          name: "创建时间",
          value: "createTime",
          width: "",
          align: "left",
        },
        {
          name: "申报企业",
          value: "declaringEnterprise",
          width: "",
          align: "left",
        },
        {
          name: "申报类型",
          value: "declaringType",
          width: "",
          align: "left",
        },
      ],
      receiptDataHead: [
        {
          name: "回执状态",
          value: "",
          width: "",
          align: "left",
        },
        {
          name: "状态时间",
          value: "",
          width: "",
          align: "left",
        },
        {
          name: "回执描述",
          value: "",
          width: "",
          align: "left",
        },
      ],
      dictData: {
        ebccode: [],
        returnStatus: [],
      },
      loadings: {
        searchLoading: false,
      },
      textareaVisible: {
        formItemconsignmentCode: false,
        formItemconsignmentHeadCode: false,
      },
      tableMaxheight: null,
    };
  },
  created() {
    this.search(0);
  },
  mounted() {
    this.tableMaxheight = window.innerHeight - 300;
  },
  methods: {
    //查询
    search(val) {
      this.loadings.searchLoading = true;
      if (val == 0) {
        this.page.pageIndex = 1;
      }
      let obj = this.sreachFormData;
      obj.pageIndex = this.page.pageIndex;
      obj.pageSize = this.page.pageSize;
      obj.createTimeStart = "";
      obj.createTimeEnd = "";
      if (obj.createTime.length > 0) {
        obj.createTimeStart = obj.createTime[0];
        obj.createTimeEnd = obj.createTime[1];
      }
      getAllExportingBills(obj)
        .then((res) => {
          if (res.code === "200") {
            this.tableData = res.data.value;
            this.page.total = res.data.totalItems;
            this.tableData.forEach((item, idx) => {
              item.index = idx;
              item.popoverLoading = false;
              item.returnStatusPopoverType = false;
              item.returnStatusPopoverData = [];
            });
          } else {
            this.alertWarningMsg(res.message);
          }
          this.loadings.searchLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loadings.searchLoading = false;
        });
    },
    //重置
    clear() {
      this.sreachFormData = {
        orderNo: "",
        ebccode: "",
        returnStatus: "",
        createTime: [],
      };
    },
    //导出
    downloadData() {},
    //查询详情
    view(val) {
      this.$router.push({
        name: "ExportBillDetail",
        params: { data: val },
      });
    },
    popoverChange(val) {
      this.tableData = val.tableData;
      console.log(this.tableData);
    },
    popoverClose(val) {
      this.tableData.forEach((item) => {
        item.popoverLoading = false;
        item.returnStatusPopoverType = false;
        item.returnStatusPopoverData = [];
      });
      this.$refs.entryTable.$refs.tables.$refs.bodyWrapper.style.overflowY =
        "auto";
    },
    formChange(val) {
      this.sreachFormData = val;
    },
    //分页
    currentChange(val) {
      this.page.pageNum = val.page;
      this.search(1);
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.search(1);
    },
    dateChange(val) {},
    input() {
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/variables.scss";
.entrySreach {
  height: 100%;
  background-color: $menuLightBg;

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

  .optionButton {
    padding: 10px;
    text-align: right;

    .el-button {
      color: $fedexButton;
      border-color: $fedexButton !important;

      svg {
        display: inline-block;
        margin-right: 5px;
        fill: $fedexButton;
      }
    }

    .entrySaveButton:hover,
    .entrySaveButton:focus {
      color: $menuLightBg !important;
      background-color: $fedexButton !important;
    }
  }
}

.texttareaTip {
  position: absolute;
  top: 52%;
  right: 20px;
  transform: translate(0, -50%);
  z-index: 10;
}
</style>