<template>
  <div class='showColumnsItem'>
    <div style='background:#fff;width: 100%'>
      <a-tree
        v-model='checkedColumn'
        :tree-data='treeData'
        checkable
        class='draggableTree'
        draggable
        @check='onCheck'
        @drop='onDrop'
      />
      <a-divider class='divider' />
      <div class='footerBox'>
        <a-button @click='allOrEmptyMenu'>{{ selectText }}</a-button>
        <a-button @click='submitMenu'>确定</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
import { postAction } from '@/api/manage'

export default {
  props: ['columns', 'fieldDictCode'],
  data: () => ({
    checkedColumn: [], // 已选中
    treeData: [], // 全部树选择
    selectText: ''
  }),
  mounted() {
  },
  created() {
    this._getDictInfo()
  },
  methods: {
    async _getDictInfo() {
      const { result: dictCode } = await this.getInfo(this.fieldDictCode)
      if (dictCode && dictCode.length > 0) {
        this.treeData = dictCode.map(it => ({ ...it, label: it.title, key: it.value }))
        this.checkedColumn = dictCode.filter(it => it.status).map(it => it.value)
        this.selectText = this.checkedColumn.length === this.treeData.length ? '全取消' : '全选'
        this.$emit('fatherMethod')
      }
    },
    // 获取全部列
    getInfo(type) {
      return postAction('/smb/userConfig/queryParams', {
        type
      })
    },
    // 设置列显示
    setInfo(type, params) {
      return postAction('/smb/userConfig/setParams', {
        type,
        params
      })
    },
    // 设置列排序
    setInfoSort(type, params) {
      return postAction('/smb/userConfig/setSorts', {
        type,
        params
      })
    },
    // 拖拽完成后
    onDrop(info) {
      const dropKey = info.node.eventKey // 目标节点
      const dragKey = info.dragNode.eventKey // 所拖拽节点
      const dropPos = info.node.pos.split('-')// dropPos[1] = 拖拽的目标下标
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]) // 拖拽到的位置： 1 = 目标位置之后 0=目标位置的字节 -1 = 目标之前
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.key === key) {
            return callback(item, index, arr)
          }
          if (item.children) {
            return loop(item.children, key, callback)
          }
        })
      }
      const data = [...this.treeData]
      let dragObj
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1)
        dragObj = item
      })
      let ar
      let i
      loop(data, dropKey, (item, index, arr) => {
        ar = arr
        i = index
      })
      if (dropPosition === -1) {
        ar.splice(i, 0, dragObj)
      } else {
        ar.splice(i + 1, 0, dragObj)
      }
      this.treeData = data
    },
    // 处理选中
    onCheck(keys, e) {
      this.treeData.forEach(item => {
        item.status = keys.includes(item.key)
      })
    },
    // 全选列
    allOrEmptyMenu() {
      if (this.selectText === '全选') {
        this.$set(this, 'selectText', '全取消')
        this.checkedColumn = []
        this.treeData.forEach(item => {
          item.status = true
          this.checkedColumn.push(item.key)
        })
      } else {
        this.treeData.forEach(item => {
          item.status = false
        })
        this.$set(this, 'selectText', '全选')
        this.checkedColumn = []
      }
    },
    // 提交已经选中
   async submitMenu() {
     let columnData = this.treeData.map(it => it.value)
     let columnShowData = this.treeData.filter(it => it.status).map(it => it.value)
     if (columnData.length < 1) {
       this.$message.info('请至少选择一项！')
       return false
     }
     await this.setInfo(this.fieldDictCode, columnShowData.join(';'))
     await this.setInfoSort(this.fieldDictCode, columnData.join(';'))
     await this._getDictInfo()
    }


  }
}
</script>

<style lang='less' scoped>
.showColumnsItem {
  width: 100%;
  ///deep/
  .divider {
    margin: 10px 0;
  }

  .footerBox {
    padding: 0 15px 5px;
    display: flex;
    justify-content: space-around;
  }
}
.draggableTree{
  max-height: 500px;
  overflow-y: auto;
}
</style>