<template>
  <div class="right-detail-toolbar">
    <el-row>
      <el-toolbar>
        <el-col :span="14">
          <el-button align="left" @click="getCatalogTreeInfos()"  priv="WordManage.Hot">
            <i class="fa fa-floppy-o"></i>保存
          </el-button>
        </el-col>
        <el-col :span="10" align="right">
          <el-select align="right" v-model="kindName" clearable placeholder="请选择热词分类" style="width:auto;" @change="kindSelectChange" @clear="kindClear">
            <el-option
              v-for="item in kindsOptions"
              :key="item.ID"
              :label="item.kinds"
              :value="item.ID">
            </el-option>
          </el-select>
        </el-col>
      </el-toolbar>
    </el-row>
      <div class="padding-top-bottom mini" v-loading="treeLoading">
        <el-checkbox-group v-model="catalogIDs">
          <el-tree
            :data="hotWordCatalogTrees"
            :render-content="renderContent"
            :expand-on-click-node="false"
            :props="defaultCatalogTrees"
            node-key="ID"
            :default-expand-all="true"
            :highlight-current="true"
            :check-strictly="true"
            ref="tree">
          </el-tree>
        </el-checkbox-group>
      </div>
  </div>
</template>

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

export default {
  data() {
    return {
      // 热词配置栏目树属性设置
      defaultCatalogTrees: {
        children: 'children',
        label: 'name'
      },
      // 热词配置栏目
      hotWordCatalogTrees: [],
      catalogIDs: [],
      treeLoading: false,
      kindsOptions: [],
      kindName: '',
      kindId: ''
    }
  },
  methods: {
    // 树节点点击事件
    handleNodeClick(event, val) {
      event.stopPropagation()
      if (!val.children || !val.children.length) {
        return
      }
      let keys = []
      const childrenNodeKeys = (node) => {
        if (!node.children || node.children.length === 0) {
          return
        }
        node.children.forEach((childrenNode) => {
          keys.push(childrenNode.ID)

          if (childrenNode.children && childrenNode.children.length) {
            childrenNodeKeys(childrenNode)
          }
        })
      }
      childrenNodeKeys(val)
      this.catalogIDs = this.catalogIDs.filter(id => {
        return ![...keys].includes(id)
      })
    },
    handleNodeCheckClick(val, data) {
      if (!data.children || data.children.length === 0) {
        return
      }
      const childrenNodeKeys = (tmp) => {
        if (!tmp.children || tmp.children.length === 0) {
          return
        }
        tmp.children.forEach((childrenNode) => {
          keys.push(childrenNode.ID)
          if (childrenNode.children && childrenNode.children.length) {
            childrenNodeKeys(childrenNode)
          }
        })
      }
      let keys = []
      childrenNodeKeys(data)
      if (val) { // 选中
        keys.forEach(id => {
          if (!this.catalogIDs.includes(id)) {
            this.catalogIDs.push(id)
          }
        })
      } else { // 未选中
        this.catalogIDs = this.catalogIDs.filter(id => {
          return ![...keys].includes(id)
        })
      }
    },
    renderContent: function(createElement, { node, data, store }) {
      if (parseInt(data.ID) === 0 || parseInt(data.branchInnerCode) === 0 || data.ID === 'site') {
        return createElement('span', [
          createElement(
            'el-checkbox',
            {
              props: {label: data.ID},
              'on': {
                change: (val) => this.handleNodeCheckClick(val, data)
              }
            }, [
              createElement(
                'i',
                { attrs: { class: 'fa fa-desktop' } }
              ),
              createElement('span', node.label)
            ]
          )
        ])
      } else {
        const buttonText = '取消子节点'
        let ele = null
        if (parseInt(node.data.ID) !== 0 && node.childNodes.length) {
          ele = createElement(
            'button',
            {
              attrs: {
                'class': 'el-button el-button--primary el-button--mini',
                'type': 'button'
              },
              'style': { 'margin-left': '20px' },
              'on': {
                click: (event) => this.handleNodeClick(event, data)
              }
            },
            [createElement('span', buttonText)]
          )
        }
        return createElement('span', [
          createElement(
            'el-checkbox',
            {
              props: {label: data.ID},
              'on': {
                change: (val) => this.handleNodeCheckClick(val, data)
              }
            }, [
              createElement(
                'i',
                { attrs: { class: 'fa fa-folder' } }
              ),
              createElement('span', node.label)
            ]
          ),
          ele
        ])
      }
    },
    // 热词配置保存时获取栏目信息
    async getCatalogTreeInfos() {
      if (!this.kindId) {
        this.$alert('请先选择热词分类', '提示', {
          type: 'info'
        })
        return
      }
      let res = await axios.put('/ui/hotwordkinds/hotsetsave', {
        catalogIDs: this.catalogIDs,
        kindID: this.kindId
      })
      util.showResponseMessage(res.data)
    },
    // 热词配置栏目树数据加载
    async hotWordCatalogTreeData() {
      this.catalogIDs = []
      this.treeLoading = true
      try {
        let res = await axios.get('/ui/hotwordkinds/bindeditortree', {
          params: { kindID: this.kindId }
        })
        this.hotWordCatalogTrees = res.data.data
        if (res.data.catalogIDs) {
          res.data.catalogIDs.split(',').forEach(id => {
            this.catalogIDs.push(parseInt(id, 10))
          })
        }
      } catch (e) {
      }
      this.treeLoading = false
    },

    // 热词分类下拉数据加载
    async hotWordKindsData() {
      let res = await axios.get('/ui/hotwordkinds/selecthotword')
      this.kindsOptions = res.data.data
    },
    // 选择热词分类触发事件
    kindSelectChange(val) {
      this.kindId = val
      this.hotWordCatalogTreeData()
    },
    kindClear() {
      this.kindName = ''
      this.kindId = ''
    }
  }
}
</script>
