<template>
  <el-dialog
    :title="$t('system.custom.transferDialogTitle')"
    v-loading="loading"
    :visible.sync="dialogVisible"
    style="min-width: 700px"
    width="40%"
    center
    append-to-body
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-radio-group class="inlineRadio" v-model="radio" @change="radioChange">
      <el-radio :label="1">{{ $t("system.custom.transferRadio1") }}</el-radio>
      <el-radio :label="2">{{ $t("system.custom.transferRadio2") }}</el-radio>
    </el-radio-group>
    <div class="transferDom">
      <el-transfer
        class="customTransfer"
        ref="customTransfer"
        filterable
        target-order="push"
        :titles="titles"
        v-model="value"
        :data="customData"
        :props="{
          key: 'poolCode',
          label: 'displayName',
          disabled: 'disabled',
        }"
        @change="valueChange"
        @right-check-change="rightCheckChange"
      >
        <span slot-scope="{ option }">{{ option.displayName }} </span>
      </el-transfer>
      <div class="transfer-rightOption">
        <el-button
          type="text"
          class="el-icon-arrow-up"
          :disabled="
            rightSelect.length != 1 || value.length == 1 || rightSelectIdx == 0
          "
          @click="up"
        ></el-button>
        <el-button
          type="text"
          class="el-icon-arrow-down"
          :disabled="
            rightSelect.length != 1 ||
            value.length == 1 ||
            rightSelectIdx == value.length - 1
          "
          @click="down"
        ></el-button>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="entrySaveButton" @click="handleClose">{{
        $t("system.close")
      }}</el-button>
      <el-button
        class="entrySaveButton entrySaveButton-background"
        type="primary"
        :loading="submitLoading"
        @click="submit"
        >{{ $t("system.confirm") }}</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { getCustomData, setCustomData } from "@/api/custom-api.js";
import i18n from "@/assets/languages";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    belongBizType: {
      //页面标识代码 11#员工端预审,12#员工端站点,13#员工端口岸,14#员工端运单查询
      type: Number,
      default: 0,
    },
    titles: {
      type: Array,
      default: () => {
        return [
          i18n.t("system.custom.transferLeftTitle"),
          i18n.t("system.custom.transferRightTitle"),
        ];
      },
    },
  },
  data() {
    return {
      customData: [], //总数据集
      value: [], //
      rightSelect: [],
      rightSelectIdx: 0,
      radio: 1,
      loading: false,
      submitLoading: false,
    };
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getCustom();
      }
    },
    value(val) {
      this.$emit("transfeChange", { customData: this.customData, value: val });
    },
  },
  methods: {
    //获取自定义数据
    getCustom() {
      this.loading = true;
      this.submitLoading = true;
      return new Promise((resolve, reject) => {
        getCustomData({
          belongBizType: this.belongBizType,
          queryType: this.radio,
        })
          .then((res) => {
            if (res.code === "200") {
              this.rightSelectIdx = 0;
              this.customDataInfo(res);
              resolve();
            } else {
              this.alertWarningMsg(res.message);
              reject();
            }
            this.loading = false;
            this.submitLoading = false;
          })
          .catch((err) => {
            this.loading = false;
            this.submitLoading = false;
            console.log(err);
            reject();
          });
      });
    },
    //上移
    up() {
      let arr = JSON.parse(JSON.stringify(this.value));
      let selectid = JSON.parse(
        JSON.stringify(this.value[this.rightSelectIdx])
      );
      let shiftSelect = JSON.parse(
        JSON.stringify(this.value[this.rightSelectIdx - 1])
      );
      arr[this.rightSelectIdx] = shiftSelect;
      arr[this.rightSelectIdx - 1] = selectid;
      this.$nextTick(() => {
        this.value = arr;
        // this.rightSelect = [];
        this.rightSelectIdx = this.rightSelectIdx - 1;
        // this.$refs.customTransfer.$children[3].checked = [];
      });
    },
    //下移
    down() {
      let arr = JSON.parse(JSON.stringify(this.value));
      let selectid = JSON.parse(
        JSON.stringify(this.value[this.rightSelectIdx])
      );
      let shiftSelect = JSON.parse(
        JSON.stringify(this.value[this.rightSelectIdx + 1])
      );
      arr[this.rightSelectIdx] = shiftSelect;
      arr[this.rightSelectIdx + 1] = selectid;
      this.$nextTick(() => {
        this.value = arr;
        // this.rightSelect = [];
        this.rightSelectIdx = this.rightSelectIdx + 1;
        // this.$refs.customTransfer.$children[3].checked = [];
      });
    },
    //切换类型
    radioChange(val) {
      this.customData = [];
      this.value = [];
      this.$nextTick(() => {
        this.getCustom();
      });
    },
    //保存修改数据
    submit() {
      this.submitLoading = true;
      let arr = [];
      this.value.forEach((val) => {
        this.customData.forEach((item) => {
          if (val == item.poolCode) {
            arr.push({
              defaultOrderNum: item.defaultOrderNum,
              displayName: item.displayName,
              id: null,
              orderNum:
                arr.length == 0 ? 2001 : Number("200" + (arr.length + 1)),
              poolCode: item.poolCode,
            });
          }
        });
      });
      setCustomData({
        belongBizType: this.belongBizType,
        queryType: this.radio,
        target: arr,
      })
        .then((res) => {
          if (res.code === "200") {
            this.loading = true;
            this.customDataInfo(res);
            this.$emit("customTransferSubmit", { selectData: this.radio });
            this.handleClose();
          } else {
            this.alertWarningMsg(res.message);
          }
          this.submitLoading = false;
        })
        .catch((err) => {
          this.submitLoading = false;
          console.log(err);
        });
    },
    //右侧数据改变
    valueChange(val) {
      this.rightSelect = [];
      this.rightSelectIdx = 0;
    },
    //右侧选中数据改变
    rightCheckChange(val) {
      this.rightSelect = val;
      this.value.find((value, index) => {
        if (value == val) {
          this.rightSelectIdx = index;
        }
      });
    },
    //数据初始化
    customDataInfo(val) {
      let arr = val.data.extra.source;
      val.data.extra.target.forEach((item) => {
        this.value.push(item.poolCode);
        let status = true;
        arr.forEach((value) => {
          if (item.poolCode == value.poolCode) {
            status = false;
          }
        });
        if (status) {
          arr.push({
            poolCode: item.poolCode,
            displayName: item.displayName,
            defaultOrderNum: item.orderNum,
          });
        }
      });
      this.customData = arr.sort(this.compare("defaultOrderNum"));
      this.loading = false;
    },
    //关闭页面
    handleClose() {
      this.$emit("close");
      this.customData = [];
      this.value = [];
      this.rightSelect = [];
      this.rightSelectIdx = 0;
      this.radio = 1;
    },
  },
};
</script>

<style></style>