<template>
  <el-container class="advance-query-form advance-query advance-box">
    <el-aside width="300px" style="background-color: white;">
      <el-card class="base-card" shadow="never"
        style="border: none; height: 100%;"
      >
        <div slot="header" class="base-card-header">
          <span class="header-title">{{treePanel.title}}</span>
          <div class="base-card-operation">
            <el-button class="advance-icon-btn" @click="refreshGroup()" style="width: 40px;height: 32px;padding: 0;">
              <img src="@/assets/img/refresh2.png" alt=""  style="vertical-align: middle;"/>
            </el-button>
            <el-button class="advance-icon-btn" v-if="treePanel.supportAdd" style="width: 40px;height: 32px;padding: 0;" @click="onEditGroupItem(null)">
              <!-- {{treePanel.addText}} -->
              <img src="@/assets/img/add.png" alt=""  style="vertical-align: middle;"/>
            </el-button>
          </div>
        </div>
        <el-scrollbar :style="{ height: height - 130 + 'px' }" class="custom-scroll">
          <el-tree ref="groupTree"
            :data="groupDataList"
            :node-key="treePanel.keyColumnName"
            @node-click="onNodeClick"
            :highlight-current="true"
            :default-expand-all="true"
            :auto-expand-parent="true"
            :expand-on-click-node="false"
          >
            <el-row class="tree-node-item module-node-item" type="flex" justify="space-between" align="middle" slot-scope="{ data }">
              <span class="node-text" :title="data[treePanel.nameColumnName]">{{data[treePanel.nameColumnName]}}</span>
              <div class="module-node-menu" style="padding-right: 9px;">
                <el-button v-if="treePanel.supportEdit"
                  type="text"
                  @click.stop="onEditGroupItem(data)"
                  icon="el-icon-edit-outline"
                ></el-button>
                <el-button v-if="treePanel.supportDelete"
                  type="text"
                  @click.stop="onDeleteGroupItem(data)"
                  icon="el-icon-delete"
                ></el-button>
              </div>
            </el-row>
          </el-tree>
        </el-scrollbar>
      </el-card>
    </el-aside>
    <el-main class="table-panel">
      <el-card class="base-card" shadow="never"
        :body-style="{ padding: '0px' }"
        style="border: none;"
      >
        <div slot="header" class="base-card-header">
          <span class="header-title">{{tablePanel.title}}</span>
          <div class="base-card-operation">
            <slot name="tableFilter" />
            <el-button v-if="tablePanel.supportAdd" type="primary"
              style="margin-left: 20px;"
              :size="defaultFormItemSize"
              icon="el-icon-plus"
              @click="onAddTableItem()"
            >{{tablePanel.addText}}</el-button>
          </div>
        </div>
        <div class="advance-table-box">
          <slot name="table" />
        </div>
      </el-card>
    </el-main>
    <slot />
  </el-container>
</template>

<script>
import { treeDataTranslate, findItemFromList } from '@/utils';

export default {
  name: 'formAdvanceQuery',
  props: {
    height: {
      type: Number
    },
    treePanel: {
      type: Object,
      required: true
    },
    tablePanel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      currentGroup: undefined,
      groupDataList: []
    }
  },
  methods: {
    loadGroupData () {
      if (typeof this.treePanel.loadFunction === 'function') {
        this.treePanel.loadFunction().then(dataList => {
          this.groupDataList = treeDataTranslate(dataList.map(item => {
            return {
              ...item
            }
          }), this.treePanel.keyColumnName);
          if (this.currentGroup != null) {
            this.currentGroup = findItemFromList(dataList, this.currentGroup[this.treePanel.keyColumnName], this.treePanel.keyColumnName);
          }
          if (this.currentGroup == null) this.currentGroup = dataList[0];
          setTimeout(() => {
            if (this.$refs.groupTree) this.$refs.groupTree.setCurrentKey(this.currentGroup[this.treePanel.keyColumnName]);
          }, 50);
        }).catch(e => {});
      }
    },
    refreshGroup () {
      this.loadGroupData();
    },
    onEditGroupItem (data) {
      this.$emit('editGroupItem', data);
    },
    onNodeClick (data) {
      this.currentGroup = data;
      this.$emit('refreshTable', this.currentGroup);
    },
    onDeleteGroupItem (data) {
      this.$emit('deleteGroupItem', data);
    },
    onAddTableItem () {
      this.$emit('addTableItem');
    }
  },
  watch: {
    currentGroup: {
      handler () {
        this.$emit('refreshTable', this.currentGroup);
      }
    }
  },
  mounted () {
    this.loadGroupData();
  }
}
</script>

<style scoped>
  .el-main{
    display: flex;
    flex-direction: column;
  }
  .table-panel {
    margin-left: 15px;
    background: white;
    padding: 0px;
  }
  .table-panel .base-card{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .advance-query >>> .el-card__body{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .advance-query >>> .el-tree-node__content {
    height: 35px;
  }

  .advance-query .tree-node-item {
    flex: 1;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
  }

  .advance-query .module-node-menu{
    text-align: right;
  }
  .advance-query .tree-node-item .node-text {
    overflow: hidden;
    flex: 1;
    max-width: 175px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .advance-table-box{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
</style>
