<!--
 * @Author: Billy
 * @Date: 2021-08-29 02:03:41
 * @LastEditors: Billy
 * @LastEditTime: 2022-01-04 17:22:26
 * @Description: 请输入
-->
<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="90px">
      <el-form-item label="原部门名称">
        <el-input :value="org.name" readonly></el-input>
      </el-form-item>
      <el-form-item label="新部门名称">
        <el-input v-model="form.name"></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>
  </div>
</template>
<script>
import OrganizationBiz from "../../../biz/Rbac/Organization.js";
export default {
  props: {
    org: { type: Object, required: true }, // 当前编辑的部门
  },
  data() {
    return {
      form: {
        // id: 0,
        name: "",
      },
      btnCancelName: "取消",
    };
  },
  updated() {},
  watch: {
    org: {
      handler: function (newVal, oldVal) {
        // this.form.id = newVal.id;
        this.form.name = newVal.name;
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    onSubmit() {
      if (this.form.name.trim() === this.org.name) {
        this.$message.warning("新旧部门名称相同");
      } else {
        this.$confirm(
          `确定把部门名称从 ${this.org.name} 修改为 ${this.form.name}?`,
          {
            title: "确认修改",
            showCancelButton: true,
            showConfirmButton: true,
          }
        )
          .then(async () => {
            this.form.name = this.form.name.trim();
            try {
              let count = await OrganizationBiz.update(
                this.org.id < 0 ? null : this.org.id,
                this.form.name
              );
              if (count) {
                this.$message.success(
                  `${this.org.name} 成功修改为 ${this.form.name}`
                );
                this.btnCancelName = "退出";
                this.org.name = this.form.name; // 更新一下组织架构树状节点
              }
            } catch (e) {
              this.$message.error(e.message);
            }
          })
          .catch((e) => {});
      }
    },

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

    // 供外部调用，更新本组件的一些显示
    updateForm() {
      this.btnCancelName = "取消";
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form-item.btns {
  padding-top: 20px;
  margin-bottom: 0;
  ::v-deep .el-form-item__content {
    display: flex;
    justify-content: flex-end;
  }
}
</style>