<template>
  <div>
    <!-- 栏目选择框 -->
    <el-dialog title="选择公共栏目" :visible.sync="isShow" @open="beforeDialogOpen" class="catalog-selector-dlg">
      <el-checkbox-group v-model="ids" @change="checkedChangHandler">
        <el-tree
          :render-content="renderContent"
          ref="tree"
          :data="commonSiteCatalogTree"
          v-loading="catalogtreeLoading"
          :default-expand-all="true"
          :highlight-current="true"
          :node-key="treeOptions.key"
          :expand-on-click-node="false"
          :props="treeOptions"
          class="padding-top-bottom mini">
        </el-tree>
      </el-checkbox-group>
      <!-- 底部确认按钮 -->
      <div slot="footer">
        <el-button type="primary" :disabled="noChild" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  data() {
    return {
      treeObject: {}, // 树对象
      catalogtreeLoading: true, // 树加载动画
      commonSiteCatalogTree: [], // 内容复制树的值
      treeOptions: {
        key: 'ID',
        label: 'name',
        children: 'children'
      }, // 树属性选项
      clientHeight: '',
      clientWidth: '',
      noChild: false,
      ids: [], // 选中栏目ID
      names: []// 选中栏目名称
    }
  },
  methods: {
    beforeDialogOpen() {
      this.names = []
      this.ids = this.checkedIds
      this.loadingCatalogTree()
      this.clientHeight = document.documentElement.clientHeight - 350
      this.clientWidth = document.documentElement.clientWidth - 250
    },
    checkedChangHandler(val) {
      this.ids = val
    },
    // 渲染树样式
    renderContent: function(createElement, { node, data, store }) {
      let color = ''
      if (node.data.disabled) {
        color = '#ACA899'
      }
      if (parseInt(data.ID) === 0 || parseInt(data.branchInnerCode) === 0 || data.ID === 'site') {
        return createElement('span', [
          createElement(
            'el-checkbox',
            {
              props: { label: data.ID, disabled: data.disabled }
            }, [
              createElement(
                'i',
                { attrs: { class: 'fa fa-desktop' } }
              ),
              createElement('span', { style: { color: color } }, node.label)
            ]
          )
        ])
      } else {
        return createElement('span', [
          createElement(
            'el-checkbox',
            {
              props: {
                label: data.ID,
                disabled: data.disabled
              }
            }, [
              createElement(
                'i',
                { attrs: { class: 'fa fa-folder' } }
              ),
              createElement('span', { style: { color: color } }, node.label)
            ]
          )
        ])
      }
    },
    async loadingCatalogTree() {
      this.catalogtreeLoading = true
      let res = await axios.get('/ui/catalogmapping/bindtree', {params: {contentType: this.contentType}})
      this.catalogtreeLoading = false
      if (!res.data.data[0].children || !res.data.data[0].children.length) {
        this.noChild = true
      } else {
        this.commonSiteCatalogTree = res.data.data
      }
    },
    // 确认按钮点击事件
    confirm() {
      if (this.ids.length === 0) {
        this.$alert('请选择需要复制到的栏目', '提示', {
          type: 'info',
          confirmButtonText: '确定'
        })
        return
      }
      this.ids.forEach(el => {
        let node = util.findTreeNode(
          this.commonSiteCatalogTree[0].children,
          'ID',
          el,
          'children'
        )
        if (node) {
          this.names.push(node.name)
        }
      })
      this.$emit('callback', {
        ids: this.ids.join(),
        names: this.names.join()
      })
      this.$emit('update:show', false)
    }
  },
  props: {
    contentType: String,
    inputType: Boolean,
    checkedIds: Array,
    title: String,
    show: Boolean
  }
}
</script>

<style scoped>

</style>
