<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>
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.tableData = this.processWaybills(this.selectedDatas);
      }
    },
  },
  created() {},
  methods: {
    processWaybills(data) {
      if (!Array.isArray(data)) {
        throw new Error("输入参数必须是数组");
      }

      return Array.from(
        data.reduce((map, item) => {
          const key = item.billNo;
          if (!map.has(key)) {
            map.set(key, {
              billNo: key,
              logisticsWaybillNumber: [],
            });
          }
          if (item.logisticsWaybillNumber) {
            map
              .get(key)
              .logisticsWaybillNumber.push(item.logisticsWaybillNumber);
          }
          return map;
        }, new Map()),
        ([_, value]) => ({
          ...value,
          logisticsWaybillNumber: value.logisticsWaybillNumber.join(","),
        })
      );
    },

    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>