<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-19 16:04:58
-->
<template>
  <div style="text-align: center" class="transfer">
    <el-transfer
      filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入关键词搜索"
      v-model="value"
      target-order="unshift"
      :left-default-checked="[]"
      :right-default-checked="[]"
      :titles="['待选合集', '已选合集']"
      :button-texts="['转到左边', '转到右边']"
      @right-check-change="choose"
      :data="datalist"
      v-loading="loading"
    >
      <div slot-scope="{ option }">
        <div
          class="default-tranfer-item"
          @mouseenter="indexKey = option.key"
          @mouseleave="indexKey = null"
        >
          <span>{{ option.despriction }}</span>
          <div
            v-show="value.includes(option.key) && indexKey === option.key"
            class="button-group"
          >
            <!--  阻止事件冒泡  -->
            <!-- 自定义数据项，将上、下、底部、顶部的排序功能放在数据项里面 -->
            <em
              class="el-icon-top"
              @click.stop.prevent="publicMobileMethod('handleUp', option.key)"
            ></em>
            <em
              class="iconfont icon-huidaodingbu"
              @click.stop.prevent="publicMobileMethod('handleTop', option.key)"
            ></em>
            <em
              class="el-icon-bottom"
              @click.stop.prevent="publicMobileMethod('handleDown', option.key)"
            ></em>
            <em
              class="el-icon-download"
              @click.stop.prevent="
                publicMobileMethod('handleBottom', option.key)
              "
            ></em>
          </div>
        </div>
      </div>
    </el-transfer>
    <div class="btn">
      <el-button @click="$popupCacel">取消</el-button>
      <el-button type="primary" @click="submitForm" plain>确定</el-button>
    </div>
    <!-- <footer class="footer">
        <div>
          <el-button class="cancel" size="mini" @click="$popupCacel">取消</el-button>
          <el-button class="determine" size="mini" @click="submitForm">确定</el-button>
        </div>
      </footer> -->
  </div>
</template>

