<script setup lang="ts">
import { reactive, ref, watch, nextTick } from "vue";
import { httpAdd, httpUpdate } from "/@/api/system/action";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useNav } from "/@/layout/hooks/nav";
import menuType from "./types";

const { logout } = useNav();
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();

const props = defineProps({
  itemId: {
    type: String,
    default: ""
  },
  showModel: {
    type: Boolean,
    default: false
  },
  isDetails: {
    type: String,
    default: "add"
  },
  sitem: {
    type: Object as PropType<menuType>
  }
});
const showModelThis = ref(false);
const emit = defineEmits<{
  (e: "cancel"): void;
  (e: "refresh"): void;
}>();
const editType = ref("add");
const formModel = {
  id: "",
  action_name: ""
};

const ruleForm = reactive<menuType>({ ...formModel });
const rules = reactive<FormRules>({
  action_name: [
    { required: true, message: "请输入功能权限名称", trigger: "blur" }
  ]
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  const { id, ...rest } = Object.assign({}, ruleForm);

  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const model = Object.assign({}, ruleForm);
      const { code, message } =
        editType.value === "add"
          ? await httpAdd(rest)
          : await httpUpdate(model);
      loading.value = false;
      if (code === 1) {
        ElMessage.success(title.value + "成功！");
        showModelThis.value = false;
        emit("refresh");
      } else if (code > 100 && code < 140) {
        showModelThis.value = false;
        logout();
      } else {
        ElMessage.error(message);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const closeDialog = () => {
  showModelThis.value = false;
  loading.value = false;
  emit("cancel");
};

const loading = ref(false);
const title = ref("");

watch(
  () => {
    return props.showModel;
  },
  () => {
    const { showModel, isDetails, sitem } = props;
    editType.value = isDetails;

    if (editType.value === "add") {
      title.value = "新建功能权限";
    } else if (editType.value === "view") {
      title.value = "功能权限详情";
    } else {
      title.value = "修改功能权限";
    }

    showModelThis.value = showModel;

    ruleForm.action_name = sitem.action_name;
    ruleForm.id = sitem.id;

    nextTick(() =>
      Object.keys(ruleForm).forEach(prop =>
        ruleFormRef.value.clearValidate(prop)
      )
    );
  }
);
</script>

<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    v-model="showModelThis"
    append-to-body
    :width="'900px'"
    center
    :title="title"
    v-loading="loading"
    @close="closeDialog"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="90px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="名称" prop="nickname">
            <el-input
              v-model="ruleForm.action_name"
              placeholder="功能权限名称"
              :disabled="editType === 'view'"
            /> </el-form-item
        ></el-col>
      </el-row>

      <el-col :span="24" class="clear">
        <el-button
          v-if="editType === 'add' || editType === 'edit'"
          type="primary"
          class="fr"
          :loading="loading"
          style="margin: 0 0 0 16px"
          @click="submitForm(ruleFormRef)"
          >保存</el-button
        >
        <el-button class="fr" style="margin: 0 0 0 16px" @click="closeDialog"
          >关闭</el-button
        >
      </el-col>
    </el-form>
  </el-dialog>
</template>
