<script setup lang="ts">
import { FormRules, ElForm } from "element-plus";
import { reactive, ref } from "vue";
import { httpUpdate, httpAdd } from "/@/api/system/setBtn";
import { responseHandle } from "/@/utils/responseHandle";
import { useNav } from "/@/layout/hooks/useNav";
import { btnList } from "/@/config/btnList";
import { STATUS_OPTIONS } from "/@/config/status";

enum FROM_TYPE {
  create = "create",
  edit = "edit",
  view = "view"
}
const { logout } = useNav();
const showModel = ref(false);
const currentMenuId = ref("");
const TYPE = ref<FROM_TYPE>(FROM_TYPE.create);
const formRef = ref<InstanceType<typeof ElForm>>(null);
const loading = ref(false);
const titleType = ref("");
const emit = defineEmits(["reload"]);
const initform = {
  action_code: "",
  status: "",
  menuid: ""
};
const ruleForm = ref({ ...initform });
const rules = reactive<FormRules>({
  action_code: [{ required: true, trigger: "change", message: "请选择按钮" }],
  status: [{ required: true, trigger: "change", message: "请选择状态" }]
});

async function show(node: any, id: string, isCreate: string, menuid: string) {
  Object.keys(ruleForm.value).forEach(key => {
    if (key === "menuid") {
      ruleForm.value[key] = menuid;
    } else {
      ruleForm.value[key] =
        isCreate === "create"
          ? initform[key]
            ? initform[key] + ""
            : ""
          : node[key]
          ? node[key] + ""
          : "";
    }
  });
  console.log(ruleForm.value);
  TYPE.value = isCreate;
  switch (TYPE.value) {
    case "create":
      titleType.value = "新建按钮";
      break;
    case "edit":
      titleType.value = "编辑按钮";
      break;
    case "view":
      titleType.value = "按钮详情";
      break;
    default:
      titleType.value = "新建按钮";
  }

  showModel.value = true;
}

function handleUpdate() {
  const data = {
    ...ruleForm.value
  };

  return {
    data,
    api: httpUpdate
  };
}

function handleCreate() {
  const data = {
    ...ruleForm.value
  };

  return {
    data,
    api: httpAdd
  };
}

function handleSave() {
  formRef.value.validate(async vaild => {
    if (vaild) {
      if (loading.value) return;
      const handler =
        TYPE.value === FROM_TYPE.create ? handleCreate : handleUpdate;

      loading.value = true;
      const { api, data } = handler();
      const { message, code } = await api(data);
      loading.value = false;
      responseHandle({
        code,
        message,
        logout,
        handler: () => {
          showModel.value = false;
          emit("reload");
        }
      });
    }
  });
}

defineExpose({
  show,
  changeCurrentMenuId: (id: string) => (currentMenuId.value = id)
});
</script>

<template>
  <el-dialog
    v-model="showModel"
    :close-on-press-escape="false"
    center
    append-to-body
    destroy-on-close
    :width="'500px'"
    :title="titleType"
    v-loading="loading"
  >
    <el-form
      ref="formRef"
      :model="ruleForm"
      :rules="rules"
      label-width="90px"
      style="margin-top: -10px"
      class="demo-ruleForm"
      status-icon
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="按钮" prop="action_code">
            <el-select
              v-model="ruleForm.action_code"
              style="width: 100%"
              :disabled="TYPE === 'view'"
              placeholder="按钮"
            >
              <el-option
                v-for="(si, sii) in btnList"
                :key="'action_code' + si.code + sii"
                :label="si.name"
                :value="si.code + ''"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="状态" prop="status">
            <el-radio-group
              v-model="ruleForm.status"
              :disabled="TYPE === 'view'"
            >
              <el-radio
                v-for="(si, sii) in STATUS_OPTIONS"
                :key="'card_id' + si.id + sii"
                :label="si.id + ''"
                >{{ si.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item></el-col
        >
      </el-row>
      <div class="flex justify-end">
        <el-button
          v-if="TYPE !== 'view'"
          :loading="loading"
          :disabled="loading"
          type="primary"
          @click="handleSave"
          >保存</el-button
        >
        <el-button @click="showModel = false">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
