<template>
  <el-row :gutter="20">
    <el-col :span="4" style="background: #F1FAFE;">
      <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:malfunctionProject:add']" style="width: 100%;">
        新增{{this.type==1?'维修':this.type==2?'故障':this.type==3?'检验':this.type}}项目分类
      </el-button>
      <div class="head-container">
        <el-input
          v-model="typeName"
          placeholder="请输入类型名称"
          clearable
          size="small"
          prefix-icon="el-icon-search"
          style="margin-top: 10px"
        />
      </div>
      <el-tree
        :data="treeData"
        :props="{children: 'children', label: 'label' }"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        ref="tree"
        node-key="id"
        default-expand-all
        highlight-current>
          <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="showIcons(node)" @mouseleave="hideIcons(node)">
            <span>{{ node.label }}</span>
            <span class="tree-node-icons" v-show="node.showIcons" v-if="data.id !== 1 && data.id !== 2 && data.id !== 3">
              <i class="el-icon-plus" @click="() => handleAdd(data)" />
              <i class="el-icon-edit" @click="() => handleUpdate(node, data)" />
              <i class="el-icon-delete" @click="() => handleDelete(node, data)" />
            </span>
          </span>
      </el-tree>
    </el-col>
    <el-col :span="20">
      <slot />
    </el-col>
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="上级分类" prop="parentId" :rules="[{required:true,message:'上级分类不能为空',trigger: 'blur'}]">
          <Treeselect v-model="form.parentId" :options="treeData" placeholder="请选择" style="width: 100%;" :props="{value:'id'}" :show-count="true" />
          <!-- :disable-branch-nodes="true" @select='handleChange' -->
        </el-form-item>
        <el-form-item label="分类名称" prop="typeName" :rules="[{required:true,message:'分类名称不能为空',trigger: 'blur'}]">
          <el-input v-model="form.typeName" placeholder="请输入分类名称" :filterable="true" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open=false;">取 消</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
import { getTree, listProjectType, getProjectType, delProjectType, addProjectType, updateProjectType } from "@/api/business/projectType";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "ProjectType",
  props: {
    type: {
      type: String,
      default: '',
    }
  },
  components:{
    Treeselect
  },
  watch: {
    // 根据名称筛选部门树
    typeName(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      // 分类名称
      typeName: undefined,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      treeData: [],
    };
  },
  created() {
    this.getTree()
  },
  methods: {
    showIcons(node) {
      this.$set(node, 'showIcons', true);
    },
    hideIcons(node) {
      this.$set(node, 'showIcons', false);
    },
    getTree(){
      getTree(this.type).then(res=>{
        this.treeData=res.data
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 表单重置
    reset() {
      this.form = {
        typeId: undefined,
        typeName: undefined,
        parentId: undefined,
        ancestors: undefined,
        orderNum: undefined,
        type: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd(data) {
      console.log('data', data)
      this.form={ type: this.type, parentId: data.id }
      this.open = true;
      this.title = `添加${this.type==1?'维修':this.type==2?'故障':this.type==3?'检验':this.type}项目分类`;
    },
    /** 修改按钮操作 */
    handleUpdate(node, data) {
      this.loading = true;
      this.reset();
      const typeId = data.id
      getProjectType(typeId).then(response => {
        this.loading = false;
        this.form = response.data;
        this.open = true;
        this.title = `修改${this.type==1?'维修':this.type==2?'故障':this.type==3?'检验':this.type}项目分类`;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.typeId != null) {
            updateProjectType(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getTree();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addProjectType(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getTree();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(node, data) {
      const typeIds = data.id;
      this.$modal.confirm('是否确认项目类型为"' + data.label + '"的数据项？').then(() => {
        this.loading = true;
        return delProjectType(typeIds);
      }).then(() => {
        this.loading = false;
        this.getTree();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
  }
};
</script>

<style scoped>
::v-deep .el-tree{
  background: rgba(0, 0, 0, 0);
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.tree-node-icons {
  transition: all 0.3s;
  margin-left: 10px;
}

.el-button--mini {
  padding: 4px;
}
</style>
