<template>
  <div class="system-role-dialog-container">
    <el-dialog v-model="state.dialog.isShowDialog" width="400px" draggable>
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <span>{{ state.dialog.title }}</span>
        </div>
      </template>
      <el-form
        ref="roleDialogFormRef"
        :model="state.ruleForm"
        size="default"
        label-width="80px"
        :rules="rules"
      >
        <el-row :gutter="35">
          <el-col :xs="24" class="mb20">
            <el-form-item label="角色名称" prop="name">
              <el-input
                v-model="state.ruleForm.name"
                placeholder="请输入角色名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" class="mb20">
            <el-form-item label="角色标识" prop="code">
              <template #label>
                <span>角色标识</span>
              </template>
              <el-input
                v-model="state.ruleForm.code"
                placeholder="请输入角色标识"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" class="mb20">
            <el-form-item label="排序">
              <el-input-number
                v-model="state.ruleForm.sort"
                :min="0"
                :max="999"
                controls-position="right"
                placeholder="请输入排序"
                class="w100"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="角色状态">
							<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
						</el-form-item>
					</el-col> -->
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="角色描述">
              <el-input
                v-model="state.ruleForm.remark"
                type="textarea"
                placeholder="请输入角色描述"
                maxlength="150"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{
            state.dialog.submitTxt
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemRoleDialog">
import { reactive, ref } from "vue";
import { roleApi } from "/@/api/sys/role";
import { ElAlert, ElMessage, ElNotification } from "element-plus";

// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);

// 定义变量内容
const roleDialogFormRef = ref();
const state = reactive({
  ruleForm: {
    name: "", // 角色名称
    code: "", // 角色标识
    sort: 0, // 排序
    remark: "", // 角色描述
  } as any,
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: "",
  },
});

// 表单验证
const rules = reactive({
  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入角色标识", trigger: "blur" }],
});

const form = {
  name: "", // 角色名称
  code: "", // 角色标识
  sort: 0, // 排序
  remark: "", // 角色描述
};

// 打开弹窗
const openDialog = (type: string, row: any) => {
  if (type === "edit") {
    let rows = Object.assign({}, row);
    state.ruleForm = {
      id: rows.id,
      name: rows.name,
      code: rows.code, // 角色标识
      sort: rows.sort, // 排序
      remark: rows.remark,
    };
    state.dialog.title = "修改角色";
    state.dialog.submitTxt = "修 改";
  } else {
    state.ruleForm = Object.assign({}, form);
    state.dialog.title = "新增角色";
    state.dialog.submitTxt = "新 增";
  }
  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = async () => {
  let _form = state.ruleForm;
  if (_form.name == "") return ElMessage.error("请输入角色名称");
  if (_form.code == "") return ElMessage.error("请输入角色标识");
  if (state.dialog.type == "edit") {
    let item = await roleApi().putrole(_form);
    if (item.code == 200) {
      ElMessage.success(item.msg);
      closeDialog();
      emit("refresh");
    } else {
      ElNotification({
        title: "提示",
        message: item.msg,
        duration: 0,
        type: "error",
      });
    }
  } else {
    let item = await roleApi().setrule(_form);
    if (item.code == 200) {
      ElMessage.success(item.msg);
      closeDialog();
      emit("refresh");
    } else {
      ElNotification({
        title: "提示",
        message: item.msg,
        duration: 0,
        type: "error",
      });
    }
  }

  // if (state.dialog.type === 'add') { }
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>

<style scoped lang="scss">
.system-role-dialog-container {
  .menu-data-tree {
    width: 100%;
    border: 1px solid var(--el-border-color);
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    padding: 5px;
  }
}
</style>
