<template>
  <el-button :disabled="disabled" :type="buttonType" @click.stop="moveClickHandler" title="转移" :priv="'com.zving.cms.Catalog.Move.'+catalogId"  class="table-operate-icon">
    <i class="fa fa-share f16"></i>转移
    <el-dialog title="选择转移栏目" :append-to-body="true" class="dim-catalog-move-dlg" :visible.sync="isShowModal">
        <div class="padding-top-bottom mini" v-loading="treeLoading">
          <el-tree
            :data="moveTreeList"
            :render-content="renderContent"
            :props="defaultProps"
            class="padding-top-bottom mini"
            node-key="ID"
            :default-expand-all="true"
            :highlight-current="true"
            :expand-on-click-node="false"
            @node-click="nodeClickHandler">
          </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,
      default: 0,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    innerCode: {
      type: String,
      default: '0',
      required: false
    },
    buttonType: {
      type: String,
      default: ''
    },
    dimensionId: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      isShowModal: false,
      treeLoading: false,
      moveTreeList: [], //  栏目树
      defaultProps: {
        //  树节点默认配置
        children: 'children',
        label: 'name'
      },
      currentNode: {}, //  当前选中节点
      submitLoading: false
    }
  },
  methods: {
    moveClickHandler() {
      this.isShowModal = true
      this.loadCatalogTree()
      this.submitLoading = false
    },
    // 树节点渲染
    renderContent: function(createElement, { node, data, store }) {
      let params = {
        h: createElement,
        treeObj: { node, data, store },
        status: true,
        ID: this.catalogId,
        innerCode: this.innerCode
      }
      return util.renderTreeContent(params)
    },
    // 栏目移动点击事件
    async confirm() {
      if (!this.currentNode.ID && !this.currentNode.innerCode) {
        this.dialog('请选择栏目')
        return
      }
      let isRoot = false
      if (this.currentNode.treeLevel === undefined) {
        this.dialog('请先选择转移的目标位置！')
        return
      }
      if (String(this.currentNode.treeLevel) === '0') {
        isRoot = true
      }
      if (this.currentNode.innerCode === undefined) {
        this.currentNode.innerCode = '0'
      }
      if (this.currentNode.innerCode.startsWith(this.innerCode)) {
        this.dialog('不能将栏目转移到本栏目，本栏目的子栏目，以及本栏目的父栏目！')
        return
      }
      if (
        this.innerCode.startsWith(this.currentNode.innerCode) &&
        this.innerCode.length / 6 === this.currentNode.innerCode.length / 6 + 1
      ) {
        this.dialog('不能将栏目转移到本栏目，本栏目的子栏目，以及本栏目的父栏目！')
        return
      }
      if (this.innerCode.length === 6 && this.currentNode.innerCode === 0) {
        this.dialog('不能将栏目转移到本栏目，本栏目的子栏目，以及本栏目的父栏目！')
        return
      }
      if (this.currentNode.ID === this.catalogId) {
        this.dialog('不能将栏目转移到本栏目，本栏目的子栏目，以及本栏目的父栏目！')
        return
      }
      if (isRoot) {
        this.currentNode.parentID = 0
      }
      let params = {
        catalogID: this.catalogId,
        pCatalogID: this.currentNode.ID
      }
      this.submitLoading = true
      try {
        let res = await axios.put('/ui/catalogs/move', params)
        this.submitLoading = false
        if (res.data.status === 1) {
          await util.showProgress(res.data.taskID, `正在转移[${this.currentNode.name}]栏目`)
          this.$emit('callback', 'move')
          this.isShowModal = false
        } else {
          util.showMessage(res)
        }
      } catch (e) {
        this.submitLoading = false
        // util.showErrorNotification(e)
      }
    },
    // 树节点点击事件
    nodeClickHandler(data) {
      this.currentNode = data
    },
    async loadCatalogTree() {
      this.treeLoading = true
      let res = await axios.get('/ui/catalog/bindadminchoosetree', {params: {dimensionID: this.dimensionId}})
      this.treeLoading = false
      this.moveTreeList = res.data.data
    },
    // 消息Dialog封装
    dialog (msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>

</style>
<style>
.dim-catalog-move-dlg .el-dialog{
  width:400px;
}
@media (max-width: 480px){
  .dim-catalog-move-dlg .el-dialog{
    width:96%;
  }
}
</style>