<script>
import { getFieldList, getFieldListByQlxx, save } from "@/api/SysDjbFieldDO";
export default {
  props: {
    formData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: true,
      datalist:[],
      list: [], // 全部数据
      value: [], // 选中数据
      item: [], // 右侧勾选数据
      chuanlist: [],
      indexKey: null, // 高亮显示
      filterMethod(query, item) {
        return item.despriction.indexOf(query) > -1;
      },
    };
  },
  mounted() {
    this.generateData();
  },

  methods: {
    /**
     * 初始数据集
     * @returns {*[]}
     */
    generateData() {
      const data = [];
      this.value = [];
      getFieldList({ qllx: this.formData.qllx }).then((res) => {
        if (res.code === 200) {
          let listss = res.result;
          listss.forEach((item, index) => {
            this.list.push({
              key: index,
              name: item.name,
              despriction: item.despriction,
            });
          });
          getFieldListByQlxx({ qllx: this.formData.qllx }).then((res) => {
            let listss = res.result;
            if (res.code === 200) {
              this.list.forEach((el, idx) => {
                listss.forEach((item) => {
                  if (el.name == item.name) {
                    this.value.push(idx);
                  }
                });
              });
               this.datalist=this.list
               this.loading=false
            }
          });
        }
      });
    },
    /**
     * 确定选择
     */
    submitForm() {
      this.value.forEach((item) => {
        this.chuanlist.push(this.list[item]);
      });

      save(this.formData.bsmMb, this.chuanlist).then((res) => {
        if (res.code == 200) {
          this.$popupCacel();
          this.$message({
            message: "保存成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "保存失败",
            type: "error",
          });
        }
      });
    },
    /**
     * 监听右侧选中
     */
    choose(value) {
      this.item = value;
    },
    /**
     * 右侧数据点击排序
     */
    publicMobileMethod(direction, key) {
      const self = this;
      let index;
      // 判断是否超出一条
      const item = self.item;
      if (item.length === 1 || item.length === 0) {
        self.value.forEach((val, indexs) => {
          // 获取需移动数据的下标
          if (val === key) {
            index = indexs;
          }
        });
        if (
          index === 0 &&
          direction !== "handleBottom" &&
          direction !== "handleDown"
        ) {
          return self.$message("没有上移的空间了");
        }
        if (
          index === self.value.length - 1 &&
          direction !== "handleUp" &&
          direction !== "handleTop"
        ) {
          return self.$message("没有下移的空间了");
        }
        // 改变的数组
        const changeItem = self.value[index];
        // 根据下标在数组中删除该数据
        self.value.splice(index, 1);
        // 判断加入数组位置
        if (direction) {
          // 置顶
          direction === "handleTop" && self.value.unshift(changeItem);
          // 置底
          direction === "handleBottom" && self.value.push(changeItem);
          // 上移
          direction === "handleUp" &&
            self.value.splice(index - 1, 0, changeItem);
          // 下移
          direction === "handleDown" &&
            self.value.splice(index + 1, 0, changeItem);
        }
      } else {
        self.$message.error("只能选择一条数据进行上下移动");
      }
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBoxheader.scss";

.determine.el-button--mini {
  background-color: #2a76cd;
  color: #ffffff;
}

.el-transfer__button.cancel,
.el-button--mini.cancel {
  &:focus,
  &:hover {
    background: #ffffff;
    border-color: #2a76cd;
    color: #2a76cd;
  }
}

.el-transfer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .el-transfer-panel__item {
    margin-right: 0;
  }

  .default-tranfer-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .button-group {
      em {
        margin-right: 8px;
      }
    }
  }
  /deep/.el-checkbox-group {
    .el-checkbox {
      display: flex;
      position: relative;
      .el-checkbox__input {
        position: absolute;
        left: 10px;
      }
    }
    .el-checkbox:last-of-type {
      margin-right: 30px;
    }
  }

  .el-input.el-input--small {
    .el-input__inner {
      border-radius: 4px;
    }
  }

  .el-transfer__buttons {
    padding: 0;
    margin: 0 17px;

    .el-transfer__button {
      display: block;
      margin: 0 0 5px 0;
      padding: 4px 8px;
    }

    .el-button--primary.el-transfer__button {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #2a76cd;
      border-color: #2a76cd;
    }

    .el-button--primary.is-disabled {
      background-color: #a0cfff;
      border-color: #a0cfff;
    }
  }

  .el-checkbox__input.is-indeterminate {
    .el-checkbox__inner {
      background: #2a76cd;
      border-color: #2a76cd;
    }
  }

  .el-transfer-panel {
    width: 49%;
    border-radius: 0;
  }

  .el-transfer-panel__body {
    .el-checkbox__label {
      &:hover {
        color: #2a76cd;
      }
    }
  }

  .el-transfer-panel__header {
    .el-checkbox {
      .el-checkbox__label {
        font-size: 14px;

        span {
          left: 100px;
        }
      }
    }
  }

  .el-transfer-panel__footer {
    top: 0;
    left: 61%;
    background-color: transparent;
    display: flex;
    width: 30%;
    justify-content: right;
    border-color: transparent;

    .el-button--text {
      color: #b5b5b5;
      margin-left: 5px;

      .icon-huidaodingbu {
        font-size: 16px;
      }

      em {
        font-size: 14px;
        font-weight: 600;
      }
    }
  }

  .el-transfer-panel:first-child {
    .el-transfer-panel__header {
      .el-checkbox {
        .el-checkbox__label {
          span {
            left: 84px;
          }
        }
      }
    }
  }
}

/deep/.el-transfer {
  .el-transfer-panel {
    width: 400px;
    height: 700px;
    .el-transfer-panel__list.is-filterable {
      height: 606px;
    }
  }
}
</style>