<template>
  <el-dialog
    :title="textMap[addOrEditData.status]"
    :visible.sync="addOrEditData.visible"
  >
    <!-- 新增或编辑对话框-->
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="orgGroupData"
      label-position="left"
      label-width="90px"
      style="width: 400px; margin-left:50px;"
    >
      <el-form-item label="ID" v-show="addOrEditData.status === 'update'">
        <el-input v-model="orgGroupData.orgGroupId"></el-input>
      </el-form-item>

      <el-form-item label="名称" prop="orgGroupName">
        <el-input v-model="orgGroupData.orgGroupName" />
      </el-form-item>

      <el-form-item label="标识" prop="orgGroupCode">
        <el-input v-model="orgGroupData.orgGroupCode" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addOrEditData.visible = false">取消</el-button>
      <el-button
        type="primary"
        v-has="'sysOrgGroup:save'"
        @click="addOrEditData.status === 'create' ? createData() : updateData()"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import waves from "@/directive/waves"; // 水波纹指令
import {
  createOrgGroup,
  updateOrgGroup,
  getOrgGroupById
} from "@/api/auth/orgGroup";

export default {
  name: "addOrEditOrgGroupDialog",
  directives: {
    waves
  },
  props: ["addOrEditData"],
  data() {
    return {
      textMap: {
        create: "添加",
        update: "更新"
      },
      orgGroupData: {
        orgGroupId: null,
        orgGroupCode: null,
        orgGroupName: null
      },
      rules: {
        orgGroupCode: [
          {
            required: true,
            message: "请填写名称 1-30字母数字中文",
            trigger: "blur"
          }
        ],
        orgGroupName: [
          {
            required: true,
            message: "请填写Code,1-60 字母数字",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {},
  watch: {
    "addOrEditData.orgGroupId": {
      handler: function(newValue, oldValue) {
        if (newValue === null) {
          return;
        }
        this.getOrgGroupData();
      },
      immediate: true // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    }
  },
  methods: {
    getOrgGroupData() {
      //获取当前组织角色
      let orgGroupId = this.addOrEditData.orgGroupId;
      getOrgGroupById(orgGroupId).then(response => {
        let data = response.data;
        this.orgGroupData.orgGroupId = data.orgGroupId;
        this.orgGroupData.orgGroupCode = data.orgGroupCode;
        this.orgGroupData.orgGroupName = data.orgGroupName;
      });
    },
    createData() {
      //创建组织角色
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          createOrgGroup(this.orgGroupData).then(response => {
            //刷新 列表  关闭 弹框
            this.addOrEditData.visible = false;
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 3000
            });
            //重新加载
            this.$emit("refresh");
          });
        }
      });
    },
    updateData() {
      //更新组织角色
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          updateOrgGroup(this.orgGroupData).then(response => {
            //刷新 列表  关闭 弹框
            this.addOrEditData.visible = false;
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 3000
            });

            //重新加载
            this.$emit("refresh");
          });
        }
      });
    }
  }
};
</script>

<style scoped></style>
