<template>
  <el-dialog
    title="列设置"
    class="setting-dialog"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <div>
      <div class="tip">
        <i class="el-icon-info"></i>点击左侧切换列是否显示，拖拽上下移动进行列的排序
      </div>
      <el-scrollbar class="columns-list" @dragover="dragover">
        <transition-group class="columns-list" @dragover="dragover">
          <div
            class="dragItem"
            :key="item.label"
            v-for="(item, index) in currentColumns"
            :draggable="draggable(item)"
            @dragstart="dragstart(index)"
            @dragenter="dragenter($event, index)"
            @dragover="dragover"
          >
            <div :class="'item ' + (draggable(item) ? 'draggable':'')" v-if="item.label">
              <div class="checkbox" @click="toggle(item, index)">
                <i
                  :class="'kt-iconfont ' + (!item.flag? 'icon-checkbox-xuanzhong' : 'icon-checkbox-weixuan')"
                ></i>
              </div>
              {{item.label}}
              <el-tooltip effect="dark" content="拖拽上下移动进行排序" placement="top-end">
                <i class="el-icon-rank" style="margin-left: auto; margin-right:15px;"></i>
              </el-tooltip>
            </div>
          </div>
        </transition-group>
      </el-scrollbar>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="info" @click="restore">还原默认</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import ELDialog from '../../../dialog/index';
import ElTooltip from '../../../tooltip/index';
import ElScrollbar from '../../../scrollbar/index';
export default {
  components: {
    ELDialog,
    ElScrollbar,
    ElTooltip
  },
  data() {
    return {
      dialogVisible: false,
      currentColumns: [],
      dragIndex: '',
      enterIndex: '',
      timeout: null
    };
  },
  computed: {
    columns() {
      return this.$parent.columns;
    },
    newColumns() {
      return this.$parent.newColumns;
    }
  },
  watch: {
    columns: {
      handler(val) {
        this.currentColumns = JSON.parse(JSON.stringify(val));
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleClose(done) {
      this.clear();
      done();
    },
    draggable(item) {
      return !(
        item.key === '$$selection' ||
        item.key === '$$index' ||
        item.label === '操作'
      );
    },
    isIn(item) {
      // console.log(this.newColumns);
      const res = this.currentColumns.findIndex(o => {
        return o.key === item.key;
      });
      return res > 0 ? res : false;
    },
    toggle(item, index) {
      // console.log(item, index);
      // const indexInNew = this.isIn(item);
      if (!item.flag) {
        // 删除
        // this.currentColumns.splice(2, 1);
        item.flag = true;
        this.$set(this.currentColumns, index, item);
      } else {
        // 添加
        item.flag = false;
        this.$set(this.currentColumns, index, item);
        // this.currentColumns.splice(index, 0, item);
      }
    },
    clear() {
      clearTimeout(this.timeout);
      this.timeout = null;
    },
    confirm() {
      this.dialogVisible = false;
      this.clear();
      const idxs = [];
      let list = this.currentColumns;
      this.currentColumns.filter((item, index) => {
        if (item.flag) {
          idxs.push(index);
        }
      });
      this.$parent.newColumns = list.filter((n, i) => !idxs.includes(i));
      // this.$parent.newColumns = this.currentColumns;
    },
    dragstart(index) {
      this.dragIndex = index;
    },
    dragenter(event, index) {
      event.preventDefault();
      this.enterIndex = index;
      if (this.timeout !== null) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        if (this.dragIndex !== index) {
          const source = this.currentColumns[this.dragIndex];
          this.currentColumns.splice(this.dragIndex, 1);
          this.currentColumns.splice(index, 0, source);
          this.dragIndex = index;
        }
      }, 100);
    },
    dragover(event) {
      event.preventDefault();
    },
    restore() {
      this.currentColumns = JSON.parse(JSON.stringify(this.columns));
    }
  },
  mounted() {
    // console.log(this.newColumns);
  }
};
</script>