/**
*  @Author      LiuShaolong
*  @Description 列设置
*  @CreateDate  2020/1/9
*/
<template>
  <el-card style="height: 100%;" body-style="height: calc(100% - 60px); overflow-y: auto; padding: 0 10px;">
    <div slot="header">
      <span>列设置</span>
      <i style="float: right; padding: 3px 0 3px 15px; cursor: pointer;" class="el-icon-close"
         @click="$emit('close')"></i>
      <el-button style="float: right; padding: 3px 10px; margin: 0;" type="primary" icon="el-icon-setting" @click="saveColumns">
        保存
      </el-button>
    </div>
    <el-tree
        ref="tree"
        v-loading="treeLoading"
        :data="treeData"
        node-key="dataKey"
        default-expand-all
        :default-checked-keys="defaultCheckedKeys"
        show-checkbox
        draggable
        @check="getCheckedNodes"
        @node-drag-end="handleDragEnd"
        :allow-drop="allowDrop">
          <span class="custom-tree-node" slot-scope="{ node }">
            <span>{{ node.label }}</span>
            <span v-if="node.checked">
              <span style="color: #409EFF;">{{ sortOrder(node) > 0 ? sortOrder(node) : '' }}</span>
              <span class="iconfont iconpaixu-sheng" :style="sortStyle(node, 'asc')"
                    @click="(e) => sortClick(e, node, 'asc')"></span>
              <span class="iconfont iconpaixu-jiang" :style="sortStyle(node, 'desc')"
                    @click="(e) => sortClick(e, node, 'desc')"></span>
            </span>
          </span>
    </el-tree>
  </el-card>
</template>
<script>
  import {WebpageDataService} from "../../../assets/webpage";

  export default {
    name: 'ColumnSetting',
    components: {},
    props: ['show', 'type'],
    data() {
      return {
        treeLoading: false,
        treeData: [],
        defaultCheckedKeys: [],
        sortedColumns: []
      }
    },
    created() {
    },
    mounted() {
    },
    watch: {
      show: {
        handler: function (nv) {
          if (nv && this.type) {
            this.findTableColumns();
          }
        },
        immediate: true
      }
    },
    computed: {},
    methods: {
      findTableColumns() {
        this.treeLoading = true;
        WebpageDataService.webpage_data_columns({businessType: this.type}, (res) => {
          this.defaultCheckedKeys = _.map(res.content.filter(data => data.enabled), 'dataKey');
          this.sortedColumns = _.orderBy(res.content.filter(data => data.sortType), ['sortPriority'], ['asc']);
          this.treeData = res.content;
          this.treeLoading = false;
        })
      },
      getCheckedNodes(node, {checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys}) {
        let index = _.findIndex(this.sortedColumns, item => {
          return item.id === node.id;
        });
        if (!_.includes(checkedNodes, node) && index !== -1) {
          this.sortedColumns.splice(index, 1);
        }
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        let tree = this.$refs['tree'];
        let checkedKeys = tree.getCheckedKeys();
        if (draggingNode.checked) {
          checkedKeys.push(draggingNode.key);
        }
        tree.setCheckedKeys(checkedKeys);
      },
      allowDrop(draggingNode, dropNode, type) {
        return draggingNode.parent.key === dropNode.parent.key && type !== 'inner';
      },
      saveColumns() {
        let tree = this.$refs['tree'];
        let jsonData = tree.data;
        let selectedKeys = tree.getCheckedKeys();
        jsonData.forEach(data => {
          let sortedColumn = _.find(this.sortedColumns, item => {
            return item.id === data.id;
          });
          if (sortedColumn) {
            data.sortPriority = this.sortedColumns.indexOf(sortedColumn);
            data.sortType = sortedColumn.sortType;
          } else {
            data.sortPriority = null;
            data.sortType = null;
          }
          data.enabled = _.includes(selectedKeys, data.dataKey)
        });
        this.$emit('save', jsonData);
      },
      sortOrder(node) {
        return _.findIndex(this.sortedColumns, item => {
          return item.id === node.data.id;
        }) + 1;
      },
      sortStyle(node, type) {
        let sortedColumn = _.find(this.sortedColumns, item => {
          return item.id === node.data.id && item.sortType === type;
        });
        return 'color: ' + (sortedColumn ? '#409EFF' : '');
      },
      sortClick(e, node, type) {
        let sortedColumn = _.find(this.sortedColumns, item => {
          return item.id === node.data.id;
        });
        if (this.sortedColumns.length === 3 && !sortedColumn) {
          this.sortedColumns.splice(0, 1);
        }
        if (sortedColumn) {
          this.sortedColumns.splice(this.sortedColumns.indexOf(sortedColumn), 1);
          if (sortedColumn.sortType === type) {
            return;
          }
        }
        this.sortedColumns.push({
          id: node.data.id, sortType: type
        });
      },
    },
  }
</script>
<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>