<template>
  <el-dialog
    title="列定制"
    :visible.sync="visibleDialog"
    width="640px"
    @close="columnClose"
  >
    <div class="content">
      <div class="left-box">
        <div class="left-select">
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >{{ checkedItems.length }} / {{ tableColumn.length }}</el-checkbox>
          <el-checkbox-group
            v-model="checkedItems"
            class="check-list"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="item in tableColumn"
              :key="item.label"
              :label="item.label"
            >{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="left-bottom">
          <el-button
            :size="$buttonSize"
            @click="resetColumn"
          >恢复默认</el-button>
        </div>
      </div>
      <div class="right-box">
        <div class="right-top">
          已选{{ checkedItems.length }}项
          <el-button
            type="text"
            :size="$buttonSize"
            @click="clearSelect"
          >全部清空</el-button>
        </div>
        <el-input
          v-model="searchParams"
          placeholder="请输入搜索内容"
        >
          <template #suffix>
            <i
              class="search-icon el-icon-search"
              @click="searchColumns"
            />
          </template>
        </el-input>
        <div class="select-columns">
          <div
            v-for="(item,index) in showItems"
            :key="item"
            class="select-li"
            draggable="true"
            @dragstart="onDragStart(index)"
            @dragover.prevent
            @drop="onDrop(index)"
          >
            <div class="li-left">
              <i class="el-icon-s-grid" />
              <div class="li-label">{{ item }}</div>
            </div>
            <!-- <img src="../../../public/images/close.svg"> -->
            <div class="icon-groups">
              <i
                class="el-icon-close"
                style="cursor:pointer;font-size:16px"
                @click="deleteItem(item)"
              />
              <i
                class="el-icon-top"
                style="cursor:pointer;font-size:16px"
                @click="sortItem(item,index)"
              /></div>
          </div>
        </div>
      </div>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        :size="$buttonSize"
        class="drawer-footer-cancel-btn"
        @click="columnClose"
      >取 消</el-button>
      <el-button
        :size="$buttonSize"
        class="drawer-footer-confirm-btn"
        type="primary"
        @click="handleCustomColumnConfirm"
      >保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    tableColumn: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      visibleDialog: false,
      columnDialog: false,
      checked: false,
      checkAll: false,
      isIndeterminate: false,
      checkedItems: [],
      showItems: [],
      searchParams: '',
      draggedIndex: '',
    };
  },
  watch: {
    showDialog: {
      handler(nv) {
        this.visibleDialog = nv;
      },
    },
  },
  mounted() {},
  methods: {
    onDragStart(index) {
      this.draggedIndex = index;
      this.$nextTick(() => {
        const draggedItem = this.$el.querySelector(`.draggable-item:nth-child(${index + 1})`);
        draggedItem.classList.add('dragging');
      });
      console.log(index, 'dropStart');
    },
    onDrop(index) {
      console.log(index, 'drop');
      if (this.draggedIndex !== index) {
        const draggedItem = this.items.splice(this.draggedIndex, 1)[0];
        this.items.splice(index, 0, draggedItem);
        this.draggedIndex = null;

        // 保存新顺序到服务器或本地存储
        // this.saveOrder();
      }
    },
    handleCheckAllChange(val) {
      this.checkedItems = val ? this.tableColumn.map(v => v.label) : [];
      this.showItems = [...this.checkedItems];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length;
      this.showItems = [...this.checkedItems];
      this.checkAll = checkedCount === this.tableColumn.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.tableColumn.length;
    },
    resetColumn() { // 恢复默认

    },
    searchColumns() {
      console.log(this.searchParams, 'searchParams');
      if (this.searchParams) {
        this.showItems = this.checkedItems.filter(v => v.includes(this.searchParams));
      } else {
        this.showItems = [...this.checkedItems];
      }
    },
    clearSelect() {
      this.checkedItems = [];
      this.showItems = [];
      this.isIndeterminate = false;
      this.checkAll = this.checkedItems === this.tableColumn.length;
    },
    columnClose() {
      this.visibleDialog = false;
      this.$emit('update:showDialog', false);
      this.searchParams = '';
      this.clearSelect();
    },
    deleteItem(item) {
      this.checkedItems = this.checkedItems.filter(v => v !== item);
      this.showItems = [...this.checkedItems];
      this.checkAll = this.checkedItems === this.tableColumn.length;
      this.isIndeterminate = this.checkedItems.length > 0 && this.checkedItems.length < this.tableColumn.length;
    },
    sortItem(item, index) {
      if (index > 0) {
        const arr = this.checkedItems;
        arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
        this.showItems = [...this.checkedItems];
      }
    },
    handleCustomColumnConfirm() {
      console.log(this.checkedItems, 'checkItems');
      this.columnClose();
      // this.$emit('customColumnChange', this.tableData);
    },
  },
};
</script>

<style lang="scss" scoped>
.content{
  display: flex;
}
.left-box {
  width:360px;
  height:490px;
  .left-select{
    padding: 8px 0 0 16px;
    border-radius: 2px;
    border: 1px solid var(--input-border);
    background-color: var(--desktop-bg-color-1);
    height:456px;
    .check-list{
      height:420px;
      line-height:20px;
      overflow:auto;
      margin-top:10px
    }
  }
  .left-bottom{
    border-radius: 0px 0px 2px 2px;
    border-left: 1px solid var(--input-border);
    border-right: 1px solid var(--input-border);
    border-bottom: 1px solid var(--input-border);
    padding:5px 12px
  }
}
.right-box{
  border-radius: 2px;
  border: 1px solid var(--input-border);
  opacity: 1;
  width:240px;
  height:490px;
  background:var(--desktop-bg-color-1);
  margin-left:8px;
  padding:5px 12px;
  .right-top{
    display:flex;
    justify-content: space-between;
    color:var(--text-color-1);
    font-family: "SourceHanSansSC-Regular";
    font-size: 12px;
    font-weight: 400;
    font-style: Regular;
    letter-spacing: 0px;
    text-align: left;
    line-height: 20px;
  }
  .select-columns{
    height:424px;
    overflow:auto;
    margin-top:8px;
    .select-li{
      height:28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .li-left{
      display:flex;
      align-items: center;
    }
    .select-li:hover{
      border-radius: 2px;
      background-color: rgba(0, 0, 0, 0.05);
      .icon-groups{
        display: block;
      }
    }
    .icon-groups{
      display: none;
      i+i{
        margin-left:5px
      }
    }
  }
}
.search-icon{
  font-size:16px;
  line-height: 30px;
  cursor:pointer;
  color:var(--text-color-1)
}
</style>
