<template>
  <div class="entrySreach" v-loading="loadings.templateLoading">
    <div>
      <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="billNo">
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner--billNo"
                resize="none"
                v-model="sreachFormData.billNo"
                clearable
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
          <!-- 订单编号 -->
          <el-col :span="5">
            <Formitem label="订单编号" prop="orderNo">
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner--orderNo"
                resize="none"
                v-model="sreachFormData.orderNo"
                clearable
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
          <!-- 运单编号 -->
          <el-col :span="5">
            <Formitem label="运单编号" prop="logisticsNo">
              <FormTextareaInput
                :formData="sreachFormData"
                dataKey="logisticsNo"
                @formChange="formChange"
              />
            </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="至"
                @change="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.sreachLoading"
                @click="search(0)"
              ></el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item class="textLeft textCenter">
              <el-button
                type="text"
                size="small"
                icon="el-icon-refresh"
                @click="clear"
              >
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="backgroundRow">
          <!-- 回执状态 -->
          <el-col :span="5">
            <Formitem label="回执状态" prop="receiptStatus">
              <el-select
                type="text"
                id="inputInner--receiptStatus"
                v-model="sreachFormData.receiptStatus"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="(item, index) in $store.getters.dict.RECEIPT_STATUS"
                  :key="index"
                  :label="item.itemChineseName"
                  :value="item.itemValue"
                ></el-option>
              </el-select>
            </Formitem>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="optionButton">
      <div class="optionButton-left">
        <el-button class="entrySaveButton" size="small" @click="uploadData"
          ><svg-icon
            class="el-icon-user-solid"
            icon-class="uploadCloud"
          ></svg-icon
          >一键导入
        </el-button>
        <el-button
          class="entrySaveButton"
          size="small"
          icon="el-icon-download"
          :loading="loadings.dwonloadModelLoading"
          @click="dwonloadModelFile"
        >
          导入模版下载
        </el-button>
      </div>
      <div class="optionButton-right">
        <el-dropdown
          style="margin-right: 10px"
          size="small"
          split-button
          type="primary"
          v-loading="loadings.dropDownLoading"
          @command="dropdownChange"
          @click="declareData"
        >
          <svg-icon
            class="el-icon-user-solid"
            icon-class="fedexDeclareIcon"
          ></svg-icon
          >{{ dropdownName }}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{ code: 'full', name: '一键申报' }"
              >一键申报</el-dropdown-item
            >
            <el-dropdown-item :command="{ code: 'order', name: '订单申报' }"
              >订单申报</el-dropdown-item
            >
            <el-dropdown-item :command="{ code: 'waybill', name: '物流单申报' }"
              >物流单申报</el-dropdown-item
            >
            <el-dropdown-item :command="{ code: 'list', name: '清单申报' }"
              >清单申报</el-dropdown-item
            >
            <el-dropdown-item
              :command="{ code: 'totalScore', name: '清单总分单申报' }"
              >清单总分单申报</el-dropdown-item
            >
            <el-dropdown-item
              :command="{ code: 'cancellation', name: '撤销单申报' }"
              >撤销单申报</el-dropdown-item
            >
            <el-dropdown-item
              :command="{ code: 'logisticsDeparture', name: '离境单申报' }"
              >离境单申报</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <el-button
          class="entrySaveButton"
          size="small"
          icon="el-icon-download"
          v-loading="loadings.exportDeclareLoading"
          @click="downloadData"
        >
          导出
        </el-button>
      </div>
    </div>
    <Table
      class="fedexDetialTable fedexSreachTable"
      ref="entryTable"
      :data="tableData"
      :headerData="headerData"
      :height="430"
      :border="true"
      :pagination="true"
      :order="false"
      :loading="loadings.sreachLoading"
      :page="page.pageIndex"
      :pageSizes="[20, 30, 50, 100]"
      :totalCount="page.total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
      :selection="true"
      :selectFixed="false"
      @tableSelect="tableSelect"
      @tableSelectAll="tableSelectAll"
      :rowSelectDataType="false"
      @cellClick="cellClick"
      :selected="selected"
    >
      <template v-slot:orderReceiptStatus="scope">
        <TablePopover
          ref="orderReceiptStatusPopover"
          dataKey="orderReceiptStatus"
          idKey="declareId"
          :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.orderReceiptStatus }}
          </div>
        </TablePopover>
      </template>
      <template v-slot:wayBillReceipt="scope">
        <TablePopover
          ref="wayBillReceiptPopover"
          dataKey="wayBillReceipt"
          idKey="declareId"
          :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.wayBillReceipt }}
          </div>
        </TablePopover>
      </template>
      <template v-slot:listReceiptStatus="scope">
        <TablePopover
          ref="listReceiptStatusPopover"
          dataKey="listReceiptStatus"
          idKey="declareId"
          :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.listReceiptStatus }}
          </div>
        </TablePopover>
      </template>
      <template v-slot:totalSplitOrderStatus="scope">
        <TablePopover
          ref="totalSplitOrderStatusPopover"
          dataKey="totalSplitOrderStatus"
          idKey="declareId"
          :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.totalSplitOrderStatus }}
          </div>
        </TablePopover>
      </template>
      <template v-slot:logisticsReceiptStatus="scope">
        <TablePopover
          ref="logisticsReceiptStatusPopover"
          dataKey="logisticsReceiptStatus"
          idKey="declareId"
          :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.logisticsReceiptStatus }}
          </div>
        </TablePopover>
      </template>
    </Table>
    <DialogVue
      :outerVisible="outerVisible"
      @dwonloadModelFile="dwonloadModelFile"
      @close="close"
    />
  </div>
