<template>
  <div>
    <el-dialog title="选择栏目" :visible.sync="isShow" class="dim-catalog-selector" @open="beforeDialogOpen">
      <el-toolbar>
        <el-input :style="{width:'50%'}" placeholder="搜索关键字" @keyup.enter.native="dimensionTreeFilter" v-model="search"></el-input>
        <el-button type='primary' @click="dimensionTreeFilter">搜 索</el-button>
      </el-toolbar>
      <div class="padding-top-bottom mini">
        <el-tree
          v-loading="treeLoading"
          show-checkbox
          check-strictly
          :data="tree"
          :render-content="renderContent"
          :props="defaultProps"
          :expand-on-click-node="false"
          node-key="ID"
          :filter-node-method="filterNode"
          :default-expand-all="true"
          :highlight-current="true"
          :default-checked-keys="checkedIds"
          ref="tree">
        </el-tree>
      </div>
      <div slot="footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button type="primary" @click="comfirm">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {show: Boolean, ID: [Number, String], checkedIds: [Array]},
  data() {
    return {
      tree: [],
      defaultProps: {
        //  树节点默认配置
        children: 'children',
        label: 'name'
      },
      search: '',
      clientHeight: '',
      clientWidth: '',
      treeLoading: false
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    // 树节点渲染
    renderContent: function(createElement, { node, data, store }) {
      let params = {
        h: createElement,
        treeObj: { node, data, store },
        status: true
      }
      return util.renderTreeContent(params)
    },
    dimensionTreeFilter() {
      this.$refs.tree.filter(this.search)
    },
    // 树节点过滤
    filterNode(value, data) {
      if (!value) {
        return true
      }
      if (!data.name) {
        return false
      }
      return data.name.indexOf(value) !== -1
    },
    beforeDialogOpen() {
      this.clientHeight = document.documentElement.clientHeight - 350
      this.clientWidth = document.documentElement.clientWidth - 250
      this.loadDimensionCatalog()
    },
    comfirm() {
      let nodes = this.$refs.tree.getCheckedNodes()
      let names = []

      let ids = []

      let result = ''
      if (nodes.length) {
        nodes.forEach(element => {
          names.push(element.name)
          ids.push(element.ID)
        })
        result = ids.join() + '&&' + names.join()
      } else {
        result = ''
      }
      this.$emit('callback', result)
      this.$emit('update:show', false)
    },
    async loadDimensionCatalog() {
      this.treeLoading = true
      let res = await axios.get(`/ui/dimensions/${this.ID}/catalogs`)
      this.tree = res.data.data
      this.treeLoading = false
    }
  }
}
</script>
<style>
.dim-catalog-selector .el-dialog{
  width:400px;
}
@media (max-width:460px){
  .dim-catalog-selector .el-dialog{
    width:96%;
  }
}
</style>
