<template>
  <div class="left-box">
    <el-input
      v-model="filterText"
      placeholder="请输入部门或科室"
      suffix-icon="el-icon-search"
      style="margin-bottom: 15px"
    >
    </el-input>
    <el-tree
      ref="tree"
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
      default-expand-all="true"
      highlight-current="true"
      :filter-node-method="filterNode"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span v-if="$route.path.indexOf('/system/users') != -1">
          <el-button
            icon="el-icon-plus"
            circle
            type="success"
            size="mini"
            class="lake-Blue"
            @click.stop="() => handleAddOrEdit(node, data, 'create')"
          >
          </el-button>
          <el-button
            icon="el-icon-edit"
            circle
            type="warning"
            size="mini"
            @click.stop="() => handleAddOrEdit(node, data, 'update')"
          >
          </el-button>
        </span>
      </span>
    </el-tree>

    <!--添加/修改-->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="420px"
    >
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="right"
        label-width="80px"
        style="width: 370px; margin-left: 10px"
      >
        <el-form-item label="上级组织" v-if="temp.prntOrgName">
          <el-input v-model.trim="temp.prntOrgName" disabled />
        </el-form-item>
        <!-- <el-form-item label="机构编码" prop="orgId" :rules="rules.required">
          <el-input v-model.trim="temp.orgId" />
        </el-form-item> -->
        <el-form-item label="机构名称" prop="orgName" :rules="rules.required">
          <el-input v-model.trim="temp.orgName" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="commitData()" :loading="btLoading1"
          >确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bus from "@/views/bus";
import { getALLOrgTree } from "@/api/drugCataManage/index";
import { saveOrgInfo } from "@/api/system/users";
import rules from "@/utils/rules";
export default {
  data() {
    return {
      btLoading1: false,
      rules,
      dialogFormVisible: false, //是否对话框
      dialogStatus: "",
      textMap: {
        update: "组织架构编辑",
        create: "组织架构添加"
      },
      temp: {
        //表单
        age: ""
      },
      listLoading: false,
      filterText: "",
      data: [],
      defaultProps: {
        children: "child",
        label: "orgName"
      }
    };
  },

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  mounted() {
    this.getData();
  },

  methods: {
    // 打开添加/修改对话框
    handleAddOrEdit(node, data, type) {
      console.log(node, data);
      //修改对话框
      if (type === "update") {
        this.temp = {
          orgId: data.orgId,
          orgName: data.orgName
        };
      } else {
        this.temp = {
          prntOrgId: data.orgId,
          prntOrgName: data.orgName,
          orgId: "",
          orgName: ""
        };
      }
      this.dialogStatus = type;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },

    //提交表单数据
    commitData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.btLoading1 = true;
            saveOrgInfo(this.temp)
              .then((response) => {
                this.btLoading1 = false;
                this.$message({
                  message: "操作成功",
                  type: "success"
                });
                this.dialogFormVisible = false;

                this.getData();
              })
              .catch(() => {
                this.btLoading1 = false;
              });
          });
        }
      });
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.orgName.indexOf(value) !== -1;
    },

    handleNodeClick(data) {
      bus.$emit("orgName", data.orgName);
      bus.$emit("orgId", data.orgId);
    },

    getData() {
      // 查询目录类型
      getALLOrgTree({}).then((res) => {
        this.data = [res.data];
        bus.$emit("treeList", this.data);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.left-box {
  width: 18%;
  margin-right: 20px;
  padding: 15px;
  border-radius: 6px;
  background-color: #fff;
  height: 100%;
  overflow-y: auto;
}
::v-deep .el-tree-node__content {
  height: 38px;
}
::v-deep .el-button--mini.is-circle {
  padding: 2px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>