<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页</el-button>
    </el-toolbar>
    <div>
      <el-row :gutter="12">
        <el-col :span="12" v-for="item in treeData" :key="item.ID">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <i class="fa fa-list-alt"></i>
              <span class="bold" v-text="item.name"></span>
              <el-button style="float: right; padding: 3px 0" @click="addSubType(item)" type="text">
                <i class="fa fa-plus"></i>添加子类</el-button>
            </div>
            <div class="text item">
              <el-tree class="formtype-tree" :data="item.children" :render-content="renderContent" node-key="ID" :expand-on-click-node="false" :default-expand-all="true" :highlight-current="true" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import TreeRender from './components/TreeRender.vue'
import util from '@src/common/util.js'
export default {
  components: {
    TreeRender
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  mounted() {
    this.loadTreeData()
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    async loadTreeData() {
      let res = await axios.get('/ui/customforms/customFormType/treeData?editFlag=Y')
      this.treeData = res.data.data
    },
    renderContent(h, { node, data, store }) {
      let that = this
      return h(TreeRender, {
        props: {
          data: data, // 节点数据
          node: node, // 节点内容
          store: store // 完整树形内容
        },
        on: {
          // 绑定方法
          nodeDel: (s, d, n) => that.treeNodeDeleteHandler(s, d, n),
          nodeSave: (s, d, n) => that.treeNodeSaveHandler(s, d, n)
        }
      })
    },
    async treeNodeDeleteHandler(store, data, node) {
      // 删除节点
      // 有子级不删除
      if (node.childNodes && node.childNodes.length !== 0) {
        this.$notify({
          title: '警告',
          message: '此节点有子级，不可删除！',
          type: 'warning',
          duration: 2000
        })
        return false
      } else {
        try {
          let res = await axios.get(`/ui/customforms/customFormType/${data.ID}/chkHasRelaContent`)
          if (res.data.result === true) {
            await this.$confirm(
              '该分类存在关联的自定义表单！<br/><span class="icon-danger">如果确认将同步删除关联的表单。</span><br/>是否继续删除？',
              '警告',
              {
                confirmButtonText: '确定删除',
                cancelButtonText: '不删除',
                dangerouslyUseHTMLString: true,
                type: 'warning'
              }
            )
          }
          res = await axios.delete(`/ui/customforms/customFormType/${data.ID}`)
          util.showResponseMessage(res.data)
          if (res.data.status === 1) {
            node.parent.removeChild(node)
          }
        } catch (e) {}
      }
    },
    async treeNodeSaveHandler(store, data, node) {
      try {
        let res = data.ID
          ? await axios.patch(`/ui/customforms/customFormType/${data.ID}`, {name: data.name})
          : await axios.post('/ui/customforms/customFormType', data)
        if (!data.hasOwnProperty('ID') && res.data.status === 1) {
          _.assign(data, res.data.data)
        }
        util.showResponseMessage(res.data)
      } catch (e) {}
    },
    addSubType(node) {
      let subNodeData = { name: '分类名称', isEdit: true, parentID: node.ID, pInnerCode: node.innerCode || '0', children: [] }
      if (node.children) {
        node.children.push(subNodeData)
      } else {
        node.children = [subNodeData]
      }
    },
    handleNodeClick(data) {
    }
  }
}
</script>
<style>
</style>
