<template>
  <el-dialog
    class="entryDialog classCUploadDialog"
    :title="pageData.ebpName"
    :visible="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"
      :data="pageData.value"
      :headerData="headerData"
      :maxHeight="tableMaxheight"
      :border="true"
      :pagination="true"
      :order="false"
      :page="page.pageIndex"
      :totalCount="page.total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
      :selection="true"
      :selectFixed="false"
      @tableSelect="tableSelect"
      @tableSelectAll="tableSelectAll"
      :selected="tableSelected"
      :loading="loadings.searchLoading"
    >
    </Table>
    <div class="dialogOption entrySave">
      <el-button
        class="entrySaveButton"
        :loading="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,
        searchLoading: 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",
        },
      ],
      tableMaxheight: null,
    };
  },
  mounted() {
    this.tableMaxheight = window.innerHeight - 400;
  },
  methods: {
    tableSelect(val) {
      this.tableSelected = val.selection;
    },
    tableSelectAll(val) {
      this.tableSelected = val;
    },
    fetchPreview() {
      this.loadings.searchLoading = true;
      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;
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.loadings.searchLoading = false;
        });
    },
    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() {
      if (this.tableSelected.length < 1) {
        this.msgError("请选择数据");
        return;
      }
      this.loadings.submitLoading = true;

      declareSummaryApplication({
        ...this.selected,
        logisticsNos: this.tableSelected.map((item) => item.logisticsNo),
      })
        .then((response) => {
          if (response.data) {
            this.msgSuccess("汇总申报成功");
            this.close(true);
            this.$nextTick(() => {
              this.$router.push("summaryDataSearch");
            });
          } else {
            this.msgError(response.message);
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.loadings.submitLoading = false;
        });
    },
    //新增
    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";
.entryDialog {
  ::v-deep {
    .el-dialog {
      margin-top: 5vh !important;
    }
  }
}
</style>