<template>
  <div id="topicMgr dg-topic-tree-mgr">
    <div style="height: 100%; padding: 15px">
      <el-row :gutter="24" style="height: 100%">
        <dg-tree
          ref="dgTree"
          api-code="sysDictTree"
          :root="root"
          node-key="ROWCODE"
          pnode-key="PARENTCODE"
          label="ROWNAME"
          :show-checkbox="false"
          :show-screen="false"
          :default-expand-all="true"
          :expand-on-click-node="false"
          :render-content="renderContent"
        >
        </dg-tree>
        <el-drawer
          :wrapper-closable="false"
          class="progDrawer"
          :title="progDrawerTitle"
          :visible.sync="showForm"
          size="500px"
        >
          <div style="padding: 15px" class="drawer_content">
            <dg-form
              :form-data.sync="formModel.formData"
              :rules="formModel.rules"
              :form-items="formModel.formItems"
              :inline="formModel.inline"
              label-width="100px"
            >
            </dg-form>
            <div class="drawer_footer">
              <el-button type="info" plain @click="showForm = false">取消</el-button>
              <el-button v-if="edit == false" type="success" plain @click="addSave">确 定</el-button>
              <el-button v-if="edit == true" type="success" plain @click="editSave">确 定</el-button>
            </div>
          </div>
        </el-drawer>
      </el-row>
    </div>
  </div>
</template>
<script lang="jsx">
export default {
  name: 'DgTopicTreeMgr',

  props: {
    root: {
      type: String,
      default: () => '',
    }, // 根节点ROWCODE值
    DIMCODE: {
      type: String,
      default: () => '',
    },
    DIMNAME: {
      type: String,
      default: () => '',
    },
  },

  data() {
    return {
      progDrawerTitle: '',
      treeNode: null,
      edit: false,
      showForm: false,
      formModel: {
        formData: {
          ROWNAME: '',
          ROWCODE: '',
          PARENTCODE: '',
          DIMCODE: this.DIMCODE,
          DIMNAME: this.DIMNAME,
        },
        formItems: [
          { editer: 'input', label: '主题名称', value: 'ROWNAME' },
          { editer: 'input', label: '主题编号', value: 'ROWCODE', disabled: false },
          { editer: 'input', label: '父主题编号', value: 'PARENTCODE', disabled: true },
        ],
        rules: {
          ROWNAME: [{ required: true, message: '请输入', trigger: 'blur' }],
          ROWCODE: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
      },
    }
  },

  created() {},

  methods: {
    // 右键菜单中的创建事件
    createNode(data) {
      this.edit = false
      this.showForm = true
      var self = this
      self.formModel.formItems[1].disabled = false
      self.progDrawerTitle = '新建同级主题'
      self.formModel.formData = {}
      self.formModel.formData.DIMCODE = this.DIMCODE
      self.formModel.formData.PARENTCODE = data.PARENTCODE
      self.formModel.formData.DIMNAME = this.DIMNAME
    },
    // 右键菜单中的创建子主题事件
    createChildNode(data) {
      this.edit = false
      this.showForm = true
      var self = this
      self.formModel.formItems[1].disabled = false
      self.progDrawerTitle = '新建子主题'
      self.formModel.formData = {}
      self.formModel.formData.DIMCODE = this.DIMCODE
      self.formModel.formData.PARENTCODE = data.ROWCODE
      self.formModel.formData.DIMNAME = this.DIMNAME
    },
    // 右键菜单中的编辑事件
    editNode(data) {
      this.showForm = true
      this.edit = true
      var self = this
      self.formModel.formItems[1].disabled = true
      self.progDrawerTitle = '编辑主题'
      self.formModel.formData = data
    },
    async addSave() {
      const res = await this.$api.DgJsonStore({
        apiCode: 'jobDimData',
        params: `command=insert&records=[${JSON.stringify(this.formModel.formData)}]`,
      })
      if (res.success) {
        this.$message({
          message: '新建主题成功',
          type: 'success',
        })
        this.showForm = false
        this.$refs.dgTree.getData() // 调用DgTree组件的getData()方法
      }
    },
    async editSave() {
      const res = await this.$api.DgJsonStore({
        apiCode: 'jobDimData',
        params: `command=update&records=[${JSON.stringify(this.formModel.formData)}]`,
      })
      if (res.success) {
        this.$message({
          message: '更新主题成功',
          type: 'success',
        })
        this.showForm = false
        this.$refs.dgTree.getData() // 调用DgTree组件的getData()方法
      }
      self.formModel.formItems[1].disabled = false
    },
    // 右键菜单中的删除事件
    async deletNode(node, data) {
      var self = this
      self
        .$confirm('此操作将删除主题 ' + data.ROWNAME + ' ，是否继续?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          self.formModel.formData = data
          const res = await this.$api.DgJsonStore({
            apiCode: 'jobDimData',
            params: `command=delete&records=[${JSON.stringify(self.formModel.formData)}]`,
          })
          if (res.success) {
            self.$message({
              message: '删除主题成功',
              type: 'success',
            })
            self.drawerVisible = false
            self.$refs.dgTree.getData() // 调用DgTree组件的getData()方法
          }
        })
    },
    renderContent(h, { node, data, store }) {
      if (data.children) {
        return (
          <span class="custom-tree-node">
            <span>
              <i class="el-icon-folder"></i>
              <span style="padding-left:10px; font-size: 12px;">{node.label}</span>
            </span>
            <span style="float:right">
              <el-button size="mini" type="text" on-click={() => this.createNode(data)}>
                新增同级主题
              </el-button>
              <el-button size="mini" type="text" on-click={() => this.createChildNode(data)}>
                新增子主题
              </el-button>
              <el-button size="mini" type="text" on-click={() => this.editNode(data)}>
                编辑主题
              </el-button>
              <el-button size="mini" type="text" on-click={() => this.deletNode(node, data)}>
                删除主题
              </el-button>
            </span>
          </span>
        )
      } else {
        return (
          <span class="custom-tree-node">
            <span>
              <i class="el-icon-document"></i>
              <span style="padding-left:10px; font-size: 12px;">{node.label}</span>
            </span>
            <span style="float:right">
              <el-button size="mini" type="text" on-click={() => this.createNode(data)}>
                新增同级主题
              </el-button>
              <el-button size="mini" type="text" on-click={() => this.createChildNode(data)}>
                新增子主题
              </el-button>
              <el-button size="mini" type="text" on-click={() => this.editNode(data)}>
                编辑主题
              </el-button>
              <el-button size="mini" type="text" on-click={() => this.deletNode(node, data)}>
                删除主题
              </el-button>
            </span>
          </span>
        )
      }
    },
  },
}
</script>
