<template>
  <div>
    <el-dialog
      :title="$t('label.edit_list')"
      :visible.sync="transferVisible"
      width="50%"
      top="30px"
      :before-close="handleClose"
    >
      <div class="obpm-main mt-3">
        <div class="dialog-content">
          <div class="content-header">
            <span>表单：</span>
            <el-select v-model="selectValue" size="small">
              <el-option :label="formOptions.name" :value="formOptions.id"></el-option>
            </el-select>
          </div>
          <el-transfer
            :data="leftData"
            :titles="['字段', '列']"
            v-model="rightData"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}',
            }"
            target-order="push"
            @right-check-change="chooseRightBox"
          >
            <el-button @click="handleUp" slot="right-footer" size="mini">{{$t('btns.up')}}</el-button>
            <el-button @click="handleDown" slot="right-footer" size="mini">{{$t('btns.down')}}</el-button>
          </el-transfer>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">{{$t('btns.cancel')}}</el-button>
        <el-button type="primary" size="small" @click="addBatch">{{$t("btns.save")}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      formOptions: {},
      selectValue: "", // 被选中的值
      rightData: [], // 右侧被选中的值
      rightSelectItem: [], // 右侧复选框选中项,值为leftData的key
      rightSelectIndex: "", // 右侧列表被选中项的下标值
    };
  },
  mounted(){
    this.formOptions = this.$store.state.currentDataSourcesOption
  },
  methods: {
    // 右侧选中的复选框
    chooseRightBox (value) {
      this.rightSelectItem = value;
    },
    // 弹框关闭的回调和取消
    handleClose () {
      this.$emit("closeTransferDialog");
      // 清空操作
      this.leftData = this.leftData;
      this.rightData = [];
    },
    // 右侧复选框上移
    handleUp () {
      if (this.rightSelectItem.length == 1) {
        this.rightData.find((val, indexs) => {
          if (val == this.rightSelectItem) {
            this.rightSelectIndex = indexs; // 数组项的下标就是我当前选中项的下标
          }
        });
        if (this.rightSelectIndex == 0) {
          return this.$message.info(this.$t('msg.no_space'));
        }
        // 上移-改变的数组（项和下标同时改变）
        let changeItem = JSON.parse(JSON.stringify(this.rightData[this.rightSelectIndex - 1]));
        this.rightData.splice(this.rightSelectIndex - 1, 1);
        this.rightData.splice(this.rightSelectIndex, 0, changeItem);
        this.rightSelectIndex = this.rightSelectIndex - 1;
      } else {
        return this.$message.error(this.$t('msg.choose_one'));
      }
    },
    // 右侧复选框下移
    handleDown () {
      if (this.rightSelectItem.length == 1) {
        this.rightData.find((val, indexs) => {
          if (val == this.rightSelectItem) {
            this.rightSelectIndex = indexs;
          }
        });
        if (this.rightSelectIndex == this.rightData.length - 1) {
          // 这里是length-1,因为下标值从0开始
          return this.$message.info(this.$t('msg.no_space'));
        }
        let changeItem = JSON.parse(JSON.stringify(this.rightData[this.rightSelectIndex]));
        this.rightData.splice(this.rightSelectIndex, 1);
        this.rightData.splice(this.rightSelectIndex + 1, 0, changeItem);
        this.rightSelectIndex = this.rightSelectIndex + 1;
      } else {
        return this.$message.error(this.$t('msg.choose_one'));
      }
    },

    // 批量保存
    addBatch () {
      let arr = [];
      if(this.rightData.length == 1){
        this.leftData.map(item => {
          if(item.id == this.rightData[0]){
            arr.push(item)
          }
        })
      }else if(this.rightData.length > 1){
        this.leftData.map(lItem => {//lLtem
          this.rightData.map(rItem => {
            if(lItem.id == rItem){
              arr.push(lItem)
            }
          })
        })
      }else{
        return this.$message.error(this.$t('msg.choose_data'))
      }
      // 提交给父组件批量保存
      this.$emit("addBatchColumnsView", arr);
      // this.$emit("closeTransferDialog");
    },
  },
  props: {
    transferVisible: Boolean,
    leftData: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  watch: {
    formOptions () {
      this.selectValue = this.formOptions.id
    }
  },
};
</script>
<style lang="scss" scoped>
.content-header {
  margin: 10px 0;
}
</style>
