<template>
  <div class="select-wrap" @click.stop="wrapClickHandler">
    <el-input :value="inputValue"
              :placeholder="placeholder"
              :readonly="true"
              :disabled="disabled"
              :icon="isOpenTree ? 'caret-top' : 'caret-bottom'"
              @click.stop="wrapClickHandler">
    </el-input>
    <div class="tree-wrap el-scrollbar"  v-show="isOpenTree" >
      <el-tree class="el-scrollbar__wrap" :data="treeItems"
              :node-key="itemsOptions.key"
              :current-node-key="currentNodeKey"
              :props="itemsOptions"
              :default-expand-all="true"
              :expand-on-click-node="false"
              :highlight-current="true"
              :render-content="renderContent"
              @node-click="treeNodeClickHandler"
              v-loading="loading">
      </el-tree>
      <div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div></div>
      <div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="transform: translateY(0%); height: 85.6667%;"></div></div>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'

export default {
  data() {
    return {
      isOpenTree: false, // 是否展开
      loading: false, // 数据加载状态
      siteName: '',
      treeItems: []
    }
  },
  methods: {
    // 渲染树节点的展示内容
    renderContent: function(createElement, { node, data, store }) {
      let params = {
        h: createElement,
        treeObj: { node, data, store }
      }
      return util.renderTreeContent(params)
    },

    // 点击监听
    inputClickHandler() {
    // console.log(this.isOpenTree)
      if (this.disabled) {
        return
      }
      this.isOpenTree = !this.isOpenTree
    // console.log(this.isOpenTree)
    },

    // 点击监听
    wrapClickHandler() {
      if (this.disabled) {
        return
      }
      this.isOpenTree = !this.isOpenTree
    },

    // 树节点点击事件
    treeNodeClickHandler(data) {
    // console.log(data)
      let val = {}
      if (data[this.itemsOptions.key] !== 'site') {
        val = Object.assign({}, data)
      }
      this.$emit('input', val)
      this.$emit('node-click')
      this.isOpenTree = false
    },

    // 加载数据
    async loadData() {
      this.loading = true
      let params = {
        siteID: this.siteID,
        parentID: this.parentID,
        contentType: this.contentType,
        level: this.level,
        type: this.type
      }
      let res = await axios.get(`/ui/articleinputnewword/catalogtree`, {
        params: params
      })
      this.loading = false
      if (res.data.status === 1) {
        this.treeItems = util.toCatalogTreeJson(res.data.data)
        res.data.siteName &&
          this.treeItems.unshift({ ID: 'site', name: res.data.siteName })
        this.siteName = res.data.siteName
      // console.log(this.treeItems)
      }
    }
  },
  computed: {
    inputValue() {
      if (
        !this.value ||
        !this.itemsOptions ||
        !this.itemsOptions.label ||
        this.value[this.itemsOptions.key] === 'site'
      ) {
        return ''
      }
      return this.value[this.itemsOptions.label] || ''
    },
    currentNodeKey() {
      if (
        !this.value ||
        !this.itemsOptions ||
        !this.itemsOptions.key ||
        this.value[this.itemsOptions.key] === 'site'
      ) {
        return ''
      }
      return this.value[this.itemsOptions.key] || ''
    }
  },
  props: {
    value: {
      type: Object,
      default: function() {
        return {}
      }
    }, // 值
    placeholder: [String, Number],
    disabled: [String, Boolean], // 是否禁用
    contentType: String, // 内容类型
    type: {
      type: String,
      default: 'Default'
    }, // 栏目类型
    patentID: [String, Number], // 父节点id
    siteID: [String, Number], // 站点id
    level: [String, Number], // 级别
    items: {
      type: Array,
      default: function() {
        return []
      }
    }, // 树形下拉框数据
    itemsOptions: {
      type: Object,
      default: function() {
        return {
          children: 'children',
          label: 'name',
          key: 'ID'
        }
      }
    } // 树形下拉框配置信息
  },
  mounted() {
    let that = this
    document.addEventListener(
      'click',
      () => {
        that.isOpenTree = false
      },
      false
    )
    util.isEmptyObject(that.items) !== true
      ? (this.treeItems = that.items)
      : that.loadData()
  },
  created() {},
  watch: {
    siteID: 'loadData',
    contentType: 'loadData'
  }
}
</script>

<style scoped>
.select-wrap {
  position: relative;
  cursor: pointer;
}
.select-wrap input[type='text'] {
  cursor: pointer;
}
.select-wrap .tree-wrap {
  position: absolute;
  z-index: 10000;
  top: 42px;
  left: 1px;
  right: 1px;
  background-color: #fff;
  border: 1px solid #d1dbe5;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.select-wrap .tree-wrap .el-scrollbar__wrap {
  max-height: 271px;
  margin-bottom: -17px;
  margin-right: -17px;
}
.el-tree.el-tree--highlight-current {
  overflow: scroll;
  width: auto;
}
</style>
