<template>
  <el-card style="height: 100%;" body-style="height: calc(100% - 50px); overflow-y: auto; padding: 0 10px;">
    <div slot="header">
      <span>列选择</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="$emit('close')">隐藏</el-button>
    </div>
    <el-tree
        ref="tree"
        v-loading="treeLoading"
        :data="treeData"
        node-key="key"
        default-expand-all
        :default-checked-keys="defaultCheckedKeys"
        show-checkbox
        draggable
        @node-drag-end="handleDragEnd"
        @check="getCheckedNodes"
        :allow-drop="allowDrop">
    </el-tree>
  </el-card>
</template>
<script>
  import {WebpageDataService} from "../../../assets/webpage";

  export default {
    name: 'ColumnSelect',
    components: {},
    props: ['buttonCode'],
    inject: {
      pageData: {
        type: Function, default: () => {
          return () => {
            return {selection: [], params: {}, button: {}}
          }
        }
      }
    },
    data() {
      return {
        treeLoading: false,
        treeData: [],
        defaultCheckedKeys: []
      }
    },
    created() {
    },
    mounted() {
    },
    watch: {
      buttonCode: {
        handler: function (nv) {
          if (nv) {
            this.findTableColumns(nv);
          }
        },
        immediate: true
      }
    },
    computed: {},
    methods: {
      findTableColumns(buttonCode) {
        this.treeLoading = true;
        WebpageDataService.webpage_data_columns({buttonCode: buttonCode}, (res) => {
          this.defaultCheckedKeys = _.map(res.content.filter(data => data.selected), 'key');
          this.treeData = res.content;
          this.treeLoading = false;
        })
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        let tree = this.$refs['tree'];
        let checkedKeys = tree.getCheckedKeys();
        if (draggingNode.checked) {
          checkedKeys.push(draggingNode.key);
        }
        tree.setCheckedKeys(checkedKeys);
        this.getCheckedNodes(draggingNode, {
          checkedKeys: tree.getCheckedKeys()
        });
      },
      allowDrop(draggingNode, dropNode, type) {
        return draggingNode.parent.key === dropNode.parent.key && type !== 'inner';
      },
      getCheckedNodes(node, {checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys}) {
        let tree = this.$refs['tree'];
        if (node.parentKey && node.required && checkedKeys.indexOf(node.key) === -1) {
          let parentNode = _.find(this.treeData, item => {
            return item.key === node.parentKey;
          });
          parentNode.children.forEach(i => {
            if (checkedKeys.indexOf(i.key) !== -1) {
              tree.setChecked(i.key, false);
              checkedKeys.splice(checkedKeys.indexOf(i.key), 1);
            }
          });
        }
        if (node.parentKey && !node.required && checkedKeys.indexOf(node.key) !== -1) {
          let parentNode = _.find(this.treeData, item => {
            return item.key === node.parentKey;
          });
          parentNode.children.forEach(i => {
            if (i.required) {
              tree.setChecked(i.key, true);
              checkedKeys.push(i.key);
            }
          });
        }
        let columns = [];
        tree.getCheckedKeys().forEach(key => {
          if (!key.endsWith('_')) {
            columns.push(key);
          }
        });
        this.$emit('change', columns);
      },
    },
  }
</script>
<style scoped lang="scss">
</style>
