<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-09-14 10:53:42
-->
<template>
  <div>
    <div class="fieldcheck">
      <div class="left">
        <div class="header">
          <el-checkbox
            class="check"
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange">待选合集</el-checkbox>
          <div class="num">/</div>
        </div>
        <el-checkbox-group
          class="concent"
          v-model="checkedCities"
          @change="handleCheckedCitiesChange">
          <el-checkbox
            v-for="city in cities"
            :label="city.name"
            :key="city.name">{{ city.despriction }}({{ city.name }})</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="right">
        <el-table
          class="tablelist"
          :data="datalist"
          ref="listTable"
          :key="key"
          row-key="name"
          :pagination="false"
          :header-cell-style="{ 'text-align': 'center' }"
          :heightNumSetting="true"
          :minHeight="150"
          height="590"
          style="width: 100%">
          <el-table-column label="字段" prop="name" min-width="100">
          </el-table-column>

          <el-table-column
            label="字段名称"
            prop="desprictionor"
            min-width="100">
          </el-table-column>
          <el-table-column label="字段别名" min-width="100">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.despriction"
                placeholder="请输入内容"
                @input="sumTime(scope.$index, scope.row.tdsyqx)">
                ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="btn">
      <el-button @click="$popupCacel">取消</el-button>
      <el-button type="primary" @click="submitForm" plain>确定</el-button>
    </div>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'
  import { getFieldList, getFieldListByQlxx, save } from "@/api/SysDjbFieldDO";
  export default {
    props: {
      formData: {
        type: Object,
        default: () => { },
      },
    },
    data () {
      return {
        checkAll: false,
        sortable: null,
        checkedCities: [],
        cities: [],
        datalist: [],
        tablelist: [],
        key: 0,
        isIndeterminate: true,
      };
    },
    mounted () {
      this.generateData()
    },
    beforeDestroy () {
      if (this.sortable) {
        this.sortable.destroy();
      }
    },
    watch: {
      key: {
        handler (newName, oldName) {
          this.initSort()
        }
      }
    },
    methods: {
      changeIndex (array, index1, index2) {
        array[index1] = array.splice(index2, 1, array[index1])[0];
      },
      initSort () {
           const el =  this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
	      // const sortable = new Sortable(el, options);
	      // 根据具体需求配置options配置项
	      const sortable = new Sortable(el, {
	        onEnd: (evt) => { // 监听拖动结束事件
	          console.log(this) // this是当前vue上下文
	          console.log(evt.oldIndex) // 当前行的被拖拽前的顺序
	          console.log(evt.newIndex) // 当前行的被拖拽后的顺序
	          // 这里就可以写我们需要传给后台的逻辑代码
	          // 我们有了 evt.oldIndex 和 evt.newIndex 这两个参数做索引，我们可以根据绑定在表格上面的 data 这个 Array 找到两个相应的记录。就可以针对数据进行操作啦。
	          // 下面将拖拽后的顺序进行修改
	          const currRow = this.datalist.splice(evt.oldIndex, 1)[0]
	          this.datalist.splice(evt.newIndex, 0, currRow)
          }
        })
      },
      /**
       * @description: 初始数据集
       * @author: renchao
       */
      generateData () {
        let that = this
        getFieldList({ qllx: this.formData.qllx }).then((res) => {
          if (res.code === 200) {
            let listss = res.result;
            listss.forEach((item, index) => {
              that.cities.push({
                name: item.name,
                despriction: item.despriction,
                desprictionor: item.despriction,
              });
            });

            getFieldListByQlxx({ qllx: this.formData.qllx }).then((res) => {
              if (res.code === 200) {
                let listss = res.result;
                listss.forEach((item, index) => {
                  that.tablelist.push({
                    name: item.name,
                    despriction: item.despriction,
                    desprictionor: item.despriction,
                  });
                  that.$nextTick(() => {
                    that.datalist = this.tablelist
                    that.checkedCities.push(item.name);
                  })
                })
                that.initSort()
              }
            });
          }
        });
      },
      handleCheckAllChange (val) {
        let checkedlist = []
        let orlist = []
        checkedlist = val ? this.cities : [];
        this.isIndeterminate = false;
        console.log("this.checkedCities", this.checkedCities);
        let lists = [];
        this.cities.forEach((item, index) => {

          checkedlist.forEach((el) => {
            orlist.push(el.name)
            if (item.name == el.name) {
              lists.push(this.cities[index]);
            }
          });
        });
        this.checkedCities = orlist
        this.datalist = lists;
        // 其他排序逻辑
        this.initSort()
      },
      handleCheckedCitiesChange (value) {
        console.log("value", value, this.checkedCities);
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.cities.length;
        let lists = [];
        this.cities.forEach((item, index) => {
          this.checkedCities.forEach((el) => {
            if (item.name == el) {
              console.log("1");
              lists.push(this.cities[index]);
            }
          });
        });
        this.datalist = lists;
        // 其他排序逻辑
        this.initSort()
      },
      submitForm () {
        save(this.formData.bsmMb, this.datalist).then((res) => {
          if (res.code == 200) {
            this.$popupCacel();
            this.$message({
              message: "保存成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "保存失败",
              type: "error",
            });
          }
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  @import "~@/styles/dialogBoxheader.scss";
  .fieldcheck {
    width: 100%;
    height: 650px;
    display: flex;
    justify-content: space-between;
    .left,
    .right {
      width: 47%;
      height: 650px;
      border: 1px solid rgb(230, 230, 230);
    }
    .left {
      .header {
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: rgba(243, 242, 242, 0.897);
        display: flex;
        justify-content: space-around;
        align-items:center .check {
          height: 20px;
          margin: auto;
        }
        .num {
          height: 20px;
        }
      }
      .concent {
        padding: 10px;
        width: 100%;
        display: inline-block;
        padding-left: 20px;
        overflow-x: hidden;
        height: 600px;
        .el-checkbox {
          width: 100%;
          padding: 10px;
        }
        .el-checkbox:hover {
          padding: 10px;
          background-color: rgba(243, 242, 242, 0.897);
        }
      }
    }
    .right {
      .header {
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: rgba(243, 242, 242, 0.897);
      }
      .tablelist {
        margin-top: 10px;
        height: 680px;
      }
    }
  }
  .btn {
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
</style>