<script setup lang="ts">
import { computed, ref, unref, watch } from "vue";
import Description from "./description.vue";
import { BasicForm, FormItem } from "/@/components/BasicForm";
import { ActionType } from "/@/components/PageContent";
import { createBasicTitle } from "./utils/create-basic-title";
import { modalProps } from "./types";

const props = defineProps(modalProps);
const emit = defineEmits(["confirmBtnClick"]);

const formData = ref({});

const type = ref<ActionType>("preview");
const formRef = ref<InstanceType<typeof BasicForm>>(null);
const dialogVisible = ref(false);
const confirmLoading = ref(false);

//状态是否处于预览详情
const isPreview = computed(() => type.value === "preview");

const title = computed(() => {
  const basicTitle = createBasicTitle(type.value);
  return type.value === "preview"
    ? props.modalConfig.title + basicTitle
    : basicTitle + props.modalConfig.title;
});

const width = computed(() => {
  return props.modalConfig.width;
});

function changeDefaultInfo(formItems: Array<FormItem>, newVal: any) {
  for (const item of formItems) {
    switch (item.type) {
      case "checkbox":
        formData.value[item.field] = newVal[item.field]
          ? newVal[item.field].split(",")
          : [];
        break;
      case "img_upload_list":
        formData.value[item.field] = newVal[item.field]
          ? newVal[item.field]
          : [];
        break;
      case "number":
        formData.value[item.field] = newVal[item.field]
          ? newVal[item.field]
          : 0;
        break;
      default:
        formData.value[item.field] = newVal[item.field]
          ? newVal[item.field]
          : "";
        break;
    }
  }

  console.log(formData.value);
}

watch(
  () => props.defaultInfo,
  newVal => {
    const { formGroup, formItems } = props.modalConfig;

    if (!formGroup) return changeDefaultInfo(formItems, newVal);

    formGroup.forEach(item => changeDefaultInfo(item.formItems, newVal));
  }
);

function handleConfirmClick() {
  console.log(formData.value);
  formRef.value.validate(isVaild => {
    //表单校验通过派发事件
    isVaild && emit("confirmBtnClick", unref(type), unref(formData));
  });
}

defineExpose({
  dialogVisible,
  confirmLoading,
  type
});
</script>

<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    center
    destroy-on-close
    :width="width ? width : '1024px'"
  >
    <!-- 表单 -->
    <BasicForm
      ref="formRef"
      v-if="!prviewDescription"
      v-bind="modalConfig"
      v-model:form-data="formData"
      :disabled="isPreview"
    />

    <!-- 预览详情为描述列表 -->
    <Description
      v-if="prviewDescription"
      :config="modalConfig"
      :default-info="defaultInfo"
    >
      <template>
        <slot />
      </template>
    </Description>

    <!-- 保存/重置 -->
    <div class="flex justify-end" v-if="!isPreview">
      <el-button
        type="primary"
        :loading="confirmLoading"
        @click="handleConfirmClick"
        >保存</el-button
      >
      <el-button @click="dialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>
