<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-19 16:04:58
-->
<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">
        <div class="header">
          <el-button> 置顶 </el-button>
          <el-button> 上移 </el-button>
          <el-button> 下移 </el-button>
          <el-button> 置底 </el-button>
        </div>
        <el-table
          class="tablelist"
          :data="datalist"
          ref="listTable"
          row-key="zd"
          :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,
      checkedCities: [],
      cities: [],
      datalist: [],
      tablelist: [],
      key: 0,
      isIndeterminate: true,
    };
  },
  mounted() {
    this.generateData();
    this.initSort();
  },
  beforeDestroy() {
    if (this.sortable) {
      this.sortable.destroy();
    }
  },
  methods: {
    changeIndex(array, index1, index2) {
      array[index1] = array.splice(index2, 1, array[index1])[0];
      /** splice 会修改原来的数组 slice 不会 返回的是删除后的数据 所以 index2要删除的位置，删除1个数据 返回是index2的数据 然后最后一个参数是新增的数据为index的数据 */
    },
    initSort() {
      this.datalist=[]
      this.datalist =this.tablelist
      const el = this.$refs.listTable.$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      this.sortable = Sortable.create(el, {
        ghostClass: "sortable-ghost",
        setData: function (dataTransfer) {
          dataTransfer.setData("Text", "");
        },
        onEnd: (evt) => {
          console.log("evt.oldIndex", evt.oldIndex);
          console.log("evt.newIndex", evt.newIndex);
          const targetRow = this.tablelist.splice(evt.oldIndex, 1)[0];
          console.log("targetRow", targetRow);
          // this.changeIndex(this.datalist,evt.newIndex,evt.oldIndex)
          // console.log("this.datalist", this.datalist);
          this.datalist.splice(evt.newIndex, 0, targetRow);
          console.log();
          this.$set(this.datalist,targetRow);

        },
      });
    },
    //      initSort () {
    //   const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
    //   this.sortable =new Sortable(el, {
    //     onEnd: (evt) => { // 监听拖动结束事件
    //       console.log(this) // this是当前vue上下文
    //       console.log(evt.oldIndex) // 当前行的被拖拽前的顺序
    //       console.log(evt.newIndex)
    //      const currRow = this.tableData.splice(evt.oldIndex, 1)[0]
    //       this.datalist.splice(evt.newIndex, 0, currRow)
    //     }
    //     })
    // },
    //    initSort(){
    //   let el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
    //   //设置配置
    //   let _this = this
    //   Sortable.create(el, {
    //     animation: 150,
    //     sort: true,
    //     // draggable: '.el-table__row', // 设置可拖拽行的类名(el-table自带的类名)
    //     forceFallback: true,
    //     onEnd({newIndex, oldIndex}) {
    //       let currRow = _this.datalist.splice(oldIndex, 1)[0];
    //       _this.datalist.splice(newIndex, 0, currRow);
    //     }
    //   })
    // },
    /**
     * @description: 初始数据集
     * @author: renchao
     */
    generateData() {
      getFieldList({ qllx: this.formData.qllx }).then((res) => {
        if (res.code === 200) {
          let listss = res.result;
          listss.forEach((item, index) => {
            this.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) => {
                this.tablelist.push({
                  name: item.name,
                  despriction: item.despriction,
                  desprictionor: item.despriction,
                });
                this.datalist =this.tablelist
                this.checkedCities.push(item.name);
              });
            }
          });
        }
      });
    },
    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]);
          }
        });
      });
      console.log("orlist",orlist);
      this.checkedCities=orlist
      this.tablelist = lists;
       this.datalist =this.tablelist
    },
    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.tablelist = lists;
      this.datalist =this.tablelist
    },
    submitForm() {
      console.log("this.datalistdss", this.datalist);
      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>