<!--
 * @Author: Billy
 * @Date: 2021-08-29 02:03:27
 * @LastEditors: Billy
 * @LastEditTime: 2022-01-04 17:23:42
 * @Description: 请输入
-->
<template>
  <div class="container">
    <LightSplit :ratios="[1, 1]" :minHeight="300">
      <template v-slot:1>
        <div class="tree-container">
          <el-tree
            ref="org-tree"
            :data="treeData"
            :node-key="'id'"
            :props="treeProps"
            :show-checkbox="false"
            :highlight-current="true"
            :expand-on-click-node="true"
            :default-expanded-keys="defaultExpandedKeys"
            @node-click="onTreeNodeClick"
            @current-change="onOrgTreeCurrChange"
          ></el-tree>
        </div>
      </template>
      <template v-slot:2>
        <el-form
          ref="form"
          :model="form"
          :label-position="'top'"
          :rules="orgRules"
        >
          <el-form-item label="目标上级部门名称" prop="parentName">
            <el-input
              :value="form.parentName"
              placeholder="请在左侧选择"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item label="正在移动部门名称">
            <el-input :value="org.name" readonly></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button @click="onCancel">{{ btnCancelName }}</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </template>
    </LightSplit>
  </div>
</template>
<script>
import OrganizationBiz from "../../../biz/Rbac/Organization.js";
import LightSplit from "../../../components/_Common/LightSplit.vue";
export default {
  components: { LightSplit },
  props: {
    treeData: { type: Array },
    org: { type: Object, required: true }, // 当前移动的部门
  },
  data() {
    return {
      form: {
        parentId: 0,
        parentName: "",
        targetParentData: null,
      },
      orgRules: {
        parentName: [
          {
            required: true,
            message: "请选择目标上级部门",
            trigger: "none",
          },
        ],
      },
      defaultExpandedKeys: [null],
      treeProps: {
        label: "name",
        children: "Children",
      },
      btnCancelName: "取消",
    };
  },
  methods: {
    onSubmit() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          if (this.org.id === this.form.parentId) {
            this.$message.warning(`部门不能移动到自身内`);
          } else {
            this.$confirm(
              `确定把在部门 ${this.org.name} 移动到 ${this.form.parentName} 部门下面?`,
              {
                title: "确认新增",
                showCancelButton: true,
                showConfirmButton: true,
              }
            )
              .then(async () => {
                try {
                  let org = OrganizationBiz.move(
                    this.org.id < 0 ? null : this.org.id,
                    this.form.parentId !== null && this.form.parentId < 1 // 由于需要维护树状控件，树状控件不支持节点对象的id为null，故根节点id都设置为-1
                      ? null
                      : this.form.parentId
                  );
                  if (org) {
                    this.$message.success(
                      `${this.org.name} 移动到 ${this.form.parentName} 部门下`
                    );
                    this.btnCancelName = "退出";
                    this.$emit("success", this.org, this.form.targetParentData);
                  }
                } catch (e) {
                  this.$message.error(e.message);
                }
              })
              .catch((e) => {});
          }
        }
      });
    },

    onCancel() {
      this.$emit("cancel");
    },

    onTreeNodeClick() {},
    // 当组织架构树被改变选中时
    onOrgTreeCurrChange(data, node) {
      this.form.parentId = data.id;
      this.form.parentName = data.name;
      this.form.targetParentData = data;
      // this.$refs["form"].clearValidate();
    },

    // 供外部调用，更新本组件的一些显示
    updateForm() {
      this.$refs["form"].clearValidate();
      this.btnCancelName = "取消";
    },
  },
};
</script>
<style lang="scss" scoped>
.tree-container {
  height: 100%;
  max-height: 600px;
  overflow-y: auto;
}
.el-form-item.btns {
  padding-top: 20px;
  margin-bottom: 0;
  ::v-deep .el-form-item__content {
    display: flex;
    justify-content: flex-end;
  }
}
</style>