<!--
 * @Author: Billy
 * @Date: 2021-09-03 11:26:04
 * @LastEditors: Billy
 * @LastEditTime: 2022-01-04 17:38:31
 * @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="user.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 OrganizationApi from "../../../api/Rbac/Organization.js";
import OrgAndUserBiz from "../../../biz/Rbac/OrgAndUser.js";
import LightSplit from "../../../components/_Common/LightSplit.vue";
export default {
  components: { LightSplit },
  props: {
    treeData: { type: Array },
    user: { 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) {
          this.$confirm(
            `确定把在用户 ${this.user.name} 移动到 ${this.form.parentName} 部门下面?`,
            {
              title: "确认移动",
              showCancelButton: true,
              showConfirmButton: true,
            }
          )
            .then(async () => {
              try {
                let user = OrgAndUserBiz.relateUser(
                  this.form.parentId < 0 ? null : this.form.parentId,
                  this.user.id
                );
                if (user) {
                  this.$message.success(
                    `${this.user.name} 移动到 ${this.form.parentName} 部门下`
                  );
                  this.btnCancelName = "退出";
                  this.$emit("success", user, 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>