<template>
  <div>
    <el-card>
      <div>
        <el-button type="primary" @click="openAddDialog(0,null)" v-if="checkPermission(PROJECT_PERMS.addGroup)">新增一级分类</el-button>
      </div>
      <div style="margin-top: 10px">
        <el-tree
          v-loading="treeLoading"
          :data="groupTree"
          highlight-current
          :default-expand-all="false"
          :expand-on-click-node="false"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>{{ data.label }}</span>
                <span style="font-size: 20px">
                  <i v-if="checkPermission(PROJECT_PERMS.modifyGroup)" style="cursor: pointer" @click="openEditDialog(data)" class="el-icon-edit"/>
                  <i v-if="checkPermission(PROJECT_PERMS.deleteGroup)" @click="deleteGroup(data.value)" class="el-icon-remove-outline"/>
                  <i v-if="checkPermission(PROJECT_PERMS.addGroup)" @click="openAddDialog(1,data.value)" class="el-icon-circle-plus-outline"/>
                </span>
          </span>
        </el-tree>
      </div>
    </el-card>

    <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="addVisible" width="600px" style="height: 400px">
      <el-form>
        <el-form-item label="项目组名称:">
          <el-input style="width: 400px" v-model="addForm.groupName"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="block" style="height: 200px;text-align: center">
            <el-button type="primary" :loading="addLoading" @click="saveAdd">保存</el-button>
            <el-button @click="closeDialog(0)">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="编辑" :visible.sync="editVisible" width="600px" style="height: 400px">
      <el-form>
        <el-form-item label="分类名称:">
          <el-input style="width: 400px" v-model="editForm.groupName"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="block" style="height: 200px;text-align: center">
            <el-button type="primary" :loading="editLoading" @click="saveEdit">保存</el-button>
            <el-button @click="closeDialog(1)">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {addGroup, getGroupTree, editGroup, removeGroup} from "@/api/project";
import {PROJECT_PERMS} from "@/permission/permission-project";
import permissionMixin from '../../mixins/permission-mixin'
export default {
  name: "ProjectGroupManagement",
  mixins: [permissionMixin],

  data() {
    return {
      PROJECT_PERMS,
      dialogTitle:'',
      treeLoading: false,
      addVisible: false,
      editVisible: false,
      addLoading: false,
      editLoading: false,
      groupTree: [],
      addForm: {
        parentId: null,
        groupName: '',
        isBaseGroup: null
      },
      editForm: {
        groupId: null,
        groupName: ''
      },
    }
  },
  mounted() {
    this.fetchGroupTree()
  },
  methods: {
    //查询树结构
    fetchGroupTree() {
      this.treeLoading = true
      getGroupTree().then(res => {
        this.groupTree = res.result
        this.treeLoading = false
      }, err => {
        this.treeLoading = false
      })
    },
    openAddDialog(type, groupId) {
      if (type == 0) {//新增一级项目组
        this.addForm = {
          parentId: null,
          groupName: '',
          isBaseGroup: 1
        }
        this.dialogTitle='新增一级项目组'
      } else {
        this.addForm = {
          parentId: groupId,
          groupName: '',
          isBaseGroup: 0
        }
        this.dialogTitle='新增子项目组'
      }
      this.addVisible = true
    },
    openEditDialog(data) {
      this.editForm = {
        groupId: data.value,
        groupName: data.label
      }
      this.editVisible = true
    },
    deleteGroup(id) {
      this.$confirm('确认作废项目组吗?', '提示', {type: 'error'}).then(() => {
        removeGroup(id).then(res => {
          this.$message.success('作废项目组成功')
          this.fetchGroupTree()
        }, err => {

        })
      }, () => {
      })
    },
    saveAdd() {
      this.addLoading = true
      if (this.addForm.groupName == null || this.addForm.groupName.trim() == '') {
        this.$message.error('项目组名称不能为空')
        this.addLoading = false
        return false
      }
      this.addForm.groupName = this.addForm.groupName.trim()
      addGroup(this.addForm).then(res => {
        this.$message.success('新增项目组成功')
        this.addLoading = false;
        this.fetchGroupTree();
        this.closeDialog(0)
      }, err => {
        this.addLoading = false
      })
    },
    saveEdit() {
      this.editLoading = true
      if (this.editForm.groupName == null || this.editForm.groupName.trim() == '') {
        this.$message.error('项目组名称不能为空')
        this.editLoading = false
        return false
      }
      this.editForm.groupName = this.editForm.groupName.trim()
      editGroup(this.editForm, this.editForm.groupId).then(res => {
        this.$message.success('新增项目组成功')
        this.editLoading = false;
        this.fetchGroupTree();
        this.closeDialog(1)
      }, err => {
        this.editLoading = false
      })
    },
    closeDialog(type) {
      if (type == 0) {
        this.addForm = {
          parentId: null,
          groupName: '',
          isBaseGroup: null
        }
        this.addVisible = false
      } else if (type == 1) {
        this.editForm = {
          groupId: null,
          groupName: ''
        }
        this.editVisible=false
      }
    }
  },

}
</script>

<style scoped>

</style>
