<template>
  <el-button @click="clickHandler" :disabled="disabled||!catalogId" :type="buttonType" :priv="'com.zving.cms.Catalog.Merge.'+catalogId">
    <i class="fa fa-refresh"></i>栏目合并
    <el-dialog title="选择要合并进来的栏目" :append-to-body="true" :visible.sync="isShowModal" class="catalo-merge-select-dlg">
      <div v-loading="treeLoading">
        <el-tree
          :data="catalogTree"
          :render-content="renderContent"
          :expand-on-click-node="false"
          :props="defaultProps"
          node-key="ID"
          class="padding-top-bottom mini"
          :default-expand-all="true"
          :highlight-current="true"
          @node-click="handleNodeClick">
        </el-tree>
      </div>
      <div slot="footer">
        <el-button @click="isShowModal = false">取 消</el-button>
        <el-button type="primary" v-loading="submitLoading" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </el-button>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    catalogId: {
      type: [Number, String],
      default: 0,
      required: true
    },
    contentType: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    type: {
      type: String,
      default: 'Default',
      required: true
    },
    buttonType: {
      type: String,
      default: ''
    },
    dimensionId: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      isShowModal: false,
      submitLoading: false,
      treeLoading: false,
      catalogTree: [], //  树节点数据
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      currentTreeNode: {} //  当前选中节点
    }
  },
  methods: {
    // 树节点渲染
    renderContent: function(createElement, { node, data, store }) {
      let ele = null
      let color = ''
      if (node.data.chkDisabled) {
        color = '#ACA899'
      }
      let icon = 'fa fa-folder'
      if (parseInt(node.data.ID) === 0) {
        icon = 'fa fa-desktop'
      }
      if (parseInt(node.data.ID) !== 0) {
        ele = createElement(
          'el-radio',
          {
            props: {
              label: node.data.ID,
              disabled: node.data.chkDisabled,
              value: this.currentTreeNode.ID,
              type: 'radio'
            }
          },
          ''
        )
        let ele2 = createElement('span', [
          createElement('i', { attrs: { class: icon } }),
          createElement('span', { style: { color: color } }, node.label)
        ])
        return createElement('span', [ele, ele2])
      } else {
        return createElement('span', [
          createElement('i', { attrs: { class: icon } }),
          createElement('span', { style: { color: color } }, node.label)
        ])
      }
    },
    handleNodeClick(row) {
      if (row.chkDisabled) {
        return
      }
      this.currentTreeNode = row
    },
    clickHandler() {
      this.catalogTree = []
      this.currentTreeNode = {}
      this.isShowModal = true
      this.submitLoading = false
      this.loadCatalogTree()
    },
    async confirm() {
      if (!this.catalogId) {
        util.showResponseMessage({message: '请选择需要进行合并的栏目'})
        return
      }
      let ID = this.currentTreeNode.ID
      let isLeaf = this.currentTreeNode.isLeaf
      if (!ID) {
        util.showResponseMessage({message: '请选择被合并的栏目'})
        return
      }
      if (ID === this.catalogId) {
        util.showResponseMessage({message: '不能将栏目合并到当前栏目'})
        return
      }
      if (!isLeaf) {
        util.showResponseMessage({message: '只能将叶子节点栏目合并到本栏目'})
        return
      }
      this.submitLoading = true
      try {
        let res = await axios.put('/ui/catalogs/merge', {
          catalogID: this.catalogId,
          mergeCatalogID: ID
        })
        this.submitLoading = false
        if (res.data.status === 1) {
          this.isShowModal = false
          this.$emit('callback', res.data.taskID)
        } else {
          util.showResponseMessage(res.data)
        }
      } catch (e) {
        this.submitLoading = false
        // util.showErrorNotification(e)
      }
    },
    // 加载dialog栏目树
    async loadCatalogTree() {
      this.treeLoading = true
      let params = {
        catalogID: this.catalogId,
        contentType: this.contentType,
        type: this.type,
        dimensionID: this.dimensionId
      }
      let res = await axios.get('/ui/catalog/bindmergecatalogtree', {
        params: params
      })
      this.treeLoading = false
      this.catalogTree = res.data.data
    }
  }
}
</script>
<style>
.catalo-merge-select-dlg .el-dialog{
  width:400px;
}
@media (max-width: 480px) {
  .catalo-merge-select-dlg .el-dialog{
    width:96%;
  }
}
</style>
