<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"
          :right-default-checked="currentItem"
          filterable
          target-order="push"
          :props="{ label: 'itemChineseName', key: 'itemValue' }"
          :titles="['未选内容', '已选内容']"
          @right-check-change="choose"
        >
          <span
            class="el-icon-arrow-up"
            slot="right-footer"
            style="margin-left: 10px; cursor: pointer"
            @click="handleUp('transferValue')"
            title="上移"
          >
          </span>
          <span
            class="el-icon-arrow-down"
            slot="right-footer"
            style="cursor: pointer; margin-left: 8px"
            @click="handleDown('transferValue')"
            title="下移"
          >
          </span>
          <!-- <el-button
            class="transer-footer"
            size="mini"
        
            >上移</el-button
          > -->
          <!-- <el-button
            class="transer-footer"
            slot="right-footer"
            size="mini"
            @click="handleDown('transferValue')"
            >下移</el-button
          > -->
        </el-transfer>
      </template>
      <template v-if="radio === 6">
        <el-transfer
          v-model="transferValue1"
          :data="commodityDetailDimension"
          :right-default-checked="currentItem"
          filterable
          target-order="push"
          :props="{ label: 'itemChineseName', key: 'itemValue' }"
          :titles="['未选内容', '已选内容']"
          @right-check-change="choose"
        >
          <span
            class="el-icon-arrow-up"
            slot="right-footer"
            style="margin-left: 10px; cursor: pointer"
            @click="handleUp('transferValue1')"
            title="上移"
          >
          </span>
          <span
            class="el-icon-arrow-down"
            slot="right-footer"
            style="cursor: pointer; margin-left: 8px"
            @click="handleDown('transferValue1')"
            title="下移"
          >
          </span>
          <!-- <el-button
            class="transer-footer"
            slot="right-footer"
            style="margin-left: 10px"
            size="mini"
            @click="handleUp('transferValue1')"
            >上移</el-button
          >
          <el-button
            class="transer-footer"
            slot="right-footer"
            size="mini"
            @click="handleDown('transferValue1')"
            >下移</el-button
          > -->
        </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: {},
      currentItem: [],
    };
  },
  watch: {
    showDialog(val) {
      if (val) {
        this.customVisible = val;
        this.getList();
        this.radio = 3;
      }
    },
  },
  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;
      }
      this.currentItem = [];
    },

    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.currentItem = [];
      this.$emit("cancelModify", val);
    },
    //===============
    //上移事件
    handleUp(key) {
      let self = this;
      let item = self.currentItem;
      let index;
      if (item.length == 1) {
        self[key].find((val, indexs, arr) => {
          if (val == item[0]) {
            index = indexs;
          }
        });
        if (index == 0) {
          self.msgError("已经到顶了");
          return;
        }
        //改变的数组
        let changeItem = JSON.parse(JSON.stringify(self[key][index - 1]));
        self[key].splice(index - 1, 1);
        self[key].splice(index, 0, changeItem);
      } else {
        self.msgError("只能选择一条数据进行上下移动");
        return;
      }
    },
    choose(value) {
      this.currentItem = value;
    }, //下移事件
    handleDown(key) {
      let self = this;
      let item = self.currentItem;
      let index;
      if (item.length == 1) {
        //选中值的下标
        self[key].find((val, indexs, arr) => {
          if (val == item) {
            index = indexs;
          }
        });
        if (index == self[key].length - 1) {
          // 这里是length-1,因为下标值从0开始
          self.msgError("已经到底了");
          return;
        }
        let changeItem = JSON.parse(JSON.stringify(self[key][index]));
        self[key].splice(index, 1);
        self[key].splice(index + 1, 0, changeItem);
      } else {
        self.msgError("只能选择一条数据进行上下移动");
        return;
      }
    },
    // ===========
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
::v-deep {
  .el-transfer-panel .el-checkbox__inner {
    height: 17px;
    width: 14px;
  }
  .el-button--primary,
  .el-button--primary:hover,
  .el-button--primary:focus {
    color: #ff6200;
  }
  /* .el-transfer-panel__list.is-filterable {
    padding-bottom: 40px;
  } */
  .el-transfer-panel__body {
    height: 260px;
  }
  .el-transfer-panel__list.is-filterable {
    height: 240px;
  }
  .is-with-footer {
    .el-transfer-panel__list.is-filterable {
      height: 205px;
    }
  }
  .el-transfer__buttons {
    display: inline-flex;
    flex-direction: column;
    .el-button + .el-button {
      margin-left: 0;
    }
  }
  .el-transfer-panel {
    width: 235px;
    height: 350px;
  }
}

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