<template>
  <div class="link-picker-catalog" v-loading="catalogTree.length === 0">
    <div class="filter-searchbar">
      <el-input v-model="filterCatalogName" placeholder="请输入栏目名称" prefix-icon="el-icon-search"></el-input>
    </div>
    <div class="catalog-tree-wrap">
      <el-radio-group v-model="tmpNode.ID">
        <el-tree :render-content="renderContent" ref="catalogTree" :data="copyContentTree" :default-expand-all="true" :highlight-current="true"
          :node-key="treeOptions.key" :filter-node-method="filterNode" :expand-on-click-node="false" :props="treeOptions" check-strictly @node-click="treeNodeClick"
          :show-checkbox="false" class="catalog-tree">
        </el-tree>
      </el-radio-group>
    </div>

  </div>
</template>
<script>

export default {
  props: ['catalogTree'],
  computed: {
    copyContentTree() {
      return _.clone(this.catalogTree)
    }
  },
  data() {
    return {
      moduleName: '选择栏目',
      filterCatalogName: '',
      treeOptions: {
        key: 'ID',
        label: 'name',
        children: 'children'
      },
      tmpNode: {}
    }
  },
  watch: {
    filterCatalogName (val) {
      this.$refs.catalogTree.filter(val)
    }
  },
  methods: {
    renderContent: function (createElement, {
      node,
      data,
      store
    }) {
      if (parseInt(data.ID) === 0 || parseInt(data.branchInnerCode) === 0 || data.ID === 'site') {
        return createElement('span', [
          createElement('i', {
            attrs: {
              class: 'fa fa-desktop'
            }
          }),
          createElement('span', node.label)
        ])
      } else {
        return createElement('span', [
          createElement('el-radio', {
            props: {
              label: data.ID
            }
          }, ''),
          createElement('i', {
            attrs: {
              class: 'fa fa-folder'
            }
          }),
          createElement('span', node.label)
        ])
      }
    },
    treeNodeClick(node) {
      this.tmpNode = node
    },
    filterNode (value, data) {
      if (!value) return true
      value = value.toLowerCase()
      let name = data[this.treeOptions.label].toLowerCase()
      return (
        name.indexOf(value) !== -1 ||
        window.util.getSpell(name, true).indexOf(value) !== -1
      )
    },
    getValue() {
      if (_.isEmpty(this.tmpNode) || this.tmpNode.ID === 0) {
        return null
      } else {
        return {
          CLink: this.tmpNode.link,
          CName: '栏目:' + this.tmpNode.name
        }
      }
    }
  }
}

</script>
<style>
  .link-picker-catalog .filter-searchbar {
    background-color: #f5f5f5;
    color: #444;
    padding:7px 10px;
  }
  .link-picker-catalog .catalog-tree-wrap{height:360px;overflow-y: auto;}
  .link-picker-catalog .catalog-tree-wrap .el-radio-group{font-size:13px;}
</style>
