<template>
  <el-dialog v-model="visible" :title="dialogTitle" width="680px" destroy-on-close>
    <div class="dialog-form">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-suffix="：">
        <el-form-item label="场景分类" prop="name">
          <el-input v-model="form.name" placeholder="请输入场景分类" clearable />
        </el-form-item>
        <el-form-item v-if="parentSceneName" label="父级场景">
          <el-input v-model="parentSceneName" disabled />
        </el-form-item>
        <el-form-item label="展示图片">
          <UploadImg v-model:image-url="form.imgUrl" :drag="false" width="220px" height="140px" :file-size="3">
            <template #tip> 支持 jpg/png，大小不超过 3MB </template>
          </UploadImg>
        </el-form-item>
        <el-form-item label="是否启用" prop="status">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入描述" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="visible = false"> 取 消 </el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit"> 保 存 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, nextTick } from "vue";
import UploadImg from "@/components/Upload/Img.vue";
import type { FormInstance } from "element-plus";

interface DialogOptions {
  title: string;
  type: string;
  parentId?: string | number;
  parentName?: string;
  row?: Record<string, any>;
  onSubmit: (params: Record<string, any>) => Promise<any>;
}

const visible = ref(false);
const loading = ref(false);
const formRef = ref<FormInstance>();
const options = ref<DialogOptions>({
  title: "",
  type: "",
  onSubmit: async () => Promise.resolve()
});

const form = reactive({
  id: "",
  name: "",
  status: 1,
  remark: "",
  imgUrl: "",
  parentId: "",
  parentName: ""
});
const parentSceneName = ref("");

const rules = reactive({
  name: [{ required: true, message: "请输入场景分类", trigger: "blur" }]
});

const dialogTitle = computed(() => options.value.title);

const resetForm = () => {
  form.id = "";
  form.name = "";
  form.status = 1;
  form.remark = "";
  form.imgUrl = "";
  form.parentId = "";
  parentSceneName.value = "";
};

const open = (payload: DialogOptions) => {
  resetForm();
  options.value = payload;
  if (payload.row) {
    Object.assign(form, payload.row);
    form.imgUrl = payload.row.imgUrl || "";
  }
  // 新增不需要回显名字
  if (payload.type === "add") {
    form.parentName = form.name;
    form.name = "";
    form.imgUrl = "";
  }
  visible.value = true;
  nextTick(() => formRef.value?.clearValidate());
};

const emits = defineEmits<{
  success: [];
}>();

const handleSubmit = () => {
  formRef.value?.validate(async valid => {
    if (!valid) return;
    loading.value = true;
    try {
      await options.value.onSubmit({ ...form });
      emits("success");
      visible.value = false;
    } finally {
      loading.value = false;
    }
  });
};

defineExpose({
  open
});
</script>

<style scoped lang="scss">
.dialog-form {
  max-width: 520px;
  margin: 0 auto;
}
</style>
