<template>
  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
    <el-row>
      <el-col :span="24">
        <el-form-item label="角色编码" prop="code">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="角色顺序" prop="sort">
          <el-input-number
            v-model="form.sort"
            controls-position="right"
            :min="1"
            :max="999999999"
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="状态" prop="status" v-if="isEdit">
          <el-switch v-model="form.status" @change='changeStatus'> </el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { addRole, getRole, updateRole,changeRoleStatus } from "@/api/system/role";
export default {
  name: "RoleAdd",
  data() {
    return {
      form: {
        id: "",
        code: "",
        name: "",
        sort: 1,
        status: 0,
        remark: "",
      },
      isEdit: false, //是否是编辑
      rules: {
        code: [
          { required: true, message: "角色编码不能为空", trigger: "blur" },
        ],
        name: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
        sort: [{ required: true }],
      },
    };
  },
  methods: {
    init(id) {
      if (id) {
        this.isEdit = true;
        this.form.id = id;
        getRole(id).then((res) => {
          if (res.code === 0) {
            this.form.id = res.data.id;
            this.form.code = res.data.code;
            this.form.name = res.data.name;
            this.form.sort = res.data.sort;
            this.form.remark = res.data.remark;
            this.form.status = res.data.status ? false : true;
          }
        });
      } else {
        this.isEdit = false;
        this.form.id = "";
      }
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            //编辑
            updateRole({
              id: this.form.id,
              code: this.form.code,
              name: this.form.name,
              sort: this.form.sort,
              remark: this.form.remark,
              status: this.form.status ? 0 : 1,
            }).then((res) => {
              if (res.code === 0) {
                this.$modal.msgSuccess("操作成功");
                this.$emit("successSubmit");
              }
            });
          } else {
            addRole({
              code: this.form.code,
              name: this.form.name,
              sort: this.form.sort,
              remark: this.form.remark,
              status: 0,
            }).then((res) => {
              if (res.code === 0) {
                this.$modal.msgSuccess("操作成功");
                this.$emit("successSubmit");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    formClear() {
      this.$refs.form.resetFields();
      this.isEdit = false;
    },
    // 修改状态
    changeStatus(val) {
      // 调用状态修改接口
      changeRoleStatus({
        id: this.form.id,
        status: val ? 0 : 1,
      }).then((res) => {
        if (res.code === 0) {
          this.$modal.msgSuccess("操作成功");
        }
      })
    }
  },
};
</script>
