<template>
  <div class="catalog-selector-body">
    <dim-select :dim-info="{'enable':true}" @callback="callback"></dim-select>
    <el-radio-group v-model="radioID" style="width:100%;">
      <el-tree
        :default-checked-keys="checkedIds"
        :show-checkbox="selectType === 'radio' ? false : true"
        :render-content="renderContent"
        ref="catalogTree"
        :data="copyContentTree"
        v-loading="catalogTreeLoading"
        :default-expand-all="true"
        :highlight-current="true"
        :node-key="treeOptions.key"
        :expand-on-click-node="false"
        :props="treeOptions"
        check-strictly
        @node-click="treeNodeClick"
        class="catalog-tree">
      </el-tree>
    </el-radio-group>
  </div>
</template>
<script>
import DimSelect from '@src/components/DimSelect.vue'
export default {
  components: {
    'dim-select': DimSelect
  },
  data() {
    return {
      treeObject: {}, // 树对象
      catalogTreeLoading: true, // 树加载动画
      copyContentTree: [], // 内容复制树的值
      treeOptions: { key: 'ID', label: 'name', children: 'children' }, // 树属性选项
      tmpNode: {},
      radioID: null
    }
  },
  props: {
    contentType: {
      default: ''
    },
    selectType: {
      default: 'radio'
    },
    checkedIds: {
      default: () => {
        return []
      }
    },
    catalogId: {
      type: [Number, String],
      default: ''
    },
    resourceDialogProps: {
      default: () => {
        return {insertEditor: false}
      }
    }
  },
  methods: {
    callback(val) {
      this.copyContentTree = val
      this.catalogTreeLoading = false
    },
    // 渲染树样式
    renderContent: function (createElement, { node, data, store }) {
      if (this.selectType === 'radio') { // 单选按钮渲染
        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 {
          let disabled = false
          if (data.ID === parseInt(this.catalogId)) {
            disabled = true
          }
          return createElement('span', [
            createElement('el-radio', {
              props: { label: data.ID, disabled: disabled }
            }, '.'
            ),
            createElement('i', { attrs: { class: 'fa fa-folder' } }),
            createElement('span', node.label)
          ])
        }
      } else { // 复选框渲染
        let color = ''
        if (node.data.disabled) {
          color = '#ACA899'
        }
        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('i', { attrs: { class: 'fa fa-folder' } }),
            createElement('span', { style: { color: color } }, node.label)
          ])
        }
      }
    },
    // 弹框打开回调
    async init() {
    },
    /* 单选按钮点击时触发 */
    treeNodeClick(node) {
      if (this.selectType === 'radio') {
        this.radioID = node.ID
        this.tmpNode = node
      }
    },
    // 确认按钮点击事件
    confirm() {
      // console.log('-----确认')
      if (this.selectType === 'radio') { // 单选按钮处理
        if (!this.radioID) {
          return
        }
        return this.tmpNode
      } else {
        let datas = this.$refs.catalogTree.getCheckedNodes()
        if (datas.length === 0) {
          return
        }
        let html = '&nbsp;'
        let names = []
        let ids = []
        datas.forEach(row => {
          html += '<a href="' + row.link + '"+ target="_blank">' + row.name + '</a>&nbsp;'
          names.push(row.name)
          ids.push(row.ID)
        })
        if (this.resourceDialogProps.insertEditor) {
          try {
            window.editor.execCommand('insertHTML', html)
            window.dialog.close(false)
          } catch (e) {

          }
        }
        return { ids: ids.join(), names: names.join() }
      }
    }
  }
}
</script>
<style>
  .catalog-selector-body .el-radio__label {
    display: none;
  }
  .catalog-selector-body .el-radio__input {
    padding-right: 10px;
  }
</style>
<style scoped>
  .catalog-tree {
    height: 100%;
    width: 100%;
    overflow: auto;
    font-size:14px;
  }
  .catalog-selector-body {
    height: 400px;
    width: 100%;
    /* border: 1px solid #eee; */
  }
</style>
