<template>
  <el-dialog
    class="entryDialog classCUploadDialog"
    title="自定义内容"
    :visible.sync="customVisible"
    v-loading="dialogLoading"
    :show-close="false"
    width="700px"
    :close-on-click-modal="false"
  >
    <div
      style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
      "
    >
      <div class="radio-group">
        <el-radio-group v-model="radio" @change="radioChange">
          <el-radio :label="3">物流运单编号维度</el-radio>
          <el-radio :label="6">商品维度</el-radio>
        </el-radio-group>
      </div>
      <template v-if="radio === 3">
        <el-transfer
          v-model="transferValue"
          :data="logisticsWaybillDimension"
          filterable
          target-order="push"
          :props="{ label: 'itemChineseName', key: 'itemValue' }"
          :titles="['未选内容', '已选内容']"
        ></el-transfer>
      </template>
      <template v-if="radio === 6">
        <el-transfer
          v-model="transferValue1"
          :data="commodityDetailDimension"
          filterable
          target-order="push"
          :props="{ label: 'itemChineseName', key: 'itemValue' }"
          :titles="['未选内容', '已选内容']"
        ></el-transfer>
      </template>
    </div>
    <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 { getDictData } from "@/api/system/dict-api.js";
import {
  getCustomizeExcelFormat,
  getCustomizeExcel,
} from "@/api/exportList-api.js";

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    selectedDatas: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    const generateData = (_) => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0,
        });
      }
      return data;
    };
    return {
      customVisible: false,
      dialogLoading: false,
      transferValue: [],
      transferValue1: [],
      data: generateData(),
      radio: 3,
      commodityDetailDimension: [],
      logisticsWaybillDimension: [],
      historyInfo: {},
    };
  },
  watch: {
    showDialog(val) {
      if (val) {
        this.customVisible = val;
        this.getList();
      }
    },
  },
  created() {},
  methods: {
    async getList() {
      // COMMODITY_DETAIL_DIMENSION 商品明细维度字典code
      // LOGISTICS_WAYBILL_DIMENSION 物流运单编号维度字典code
      await getDictData({
        doctCode: "COMMODITY_DETAIL_DIMENSION",
      }).then((res) => {
        if (res.code === "200") {
          this.commodityDetailDimension = res.data;
        }
      });
      await getDictData({
        doctCode: "LOGISTICS_WAYBILL_DIMENSION",
      }).then((res) => {
        if (res.code === "200") {
          this.logisticsWaybillDimension = res.data;
        }
      });
      await getCustomizeExcel({}).then((res) => {
        if (res.code === "200") {
          this.transferValue = res.data.logisticsWaybillDimension
            ? res.data.logisticsWaybillDimension
            : res.data.defaultLogisticsWaybill;
          this.transferValue1 = res.data.commodityDetailDimension
            ? res.data.commodityDetailDimension
            : res.data.defaultCommodityDetail;
          this.historyInfo = res.data;
          this.$nextTick(() => {
            this.commodityDetailDimension = this.commodityDetailDimension.map(
              (item) => {
                return {
                  ...item,
                  disabled: res.data.defaultCommodityDetail.includes(
                    item.itemValue
                  ),
                };
              }
            );
            this.logisticsWaybillDimension = this.logisticsWaybillDimension.map(
              (item) => {
                return {
                  ...item,
                  disabled: res.data.defaultLogisticsWaybill.includes(
                    item.itemValue
                  ),
                };
              }
            );
          });
        }
      });
    },
    radioChange(e) {
      console.log(e);
      if (e === 3) {
        this.transferValue = this.historyInfo.logisticsWaybillDimension
          ? this.historyInfo.logisticsWaybillDimension
          : this.historyInfo.defaultLogisticsWaybill;
      } else if (e === 6) {
        this.transferValue1 = this.historyInfo.commodityDetailDimension
          ? this.historyInfo.commodityDetailDimension
          : this.historyInfo.defaultCommodityDetail;
      }
    },

    formSubmit() {
      let params = {
        // 商品明细维度字段
        commodityDetailDimension: {},
        // 物流运单编号维度
        logisticsWaybillDimension: {},
      };

      // 物流运单编号维度 3
      params.logisticsWaybillDimension = this.transferValue.reduce(
        (acc, item) => {
          const dimension = this.logisticsWaybillDimension?.find(
            (dim) => dim?.itemValue === item
          );
          if (dimension?.itemChineseName) {
            acc[dimension.itemChineseName] = item;
          }
          return acc;
        },
        {}
      );
      params.commodityDetailDimension = this.transferValue1.reduce(
        (acc, item) => {
          const dimension = this.commodityDetailDimension?.find(
            (dim) => dim?.itemValue === item
          );
          if (dimension?.itemChineseName) {
            acc[dimension.itemChineseName] = item;
          }
          return acc;
        },
        {}
      );

      console.log("datas==", params);
      getCustomizeExcelFormat(params)
        .then((res) => {
          if (res.code === "200") {
            this.msgSuccess("修改成功");
            this.cancelModify(1);
          } else {
            this.alertWarningMsg(res.message);
            this.cancelModify(0);
          }
        })
        .catch((err) => {
          console.log(err);
          this.alertWarningMsg(err.message);
          this.cancelModify(0);
        });
    },

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

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
::v-deep {
  .el-transfer-panel .el-checkbox__inner {
    height: 17px;
    width: 13px;
  }
  .el-button--primary,
  .el-button--primary:hover,
  .el-button--primary:focus {
    color: #ff6200;
  }
}

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