<template>
  <el-dialog
    class="entryDialog classCUploadDialog"
    :title="dataPreviewTitle"
    :visible.sync="batchModifyVisible"
    :show-close="false"
    width="700px"
    :close-on-click-modal="false"
  >
    <div style="margin-bottom: 10px">
      <span>
        提运单号 数量：<strong>{{ tableData.length }}</strong>
      </span>
      <span style="margin-left: 20px">
        物流运单编号 数量：<strong>{{ selectedDatas.length }}</strong>
      </span>
    </div>
    <Table
      class="fedexDetialTable fedexSreachTable"
      ref="entryTable"
      :data="tableData"
      :headerData="headerData"
      :border="true"
      :pagination="false"
      :order="false"
    >
    </Table>
    <div class="dialogOption entrySave revokeOperation">
      <el-button
        class="entrySaveButton entrySaveButton-background revokeSubmitBtn"
        type="primary"
        @click="formSubmit"
      >
        确定
      </el-button>
      <el-button class="entrySaveButton" @click="cancelModify">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { checkBillNo } from "@/api/declareData-api.js";

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    dataPreviewTitle: {
      type: String,
      default: "预览",
    },
    selectedDatas: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      headerData: [
        {
          name: "提运单号",
          value: "billNo",
          width: "180px",
          align: "left",
        },
        {
          name: "物流运单编号",
          value: "logisticsWaybillNumber",
          width: "",
          align: "left",
        },
      ],
      tableData: [],
      batchModifyVisible: false,
    };
  },
  watch: {
    showDialog(val) {
      if (val) {
        this.batchModifyVisible = val;
        this.getBillNo();
      }
    },
  },
  created() {},
  methods: {
    getBillNo() {
      checkBillNo({
        declareIds: this.selectedDatas.map((item) => item.declareId),
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.value;
        }
      });
    },

    formSubmit() {
      this.cancelModify(1);
    },

    cancelModify(val) {
      this.batchModifyVisible = false;
      this.$emit("cancelDataPreview", val);
    },
  },
};
</script>

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

.revokeOperation {
  margin-bottom: 25px;
  .revokeSubmitBtn {
    margin-right: 30px;
  }
}
</style>