<template>
  <div>
    <el-toolbar>
      <el-button @click="saveIndexConfigClickHandler" v-loading="submitLoading">
        <i class="fa fa-floppy-o"></i>保存
      </el-button>
      <div class="indexes-setting-hint">
        选择<span class="red-font">不开放</span> 前台检索的栏目。
      </div>
    </el-toolbar>
    <div class="padding-top-bottom mini" v-loading="treeLoading">
      <el-checkbox-group v-model="checkedIDs">
        <el-tree
          :data="editorTree"
          :render-content="renderContent"
          :expand-on-click-node="false"
          :props="defaultProps"
          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 {
  props: {
    tabName: String
  },
  data() {
    return {
      submitLoading: false,
      editorTree: [], //  索引设置的栏目树
      treeLoading: false,
      checkedIDs: [], //   已选中的索引设置
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
    tabName(val) {
      if (val === 'config') {
        this.checkedIDs = []
        this.editorTree = []
        this.loadEditorTree()
      }
    }
  },
  methods: {
    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.checkedIDs.includes(id)) {
            this.checkedIDs.push(id)
          }
        })
      } else { // 未选中
        this.checkedIDs = this.checkedIDs.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 saveIndexConfigClickHandler() {
      let catalogids = this.checkedIDs.join()
      // if (!catalogids) {
      //    this.$emit('dialog' '请至少选择一个栏目')
      //   return
      // }
      this.submitLoading = true
      try {
        let res = await axios.put(`/ui/indexconfig/${catalogids}`)
        this.submitLoading = false
        util.showMessage(res)
      } catch (e) {
        this.submitLoading = false
        util.showErrorNotification(e)
      }
    },
    // 加载索引设置栏目
    async loadEditorTree() {
      this.treeLoading = true
      let res = await axios.get('/ui/indexconfig')
      this.treeLoading = false
      this.editorTree = res.data.data.editorTree
      this.checkedIDs = res.data.data.checkedIDs
    },
    // 树节点点击事件
    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.checkedIDs = this.checkedIDs.filter(id => {
        return ![...keys].includes(id)
      })
    }
  }
}
</script>

<style scoped>
.indexes-setting-hint {
  position: absolute;
  right: 0;
  white-space: nowrap;
}
.red-font {
  color: red;
}
</style>
