<template>
  <div ref="dragSet" class="dragSetting">
    <el-popover trigger="click" v-model="dragVisible">
      <div class="content" style="height:300px;overflow: auto;">
        <draggable
          element="ul"
          style="transition: all 0.3s;border-bottom: 1px solid #EBEEF5;"
          :style="{ height: dragVisible ? 'calc(100% - 50px)' : '0', overflow: 'auto' }"
          v-model="list"
          :options="dragOptions"
        >
          <div class="dragItem" v-for="(item, index) in list" :domProp="item.prop" :key="index">
            <el-checkbox v-model="item.isShow" />
            {{ item.label }}
            <!-- <i
                    class="iconfont icon-lock itemIsLock"
                    v-if="item.isLock"
                    @click="unLockItems(index)"
                ></i> -->
            <!-- <i class="iconfont icon-unlock itemLock" v-else @click="lockItems(index)"></i> -->
            <i class="iconfont icon-drag dragIcon"></i>
          </div>
        </draggable>
        <div class="confirmBtn" slot="footer" @click="save">确定</div>
      </div>
      <i class="iconfont icon-yewushezhi" style="font-size: 14px;cursor: pointer;" slot="reference"></i>
    </el-popover>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  name: 'SyDragSet',
  props: {
    // 列
    listConf: {
      type: Array,
      required: true,
      default: () => []
    },
    value: {
      type: Boolean,
      default: false
    },
    cusStyle: {}
  },
  data() {
    return {
      // vuedrag的配置项
      dragOptions: {
        animation: 300,
        pull: false,
        group: { name: 'description', pull: false },
        disabled: false,
        ghostClass: 'ghost'
      },
      list: [],
      dragVisible: false
    }
  },
  components: {
    draggable
  },
  methods: {
    // 列表项目锁定
    lockItems(index) {
      const arr1 = this.list.slice(0, index + 1)
      arr1.forEach(item => {
        item.isLock = true
      })
      this.list.splice(0, index + 1, ...arr1)
    },
    // 列表项目解锁
    unLockItems(index) {
      const arr1 = this.list.slice(index, this.list.length)
      arr1.forEach(item => {
        item.isLock = false
      })
      this.list.splice(index, this.list.length, ...arr1)
    },
    save() {
      this.dragVisible = false
      this.$emit('save', this.list)
    }
  },
  watch: {
    listConf: {
      handler() {
        this.list = JSON.parse(JSON.stringify(this.listConf))
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  box-sizing: border-box;
  .dragItem {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    cursor: move;
    .itemLock {
      float: right;
      opacity: 0;
      cursor: pointer;
      transition: opacity 0.1s;
    }
    .itemIsLock {
      cursor: pointer;
      float: right;
    }
    .dragIcon {
      float: right;
      opacity: 0;
      transition: opacity 0.1s;
      margin-right: 8px;
    }
    &:hover {
      color: #027aff;
      .itemLock {
        opacity: 1;
      }
      .dragIcon {
        opacity: 1;
      }
    }
  }
  .confirmBtn {
    margin: 16px auto 0;
    width: 72px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    color: #fff;
    background: #027aff;
    cursor: pointer;
  }
}

.dragSetting {
  position: absolute;
  right: 0;
  top: 0;
  height: 40px;
  line-height: 40px;
  padding: 0 2px;
  background: #f2f5f9;
  border: 1px solid #ebeef5;
  border-left: 1px solid #d8d8d8;
  color: #606266;
  z-index: 20;
}
ul {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 100%;
}
</style>
