<style lang="less" scoped>
.modal {
  background: #f5f7f9;
  width: 100%;
  height: 430px;
  // height: 550px;
  overflow: hidden;
  &-left {
    float: left;
    top: 0;
    width: 220px;
    height: 100%;
    background: white;
  }
  &-right {
    float: left;
    top: 0;
    margin-left: 5px;
    width: calc(~'100% - 225px');
    height: 100%;
    background: white;
  }
}
</style>
<template>
  <div class="dept-person-div">
    <Modal
      v-model="visible"
      :title="title"
      :width="modalWidth"
      @on-ok="onOk"
      @on-cancel="onCancel"
    >
      <div class="modal" :style="{height: modalHeight}">
        <div class="modal-left">
          <Tree
            ref="_tree"
            style="width:100%; height: 100%"
            :table-name="tableName"
            :primaryKey="treeKey"
            :authType="authType"
            :versionDate="versionDate"
            :groupTableName="groupTableName"
            :treeTableName="treeTableName"
            :filterList="filterList"
            :structtype="structtype"
            :filterFormular="filterFormular"
            :filterFormularSP="filterFormularSP"
            :billdefineName="billdefineName"
            :billId="billId"
            :bill="bill"
            :isFilter="isFilter"
            :rowIndex="rowIndex"
            @on-select="onTreeSelected"
            @init-tree="onInitTree"
          />
        </div>
        <div class="modal-right">
          <SelectTable
            ref="_view"
            :treeNode="currTreeNode"
            :value="selection"
            :table-name="tableName"
            :primaryKey="tableKey"
            :treeKey="treeKey"
            :tableColumns="tableColumns"
            :searchPlaceholder="searchPlaceholder"
            :multiple="multiple"
            :authType="authType"
            :versionDate="versionDate"
            :isLeaf="isLeaf"
            :structtype="structtype"
            :groupTableName="groupTableName"
            :treeDataMap="treeDataMap"
            :groupFieldName="groupFieldName"
            :hideSelected="hideSelected"
            :filterFormular="filterFormular"
            :filterFormularSP="filterFormularSP"
            :billdefineName="billdefineName"
            :billId="billId"
            :bill="bill"
            :isFilter="isFilter"
            :rowIndex="rowIndex"
            @init-list="onInitList"
          />
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tree from './tree.vue'
import SelectTable from './select-table.vue'
import baseDataMixin from '../util/baseDataMixin'

export default {
  mixins: [baseDataMixin],
  components: { Tree, SelectTable },
  props: {
    value: {
      type: Boolean,
      required: true,
    },
    selection: {
      type: Array,
      default: () => [],
    },
    tableColumns: {
      type: Array,
      require: true,
    }
  },
  computed: {
    visible: {
      set: function (val) {
        this.$emit('input', val)
      },
      get: function () {
        return this.value
      },
    },
  },
  data() {
    return {
      currTreeNode: null,
      treeDataMap: {},
      groupFieldName: '',
      modalHeight: '430px',
      filterList: []
    }
  },
  mounted() {
    this.getModalHeight()
    window.onresize = () => {
      this.getModalHeight()
    }
  },
  methods: {
    getModalHeight() {
      let viewport = window.innerHeight
      if (viewport <= 600 && viewport >= 400) {
        this.modalHeight = Math.floor(viewport/2) + 'px'
      } else if (viewport < 400) {
        this.modalHeight = '200px'
      } else {
        this.modalHeight = '430px'
      }
    },
    onOk() {
      let result = this.$refs._view.save()
      this.visible = false
      this.$emit('on-ok', result)
    },
    onCancel() {
      this.visible = false
      this.$emit('on-cancel')
    },
    onTreeSelected(id, item) {
      this.currTreeNode = item
    },
    onInitTree(treeDataMap, groupFieldName) {
      this.treeDataMap = JSON.parse(JSON.stringify(treeDataMap))
      this.groupFieldName = groupFieldName
    },
    onInitList(filterList) {
      if(this.filterList.length === 0) {
        this.filterList = JSON.parse(JSON.stringify(filterList))
      }
    }
  },
}
</script>