<template>
  <el-dialog
    class="entryDialog classCUploadDialog"
    :title="pageData.ebpName"
    :visible.sync="outerVisible"
    :show-close="false"
    width="900px"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    v-loading="loadings.dialogLoading"
    @close="close(false)"
  >
    <div style="margin-bottom: 10px">
      <span> 汇总清单数量：{{ pageData.count }} </span>
      <span style="margin-left: 20px">
        汇总申报地海关：{{ pageData.portCode }}
      </span>
      <span style="margin-left: 20px">
        商品种类总数量：{{ pageData.skuCount }}
      </span>
    </div>
    <Table
      class="fedexDetialTable fedexSreachTable"
      ref="entryTable"
      :data="pageData.value"
      :headerData="headerData"
      :border="true"
      :pagination="true"
      :order="false"
      :page="page.pageIndex"
      :pageSizes="[20, 30, 50, 100]"
      :totalCount="page.total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
      :selection="true"
      :selectFixed="false"
      @tableSelect="tableSelect"
      @tableSelectAll="tableSelectAll"
      :selected="tableSelected"
    >
    </Table>
    <div class="dialogOption entrySave">
      <el-button
        class="entrySaveButton"
        :disabled="loadings.submitLoading"
        @click="submit"
      >
        提 交
      </el-button>
      <el-button class="entrySaveButton" @click="close(false)">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { preview, declareSummaryApplication } from "@/api/exportSummary-api.js";

export default {
  props: {
    outerVisible: {
      type: Boolean,
      default: false,
    },
    selected: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    outerVisible(val) {
      if (val) {
        this.loadings.dialogLoading = false;
        this.fetchPreview();
      }
    },
  },
  data() {
    return {
      loadings: {
        dialogLoading: false,
        submitLoading: false,
      },
      title: "",
      tableSelected: [],
      page: {
        pageIndex: 1,
        pageSize: 20,
        total: 0,
      },
      pageData: {
        count: 0,
        ebpName: "预览",
        portCode: "",
        value: [],
      },
      headerData: [
        {
          name: "提运单号",
          value: "billNo",
          width: "",
          align: "left",
        },
        {
          name: "物流运单编号",
          value: "logisticsNo",
          width: "",
          align: "left",
        },
        {
          name: "清单编号",
          value: "invtNo",
          width: "",
          align: "left",
        },
        {
          name: "商品种类数量",
          value: "skuCount",
          width: "",
          align: "left",
        },
        {
          name: "清单申报时间",
          value: "createTime",
          width: "",
          align: "left",
        },
      ],
    };
  },
  methods: {
    tableSelect(val) {
      this.tableSelected = val.selection;
    },
    tableSelectAll(val) {
      this.tableSelected = val;
    },
    fetchPreview() {
      preview({
        ...this.selected,
        ...this.page,
      }).then((res) => {
        if (res.code === "200") {
          console.log(res.data);
          this.pageData = {
            ...res.data,
            value: res.data.pageData.value,
          };
          console.log(this.pageData);
          this.page.total = res.data.pageData.totalItems;
        }
      });
    },
    search(val) {
      if (val == 0) {
        this.page.pageIndex = 1;
      }
      this.fetchPreview();
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.search(1);
    },
    currentChange(val) {
      this.page.pageIndex = val.page;
      this.search(1);
    },
    //数据保存
    submit() {
      declareSummaryApplication({
        ...this.selected,
        logisticsNos: this.tableSelected.map((item) => item.logisticsNo),
      }).then((response) => {
        if (response.data) {
          this.msgSuccess("汇总申报成功");
          this.$router.push("summaryDataSearch");
        } else {
          this.msgError(response.message);
        }
      });
    },
    //新增
    addapi(val) {
      // declareUpload(val)
      //   .then((res) => {
      //     if (res.code === "200") {
      //       this.msgSuccess(res.message);
      //       this.close(true);
      //     } else {
      //       this.alertWarningMsg(res.message);
      //       this.loadings.dialogLoading = false;
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //     this.loadings.dialogLoading = false;
      //   });
    },

    close(flag) {
      this.formData = {
        operatorCode: "",
        domesticTrafNo: "",
      };
      this.loadings.dialogLoading = false;
      this.$emit("close", flag);
    },
  },
};
</script>

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