</template>

<script>
import {
  searchDeclareData,
  declareDataUpload,
  getOrderReceipt,
  getWayBillReceipt,
  getListReceipt,
  getTotalReceipt,
  getLogisticsReceipt,
  exportDeclareData
} from "@/api/declareData-api.js";
import DialogVue from "./dialog.vue";
export default {
  name: "ReportingData",
  components: {
    DialogVue,
  },
  data() {
    return {
      sreachFormData: {
        billNo: "",
        logisticsNo: "",
        orderNo: "",
        receiptStatus: null,
        receiptType: null,
        createTime: [],
      },
      page: {
        pageIndex: 1,
        pageSize: 20,
        total: 0,
      },
      tableData: [],
      headerData: [
        {
          name: "提运单号",
          value: "billNo",
          width: "",
          align: "left",
        },
        {
          name: "物流运单号",
          value: "logisticsWaybillNumber",
          width: "",
          align: "left",
        },
        {
          name: "订单编号",
          value: "orderno",
          width: "",
          align: "left",
        },
        {
          name: "电商企业",
          value: "ecomEntName",
          width: "",
          align: "left",
        },
        {
          name: "订单回执",
          value: "orderReceiptStatus",
          width: "",
          align: "left",
          slot: true,
        },
        // {
        //   name: "收款单回执",
        //   value: "",
        //   width: "",
        //   align: "left",
        //   slot: true,
        // },
        {
          name: "物流单回执",
          value: "wayBillReceipt",
          width: "",
          align: "left",
          slot: true,
        },
        {
          name: "清单回执",
          value: "listReceiptStatus",
          width: "",
          align: "left",
          slot: true,
        },
        {
          name: "清单总分单回执",
          value: "totalSplitOrderStatus",
          width: "",
          align: "left",
          slot: true,
        },
        {
          name: "离境回执",
          value: "logisticsReceiptStatus",
          width: "",
          align: "left",
          slot: true,
        },
      ],
      receiptDataHead: [
        {
          name: "回执状态",
          value: "receiptStatus",
          width: "",
          align: "left",
        },
        {
          name: "状态时间",
          value: "statusTime",
          width: "",
          align: "left",
        },
        {
          name: "回执描述",
          value: "receiptDescription",
          width: "",
          align: "left",
        },
      ],
      selected: [],
      // dictData: {
      //   logisticsNo: [],
      //   receiptStatus: [],
      //   receiptType: [],
      // },
      loadings: {
        templateLoading: false,
        sreachLoading: false,
        dwonloadModelLoading: false,
        dropDownLoading: false,
        logTableLoading: false,
        exportDeclareLoading:false,
      },
      textareaVisible: {},
      tableMaxheight: null,
      outerVisible: false,
      dropdownName: "一键申报",
      dropdownCode: "full",
    };
  },
  created() {
    this.search(0);
  },
  mounted() {
    this.tableMaxheight = window.innerHeight - 300;
  },
  watch: {
    $route(val, oldval) {
      this.popoverClose();
    },
  },
  methods: {
    //查询申报数据
    search(val) {
      this.loadings.sreachLoading = true;
      this.selected = [];
      if (val == 0) {
        this.page.pageIndex = 1;
      }
      let obj = this.sreachFormData;
      obj.pageIndex = this.page.pageIndex;
      obj.pageSize = this.page.pageSize;
      obj.startCreateTime = "";
      obj.endCreateTime = "";
      if (this.sreachFormData.createTime.length > 0) {
        obj.startCreateTime = obj.createTime[0];
        obj.endCreateTime = obj.createTime[1];
      }
      searchDeclareData(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.orderReceiptStatusPopoverType = false;
              item.listReceiptStatusPopoverType = false;
              item.wayBillReceiptPopoverType = false;
              item.totalSplitOrderStatusPopoverType = false;
              item.logisticsReceiptStatusPopoverType = false;
              item.popoverData = [];
            });
          } else {
            this.alertWarningMsg(res.message);
          }
          this.loadings.sreachLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loadings.sreachLoading = false;
        });
    },
    //重置数据
    clear() {
      this.sreachFormData = {
        billNo: "",
        logisticsNo: "",
        orderNo: "",
        receiptStatus: null,
        receiptType: null,
        createTime: [],
      };
    },
    //上传申报数据
    uploadData() {
      this.outerVisible = true;
    },
    //下载模板
    dwonloadModelFile() {
      this.loadings.dwonloadModelLoading = true;
      this.fileDownload
        .downLoadZip(
          "api",
          "declareDataModel",
          "申报数据模板.xlsx",
          "xlsx",
          "get"
        )
        .finally(() => {
          this.loadings.dwonloadModelLoading = false;
        });
    },
    //导出
    downloadData() {
      if (this.selected.length > 0) {
        this.loadings.exportDeclareLoading = true;
        let obj = {
          declareIds: [],
        };
        this.selected.forEach((item) => {
          obj.declareIds.push(item.declareId);
        });
        exportDeclareData(obj).then((res)=>{
          // if (res.code === "200") {
          //     // this.alertSuccessMsg(res.message);
          //   } else {
          //     console.log(res.message);
          //     this.alertWarningMsg(res.message);
          //   }
           this.loadings.exportDeclareLoading = false;
          }).catch((err)=>{
            console.log(err);
            this.alertErrorMsg(err);
            this.loadings.exportDeclareLoading = false;
          })
      }else {
        this.alertWarningMsg("请选择需导出的数据！");
      }
      
    },
    //申报
    declareData() {
      if (this.selected.length > 0) {
        this.loadings.dropDownLoading = true;
        let obj = {
          declareIds: [],
          type: this.dropdownCode,
        };
        this.selected.forEach((item) => {
          obj.declareIds.push(item.declareId);
        });
        declareDataUpload(obj)
          .then((res) => {
            if (res.code === "200") {
              // this.alertSuccessMsg(res.message);
              this.alertSuccessMsg("数据已成功提交申报，请等待海关回执。");
            } else {
              this.alertWarningMsg(res.message);
            }
            this.loadings.dropDownLoading = false;
          })
          .catch((err) => {
            console.log(err);
            this.loadings.dropDownLoading = false;
          });
      } else {
        this.alertWarningMsg("请选择数据！");
      }
    },
    //切换申报模式
    dropdownChange(val) {
      this.dropdownName = val.name;
      this.dropdownCode = val.code;
    },
    close(val) {
      if (val) {
        this.search(1);
      }
      this.outerVisible = false;
    },
    popoverChange(val) {
      console.log(val);
      this.tableData = val.tableData;
      this.receiptApi(val.data.declareId, val.status)
        .then((res) => {
          val.tableData.forEach((item) => {
            if (item.declareId == val.data.declareId) {
              item.popoverData = res;
            }
          });
          this.tableData = val.tableData;
        })
        .finally(() => {
          this.$nextTick(() => {
            this.$refs.orderReceiptStatusPopover.tableLoading = false;
            this.$refs.wayBillReceiptPopover.tableLoading = false;
            this.$refs.listReceiptStatusPopover.tableLoading = false;
            this.$refs.totalSplitOrderStatusPopover.tableLoading = false;
            this.$refs.logisticsReceiptStatusPopover.tableLoading = false;
          });
        });
    },
    //查询回执
    receiptApi(id, type) {
      return new Promise((resolve, reject) => {
        let obj = { declareId: id };
        if (type == "orderReceiptStatus") {
          getOrderReceipt(obj)
            .then((res) => {
              if (res.code === "200") {
                resolve(res.data);
              } else {
                reject();
              }
            })
            .catch((err) => {
              console.log(err);
              reject();
            });
        } else if (type == "wayBillReceipt") {
          getWayBillReceipt(obj)
            .then((res) => {
              if (res.code === "200") {
                resolve(res.data);
              } else {
                reject();
              }
            })
            .catch((err) => {
              console.log(err);
              reject();
            });
        } else if (type == "listReceiptStatus") {
          getListReceipt(obj)
            .then((res) => {
              if (res.code === "200") {
                resolve(res.data);
              } else {
                reject();
              }
            })
            .catch((err) => {
              console.log(err);
              reject();
            });
        } else if (type == "totalSplitOrderStatus") {
          getTotalReceipt(obj)
            .then((res) => {
              if (res.code === "200") {
                resolve(res.data);
              } else {
                reject();
              }
            })
            .catch((err) => {
              console.log(err);
              reject();
            });
        }
        else if (type == "logisticsReceiptStatus") {
          getLogisticsReceipt(obj)
            .then((res) => {
              if (res.code === "200") {
                resolve(res.data);
              } else {
                reject();
              }
            })
            .catch((err) => {
              console.log(err);
              reject();
            });
        }
      });
    },
    popoverClose(val) {
      this.tableData.forEach((item) => {
        item.orderReceiptStatusPopoverType = false;
        item.listReceiptStatusPopoverType = false;
        item.wayBillReceiptPopoverType = false;
        item.totalSplitOrderStatusPopoverType = false;
        item.logisticsReceiptStatusPopoverType = false;
        item.popoverData = [];
      });
      this.$refs.entryTable.$refs.tables.$refs.bodyWrapper.style.overflowY =
        "auto";
    },
    tableSelect(val) {
      this.selected = val.selection;
    },
    tableSelectAll(val) {
      this.selected = val;
    },
    //分页
    currentChange(val) {
      this.page.pageIndex = val.page;
      this.search(1);
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.search(1);
    },
    cellClick() {
      this.popoverClose();
    },
    formChange(val) {
      this.sreachFormData = val;
    },
    input() {
      this.$forceUpdate();
    },
    dateChange(val) {
      if (val == "" || val == null) {
        this.$nextTick(() => {
          this.sreachFormData.createTime = [];
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@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;
    display: flex;
    justify-content: space-between;

    .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>