<!--
* @name: 组织机构
-->
<template>
    <div flex style="height: 100%">
      <base-layout
        :title="'组织机构'"
        style="width: 260px;"
        :queryShow="false"
        :searchShow="false"
        :mainHight="`calc(100% - 58px)`"
      >
        <div
          slot="main"
          style="
            height: 100%;
            border-right: 1px solid #dfe6ec;
            overflow-y: auto;
          "
        >
          <base-tree
            ref="baseTree"
            :isCenter="false"
            :isSaveBtn="false"
            :Allshow="false"
            :showCheckbox="false"
            :treeLoading="treeLoading"
            :menuData="menuData"
            @handleNodeClick="treeNodeClick"
            :treeProps="treeProps"
          ></base-tree>
        </div>
      </base-layout>
      <base-layout
        title="机构编辑区"
        :bottonShow="false"
        :isPage="false"
        :queryShow="false"
        :searchShow="false"
        :buttonList="buttonList"
        style="flex: 1"
        :defaultButtonSwitch="false"
        @onFuncBtn="getFuncBtn"
      >
        <div
          slot="main"
          style="width: 100%; height: auto !important; padding: 0 20px"
        >
          <base-form
            ref="customForm"
            :formRow="formRow"
            :isFunBtn="isFunBtn"
            :rules="rules"
            class="form-control"
            @onSubmit="getSubmit"
            @resetForm="clearPage"
          >
          </base-form>
        </div>
      </base-layout>
    </div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import baseForm from "@/components/base/baseNewForm/index.vue";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import configData from "./configData";
import { authApi } from "@/api/apis/auth";
export default {
  name: "organization",
  components: {
    baseLayout,
    baseTree,
    baseForm,
    baseTable,
  },
  data() {
    return {
      treeProps: {
        children: "children",
        label: "orgName",
      },
      buttonList: [
        {
          icon: "el-icon-plus",
          menuName: "新增子节点",
        },
        {
          type: "danger",
          menuName: "删除",
          icon: "el-icon-delete",
        },
      ], //按钮
      menuData: [], //树状图数据
      formRow: configData.formRow, //表头
      isFunBtn: true,
      // 分页数据
      delId: null,
      orgForm: "",
      rules: configData.rules,
      treeLoading: false,
    };
  },
  watch: {},
  computed: {
    // 表头配置
    tableColumn() {
      return configData.tableColumnJson;
    },
  },
  mounted() {
    this.initPage();
  },
  methods: {
    //页面初始化
    initPage() {
      this.delId = null;
      this.getMenuData();
      this.$nextTick(() => {
        this.resetForm();
      });
    },
    resetForm() {
      this.$refs.customForm.resetFields();
      this.$refs.customForm.getField("lvl", 0);
      this.$refs.customForm.getField("sorts", 0);
      this.$refs.customForm.getField("upId", null);
      this.$refs.customForm.getField("orgType", "1");
    },
    clearPage() {
      this.$nextTick(() => {
        this.delId = null;
        this.orgForm = "";
        this.$refs.baseTree.setCurrentKey(null);
        this.$refs.customForm.resetFields();
        this.$refs.customForm.getField("lvl", 0);
        this.$refs.customForm.getField("sorts", 0);
        this.$refs.customForm.getField("upId", null);
        this.$refs.customForm.getField("orgType", "1");
      });
    },
    // 获得树状图
    async getMenuData() {
      this.treeLoading = true;
      setTimeout(() => {
        this.treeLoading = false;
      }, 10000);
      let res = await authApi("orgService", "org", "queryTree");
      if (res.status == "200") {
        this.treeLoading = false;
        this.menuData = res.attribute;
        this.formRow[0].elCol[0].options = res.attribute;
      }
    },
    // 获取详情
    async getDetail(id) {
      this.openLoading("detail");
      let params = {
        id: id,
      };
      let res = await authApi("orgService", "org", "queryEntity", "", params);
      this.$nextTick(() => {
        this.$refs.customForm.choiceAssignment(res.attribute);
        this.orgForm = res.attribute;
      });
    },
    // 点击事件
    treeNodeClick(data) {
      this.delId = data.id;
      this.orgForm = data;
      this.getDetail(data.id);
    },
    getSubmit(data) {
      async function submitForm(delId) {
        let params = {
          ...data,
          label: data.orgName,
        };
        let res = await authApi(
          "orgService",
          "org",
          delId ? "updateEntity" : "addEntity",
          "",
          params
        );
        return res;
      }
      this.$refs.customForm.$refs["ruleForm"].validate((valid) => {
        if (!valid) {
          return;
        } else {
          submitForm(this.delId).then((res) => {
            if (res.status == "200") {
              this.$vmNews("保存成功", "success");
              this.getMenuData();
              this.clearPage();
            }
          });
        }
      });
    },
    async OrganDel() {
      let params = {
        id: this.delId,
      };
      let res = await authApi("orgService", "org", "delectEntity", "", params);
      if (res.status == "200") {
        this.$vmNews("删除成功", "success");
        this.getMenuData();
        this.clearPage();
      }
    },
    // 操作按钮事件
    getFuncBtn(btnEven) {
      if (!this.delId || this.orgForm == "") {
        this.$vmNews("请选择组织机构！");
        return;
      }
      if (btnEven.menuName === "新增子节点") {
        // 新增
        this.$nextTick(() => {
          this.resetForm();
          this.$refs.customForm.getField("upId", this.orgForm.id);
          this.$refs.customForm.getField(
            "lvl",
            JSON.parse(this.orgForm.lvl) + 1
          );
          this.delId = null;
        });
      }
      if (btnEven.menuName === "删除") {
        // 删除
        this.$delConfirm().then(() => {
          this.OrganDel();
        });
      }
    },
  },
};
</script>
<style lang="scss">
$activeColor: var(--bg-color, yellow);

.el-tree-node__content:hover,
.el-upload-list__item:hover {
  color: white;
  background-color: $activeColor !important;
}

.el-tree-node:focus > .el-tree-node__content {
  color: white;
  background-color: $activeColor !important;
}

.el-tree-node.is-current > .el-tree-node__content {
  color: white;
  background-color: $activeColor !important;
}
</style>
<style scoped lang="scss">
$activeColor: var(--bg-color, yellow);

.content {
  --font-color: red;
  width: 100%;
  height: 200px;
  background-color: $activeColor;

  .title {
    background-color: white;
    color: var(--font-color);
  }
}

.form-control {
  ::v-deep .el-row {
    margin-right: 0px !important;
  }
}
</style>
