<template>
  <div>
    <el-card>
      <div>
        <el-button type="primary" @click="openAddDialog(0,null)" v-if="checkPermission(CATEGORY_PERMS.addChildCategory)">新增一级分类</el-button>
        <el-input style="margin-top: 10px"
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
      </div>

      <div style="margin-top: 10px">
        <el-tree
          v-loading="treeLoading"
          :data="categoryTree"
          ref="tree"
          highlight-current
          :default-expand-all="false"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>{{ data.label }}</span>
                <span style="font-size: 20px">
                  <i  v-if="checkPermission(CATEGORY_PERMS.modifyCategory)" style="cursor: pointer" @click="openEditDialog(data)" class="el-icon-edit"/>
                  <i  v-if="checkPermission(CATEGORY_PERMS.deleteCategory)" @click="deleteCategory(data.value)" style="margin: 0 8px" class="el-icon-remove-outline"/>
                  <i  v-if="checkPermission(CATEGORY_PERMS.addChildCategory)" @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.categoryName"></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.categoryName"></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 {addCategory, deleteCategory, editCategory, getCateTree} from "@/api/category";
import {CATEGORY_PERMS} from "@/permission/permission-category";
import permissionMixin from '../../mixins/permission-mixin'
export default {
  name: "CategoryManagement",
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mixins: [permissionMixin],
  data() {
    return {
      CATEGORY_PERMS,
      treeLoading: false,
      addLoading: false,
      editLoading: false,
      categoryTree: [],
      dialogTitle:'',
      addForm: {
        isBaseCategory: null,
        parentId: '',
        categoryName: ''
      },
      editForm: {
        categoryId: '',
        categoryName: ''
      },
      addVisible: false,
      editVisible: false,
      filterText: '',
    }
  },
  mounted() {
    this.getCategoryTree()
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //查询分类树
    getCategoryTree() {
      this.treeLoading = true
      getCateTree().then(res => {
        this.categoryTree = res.result
        this.treeLoading = false
      }, () => {
        this.treeLoading = false
      })
    },
    //打开新增弹框
    openAddDialog(type, parentId) {
      if (type == 0) {
        //新增一级分类
        this.addForm = {
          isBaseCategory: 1,
          parentId: '',
          categoryName: ''
        }
        this.dialogTitle='新增一级分类'
      } else {
        this.addForm = {
          isBaseCategory: 0,
          parentId: parentId,
          categoryName: ''
        }
        this.dialogTitle='新增子分类'
      }
      this.addVisible = true
    },
    //打开编辑弹框
    openEditDialog(category) {
      this.editForm.categoryId = category.value;
      this.editForm.categoryName = category.label;
      this.editVisible = true
    },
    //新增
    saveAdd() {
      this.addLoading = true
      if (this.addForm.categoryName == null || this.addForm.categoryName.trim() == '') {
        this.$message.error('分类名称不能为空')
        this.addLoading = false
        return
      }
      this.addForm.categoryName = this.addForm.categoryName.trim()
      addCategory(this.addForm).then(res => {
        this.$message.success('新增分类成功')
        this.addLoading = false
        this.closeDialog(0)
        this.getCategoryTree()
      }, err => {
        this.addLoading = false
      })
    },
    //编辑
    saveEdit() {
      this.editLoading = true
      if (this.editForm.categoryName == null || this.editForm.categoryName.trim() == '') {
        this.$message.error('分类名称不能为空')
        this.editLoading = false
        return
      }
      this.editForm.categoryName = this.editForm.categoryName.trim()
      editCategory(this.editForm, this.editForm.categoryId).then(res => {
        this.$message.success('修改分类成功')
        this.editLoading = false
        this.closeDialog(1)
        this.getCategoryTree()
      }, err => {
        this.editLoading = false
      })
    },
    //关闭弹框,清空数据
    closeDialog(type) {
      if (type == 0) {
        this.addForm = {
          isBaseCategory: null,
          parentId: '',
          categoryName: ''
        }
        this.addVisible = false
      } else {
        this.editForm = {
          categoryId: '',
          categoryName: ''
        }
        this.editVisible = false
      }
    },
    //删除分类
    deleteCategory(categoryId) {
      this.$confirm('确认作废分类吗?', '提示', {type: 'error'}).then(() => {
        deleteCategory(categoryId).then(res => {
          this.$message.success('删除分类成功')
          this.getCategoryTree()
        }, err => {

        })
      }, () => {
      })
    }
  }
}
</script>

<style scoped>

</style>
