<template>
  <transition>
    <div class="dsk-table-header-setting-bar">
      <div class="dsk-table-header-setting-bar-inner">

      </div>
    </div>
  </transition>
</template>
<script>
import vuedraggable from "vuedraggable";
export default {
  name: "dskTableHeaderSettingBar",
  components: {
    vuedraggable
  },
  props: {
    settingList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      lockColumn: [],
      useColumn: [],
      notUseColumn: []
    };
  },
  //可访问data属性
  created() {
    this.settingHeaderClassify();
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    // 表头当前状态分类
    settingHeaderClassify() {
      if (this.settingList?.length) {
        const temp = JSON.parse(JSON.stringify(this.settingList));
        const len = temp.length;
        for (let index = 0; index < len; index++) {
          if (temp[index].lock) {
            this.lockColumn.push({
              ...temp[index],
              use: true
            });
            continue;
          }
          // 设置了false值
          if (temp[index].hasOwnProperty("use") && temp[index].use === false) {
            this.notUseColumn.push(temp[index]);
            continue;
          }
          // 默认为true 展示
          this.useColumn.push({
            ...temp[index],
            use: true
          });
        }
        console.log(this.useColumn);
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.dsk-table-header-setting-bar {
  position: absolute;
  top: 24px;
  left: 0px;
  width: 236px;
  height: 456px;
  background: #fff;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  z-index: 3000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

  .dsk-table-header-setting-bar-inner {
    width: 100%;
    height: 100%;
  }
}
</style>
