<template>
  <div :style="itemStyles">
    <vuc-tree ref="xtree"
              :id-field="idField"
              :text-field="textField"
              :height="treeHeight"
              :show-checkbox="false"
              :show-toolbar="false"
              :slots="slots"
              :formatter="formatter"
              :showLoading="true"
              :is-free="isFree"
              :default-value="defaultValue"
              :expand="expand"
              :auto-resize="true"
              :start-filter="startFilter"
              :search-columns="searchColumns"
              :expandAfterDblClick="false"
              :showJunior="showJunior"
              @on-set-current-row="handleSetCurrentRow"
              @current-change="handleCurrentChange"
              @on-select="handleSelect"
              @on-select-change="handleSelectChange"
              @cell-mouseenter="handleCellMouseenter"
              @on-dblclick="handleDblClick"
              @on-dropdown-click="handleDropdownClick"></vuc-tree>
    <div ref="itemInfo"
         v-if="$slots.default"
         class="vuc-treecombox-item-info">

      <slot></slot>
    </div>
    <div v-if="$slots.toolbar"
         style="position:absolute;border-radius: 0 0 6px 6px;background:#f5f5f5;border-top:1px #ddd solid;bottom:0px;left:0;right:0;height:30px;height:30px;line-height:29px;">
      <slot name="toolbar"></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: 'VucTreecomboxItem',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    panelWidth: {
      type: [Number, String],
      default: () => 'auto'
    },
    panelHeight: {
      type: [Number, String],
      default: () => 200
    },
    idField: {
      type: String,
      default: 'id'
    },
    textField: {
      type: String,
      default: 'text'
    },
    slots: {
      type: Object,
      default: () => { }
    },
    formatter: Function,
    // 展开全部
    expand: {
      type: [Boolean, Number, String],
      default: false
    },
    isFree: {
      type: Boolean,
      default: false
    },
    // 默认值
    defaultValue: {
      type: [String, Number, Object],
      default: ''
    },
    // 搜索时左侧匹配
    startFilter: {
      type: Boolean,
      default: false
    },
    searchColumns: {
      type: Array,
      default: () => []
    },
    showJunior: { // 输入汉字显示下级
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      treeData: []
    }
  },
  inject: ['parent'],
  computed: {
    itemStyles() {
      let { panelWidth } = this
      return `padding-left:8px;min-width:${panelWidth - 24}px;padding-bottom:${this.$slots.toolbar ? 30 : 0}px;`
    },
    treeHeight() {
      let height = this.panelHeight - 20
      if (this.$slots.toolbar) {
        height = height - 30
      }
      return height
    }
  },
  methods: {
    handleSelect({ row, rowIndex }) {
      this.$emit('on-click', row)
    },
    handleSelectChange(params) {
      this.$emit('on-change', params ? params.row : null)
    },
    handleCellMouseenter({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, cell }, event) {
      // console.log(row, cell.getBoundingClientRect(), event, event.target.getBoundingClientRect())
      this.$emit('cell-mouseenter', { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, cell }, event)
    },
    handleCurrentChange({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, cell }, event) {
      this.$emit('current-change', { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, cell }, event)
    },
    handleSetCurrentRow({ row }) {
      this.$emit('on-set-current-row', { row })
    },
    handleDblClick({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, cell }) {
      this.$emit('on-dblclick', { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, cell })
    },
    handleDropdownClick (row) {
      this.$emit('on-dropdown-click', row)
    },
    toggleTreeExpand({ row, expand }) {
      this.$refs.xtree.toggleTreeExpand({ row, expand })
    },
    loadData(data) {
      this.treeData = data
      return this.$refs.xtree.loadData(data)
    },
    async doFilter(queryText) {
      const filterData = await this.$refs.xtree.doFilter(queryText)
      return filterData
    },
    setCurrentRow(row) {
      this.$refs.xtree.setCurrentRow(row)
    },
    getCurrentRow() {
      return this.$refs.xtree.getCurrentRow()
    },
    getVisibleData() {
      return this.$refs.xtree.getTableVisibleData()
    },
    async expandAll(expand) {
      this.$refs.xtree.expandAll(expand)
    },
    keyboard(keyCode) {
      // 37左38上39右40下
      this.$refs.xtree.keyboard(keyCode)
    }
  },
  mounted() {
    this.$nextTick(() => {

    })
  }
}
</script>

<style></style>
