<script setup lang="ts">
import { ref, unref, computed, reactive } from "vue";
import { ElForm } from "element-plus";

import { ImageUpload } from "/@/components/Upload";
import { STYLE_OPTIONS, JUMP_OPTIONS } from "/@/config/status";
import type { FormInstance, FormRules } from "element-plus";
const ruleFormRef = ref<FormInstance>();
const emit = defineEmits(["push", "update"]);

const defaultData = {
  img: "",
  jump_type: "",
  jump_param: "",
  good_id: "",
  title: "",
  style_type: ""
};
const titleList = ["轮播", "产品宣传", "产品展示", "产品优势"];

const isUpdate = ref(false);
const visible = ref(false);
const dataType = ref("");
const formRef = ref<InstanceType<typeof ElForm> | null>(null);
const updateIndex = ref("0");
const formData = ref<Record<string, any>>({ ...defaultData });

let projectFormRules = reactive<FormRules>({
  img: [{ trigger: "change", required: true, message: "请上传图片" }],
  jump_type: [
    {
      trigger: "change",
      required: true,
      message: "请选择跳转类型"
    }
  ],

  jump_param: [
    {
      trigger: "blur",
      required: true,
      message: "请输入跳转地址"
    }
  ],
  style_type: [
    {
      trigger: "change",
      required: true,
      message: "请选择样式类型"
    }
  ],
  title: [
    {
      trigger: "blur",
      required: true,
      message: "请输入名称"
    }
  ]
});

const title = computed(() => {
  return `${isUpdate.value ? "修改" : "添加"}${
    titleList[Number(dataType.value) - 1]
  }数据`;
});

function handleConfirm() {
  formRef.value.validate(isValid => {
    if (!isValid) return;

    emit(
      isUpdate.value ? "update" : "push",
      unref(formData),
      unref(updateIndex),
      unref(dataType)
    );

    visible.value = false;
  });
}
function jump_type_change(e) {
  console.log(projectFormRules);
  projectFormRules["jump_param"][0]["required"] = e + "" !== "1";
  console.log(projectFormRules);
}

defineExpose({
  onDisplay: (index?: string, type?: string, data?: Record<string, any>) => {
    console.log(index);
    console.log(type);
    dataType.value = type ?? "1";
    projectFormRules["style_type"][0]["required"] = type + "" === "4";
    if (data) {
      data.cat_info = [];
      formData.value = data;
      updateIndex.value = index ?? "0";
    }

    visible.value = true;
    isUpdate.value = !!data;
  }
});
</script>

<template>
  <ElDialog
    center
    :title="title"
    v-model="visible"
    @close="() => (formData = { ...defaultData })"
  >
    <ElForm
      ref="formRef"
      :model="formData"
      width="500px"
      :rules="projectFormRules"
      label-width="100px"
    >
      <ElFormItem label="图片" prop="img">
        <ImageUpload
          v-model:url="formData.img"
          :descs="['小于1Mb']"
          :types="['png', 'jpg', 'jpeg']"
        />
      </ElFormItem>
      <ElFormItem label="标题" prop="title" v-if="dataType === '2'">
        <ElInput placeholder="标题" v-model="formData.title" />
      </ElFormItem>
      <ElFormItem label="跳转类型" prop="jump_type">
        <el-select
          v-model="formData.jump_type"
          @change="jump_type_change"
          style="width: 100%"
          placeholder="跳转类型"
        >
          <el-option
            v-for="(item, index) in JUMP_OPTIONS"
            :label="item.label"
            :value="item.id"
            :key="item.id + index"
          />
        </el-select>
      </ElFormItem>
      <ElFormItem label="跳转地址" prop="jump_param">
        <ElInput placeholder="跳转地址" v-model="formData.jump_param" />
      </ElFormItem>
      <ElFormItem label="样式类型" prop="style_type" v-if="dataType === '4'">
        <el-select
          v-model="formData.style_type"
          style="width: 100%"
          placeholder="样式类型"
        >
          <el-option
            v-for="(item, index) in STYLE_OPTIONS"
            :label="item.label"
            :value="item.id"
            :key="item.id + index"
          />
        </el-select>
      </ElFormItem>
      <ElFormItem>
        <div class="w-full flex justify-end">
          <ElButton type="primary" @click="handleConfirm">保存</ElButton>
          <ElButton @click="() => (visible = false)">取消</ElButton>
        </div>
      </ElFormItem>
    </ElForm>
  </ElDialog>
</template>
