<template>
  <div id="treeWithMenu" class="dg-tree-with-menu">
    <!-- 调用树组件 -->
    <dg-tree
      ref="dgTree"
      v-rightMenu="menuData"
      :api-code="apiCode"
      :root="root"
      :node-key="nodeKey"
      :pnode-key="pnodeKey"
      :label="label"
      :show-checkbox="showCheckbox"
      :default-expand-all="defaultExpandAll"
      :expand-on-click-node="expandOnClickNode"
      :lazy="lazy"
      :load="load"
      :accordion="accordion"
      :render-content="renderContent"
      @click="nodeclick"
    >
    </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="180px"
        >
        </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>
  </div>
</template>

<script lang="jsx">
export default {
  name: 'DgTreeWithMenu',

  props: {
    apiCode: {
      type: String,
      default: () => '',
    },
    root: {
      type: String,
      default: () => '',
    },
    pnodeKey: {
      type: String,
      default: () => '',
    },
    placeholder: {
      type: String,
      default: () => '',
    },
    showCheckbox: {
      type: Boolean,
      default: () => false,
    },
    title: {
      type: String,
      default: () => '',
    },
    nodeKey: {
      type: String,
      default: () => '',
    },
    label: {
      type: String,
      default: () => '',
    },
    lazy: {
      type: Boolean,
      default: () => false,
    },
    accordion: {
      type: Boolean,
      default: () => false,
    },
    load: {
      type: Function,
      default: (node, resolve) => {
        return resolve([])
      },
    },
    showScreen: {
      type: Boolean,
      default: () => false,
    },
    expandOnClickNode: {
      type: Boolean,
      default: () => true,
    },
    defaultExpandAll: {
      type: Boolean,
      default: () => false,
    },
    renderContent: {
      type: Function,
      default: (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>
          )
        } 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>
          )
        }
      },
    },
  },

  data() {
    return {
      treeNodeData: {},
      menuData: {
        // 菜单box的样式   Menu box style
        boxStyle:
          'width:120px;background:#fff;border: 1px solid rgba(0, 0, 0, 0.1);z-index:999;box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.2);background-clip: padding-box; padding: 5px;',
        // 菜单选项的样式 Style of menu options
        optionStyle: 'color:#000;line-height:30px;font-size: 12px;cursor: pointer;',
        menus: [
          {
            content: '创建同级目录',
            callback: 'createNode',
          },
          {
            content: '创建子目录',
            callback: 'createChildNode',
          },
          {
            content: '编辑目录',
            callback: 'editNode',
          },
          {
            content: '删除目录',
            callback: 'deletNode',
          },
        ],
      },
      progDrawerTitle: '',
      edit: false,
      showForm: false,
      formModel: {
        formData: {
          PARENT_CODE: '',
          TOPIC_CODE: '',
          TOPIC_NAME: '',
          REMARK: '',
        },
        formItems: [
          { editer: 'input', label: '目录名称', value: 'TOPIC_NAME' },
          { editer: 'input', label: '目录编号', value: 'TOPIC_CODE', disabled: false },
          { editer: 'input', label: '父目录编号', value: 'PARENT_CODE', disabled: true },
        ],
        rules: {
          TOPIC_NAME: [{ required: true, message: '请输入', trigger: 'blur' }],
          TOPIC_CODE: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
      },
    }
  },

  methods: {
    getData() {
      this.$refs.dgTree.getData()
    },
    // 右键菜单中的创建同级目录事件
    createNode() {
      var data = this.treeNodeData
      this.edit = false
      this.showForm = true
      this.formModel.formItems[1].disabled = false
      this.progDrawerTitle = '新建同级目录'
      this.formModel.formData = {
        PARENT_CODE: data.PARENT_CODE,
        TOPIC_CODE: data.PARENT_CODE,
        TOPIC_NAME: '',
        REMARK: '',
      }
    },
    // 右键菜单中的创建子目录事件
    createChildNode() {
      var data = this.treeNodeData
      this.edit = false
      this.showForm = true
      this.formModel.formItems[1].disabled = false
      this.progDrawerTitle = '新建子目录'
      this.formModel.formData = {
        PARENT_CODE: data.TOPIC_CODE,
        TOPIC_CODE: data.TOPIC_CODE,
        TOPIC_NAME: '',
        REMARK: '',
      }
    },
    // 右键菜单中的编辑事件
    editNode() {
      var data = this.treeNodeData
      this.showForm = true
      this.edit = true
      this.formModel.formItems[1].disabled = true
      this.progDrawerTitle = '编辑目录'
      this.formModel.formData = data
    },
    async addSave() {
      const res = await this.$api.DgJsonStore({
        apiCode: 'dcTopicTree',
        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: 'dcTopicTree',
        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()方法
      }
      this.formModel.formItems[1].disabled = false
    },
    // 右键菜单中的删除事件
    async deletNode(node, data) {
      var data = this.treeNodeData
      this.$confirm('此操作将删除目录 ' + data.TOPIC_NAME + ' ，是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        this.formModel.formData = data
        const res = await this.$api.DgJsonStore({
          apiCode: 'dcTopicTree',
          params: `command=delete&records=[${JSON.stringify(this.formModel.formData)}]`,
        })
        if (res.success) {
          this.$message({
            message: '删除目录成功',
            type: 'success',
          })
          this.$refs.dgTree.getData() // 调用DgTree组件的getData()方法
        }
      })
    },
    nodeclick(obj, node, data) {
      // let key = this.$refs.tree.getCurrentKey()
      this.treeNodeData = obj
      this.$emit('click', obj, node, data)
    },
  },
}
</script>
