<template>
  <el-dialog title="选择转移栏目" @open="dialogOpen" :append-to-body="true" :visible.sync="isShowModal" class="dim-catalog-move-dlg">
    <div class="padding-top-bottom mini" v-loading="treeDataLoading">
      <el-tree
        :render-content="renderContent"
        ref="tree"
        @node-click="treeNodeClick"
        :data="dimensionCatalogTree"
        :default-expand-all="true"
        :highlight-current="true"
        :node-key="treeOptions.key"
        :expand-on-click-node="false"
        :props="treeOptions">
      </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>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    catalogId: {
      type: Number,
      default: 0,
      required: true
    },
    dimensionId: {
      type: Number,
      default: 0,
      required: true
    },
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    innerCode: {
      type: String,
      default: '0',
      required: false
    }
  },
  data() {
    return {
      dimensionCatalogTree: [], //  栏目树
      treeOptions: { key: 'ID', label: 'name', children: 'children' }, // 树属性选项
      pCatalogID: 0,
      pInnerCode: '0',
      pLevel: '0',
      submitLoading: false,
      treeDataLoading: false
    }
  },
  computed: {
    isShowModal: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    dialogOpen() {
      this.pCatalogID = 0
      this.pInnerCode = '0'
      this.pLevel = '0'
      this.submitLoading = false
      this.loadDimensionCatalogTree()
    },
    async confirm() {
      let isRoot = false
      if (this.pLevel === '0') {
        isRoot = true
      }
      if (this.pInnerCode.startsWith(this.innerCode)) {
        this.$emit('dialog', '不能将栏目转移到本栏目，本栏目的子栏目，以及本栏目的父栏目！')
        return
      }
      if (
        this.innerCode.startsWith(this.pInnerCode) &&
        this.innerCode.length / 6 === this.pInnerCode.length / 6 + 1
      ) {
        this.$emit('dialog', '不能将栏目转移到本栏目，本栏目的子栏目，以及本栏目的父栏目！')
        return
      }
      if (this.innerCode.length === 6 && this.pInnerCode === 0) {
        this.$emit('dialog', '不能将栏目转移到本栏目，本栏目的子栏目，以及本栏目的父栏目！')
        return
      }
      if (this.pCatalogID === this.catalogId) {
        this.$emit('dialog', '不能将栏目转移到本栏目，本栏目的子栏目，以及本栏目的父栏目！')
        return
      }
      if (isRoot) {
        this.pCatalogID = 0
      }
      let params = { catalogID: this.catalogId, pCatalogID: this.pCatalogID }
      try {
        this.submitLoading = true
        let res = await axios.put(
          `/ui/dimesion/${this.dimensionId}/catalog/move`,
          params
        )
        this.submitLoading = false
        if (res.data.status === 1) {
          this.isShowModal = false
          this.$emit('callback', res.data.taskID)
        } else {
          util.showMessage(res)
        }
      } catch (e) {
        this.submitLoading = false
        // util.showErrorNotification(e)
      }
    },
    async loadDimensionCatalogTree() {
      this.treeDataLoading = true
      let res = await axios.get(
        `/ui/dimesion/${this.dimensionId}/catalog/moveadvancecatalogtree`
      )
      this.treeDataLoading = false
      this.dimensionCatalogTree = res.data.data
    },
    // 渲染树样式
    renderContent: function(createElement, { node, data, store }) {
      let params = {
        h: createElement,
        treeObj: { node, data, store },
        ID: this.catalogId,
        innerCode: this.innerCode
      }
      return util.renderTreeContent(params)
    },
    treeNodeClick(row) {
      this.pCatalogID = row.ID
      this.pInnerCode = row.innerCode
      this.pLevel = row.treeLevel
    }
  }
}
</script>
<style scope>
</style>
<style>
.dim-catalog-move-dlg .el-dialog{
  width:400px;
}
@media (max-width: 480px){
  .dim-catalog-move-dlg .el-dialog{
    width:96%;
  }
}
</style>
