<template>
  <el-form
    ref="seoFormRef"
    :model="seoForm"
    :rules="seoRules"
    label-width="120px"
    style="max-width: 600px"
  >
    <el-form-item label="SEO标题" prop="seoTitle">
      <el-input
        v-model="seoForm.seoTitle"
        placeholder="请输入SEO标题"
      />
    </el-form-item>
    <el-form-item label="SEO关键词" prop="seoKeywords">
      <el-input
        v-model="seoForm.seoKeywords"
        placeholder="多个关键词用逗号分隔"
      />
    </el-form-item>
    <el-form-item label="SEO描述" prop="seoDescription">
      <el-input
        v-model="seoForm.seoDescription"
        type="textarea"
        :rows="3"
        placeholder="请输入SEO描述"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="saveSeoSettings">保存设置</el-button>
      <el-button @click="resetSeoForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";

const seoFormRef = ref<FormInstance>();

const seoForm = reactive({
  seoTitle: "",
  seoKeywords: "",
  seoDescription: ""
});

const seoRules: FormRules = {
  seoTitle: [{ required: true, message: "请输入SEO标题", trigger: "blur" }]
};

const saveSeoSettings = async () => {
  if (!seoFormRef.value) return;
  await seoFormRef.value.validate((valid) => {
    if (valid) {
      // TODO: 保存SEO设置
      ElMessage.success("SEO设置保存成功");
    }
  });
};

const resetSeoForm = () => {
  seoForm.seoTitle = "";
  seoForm.seoKeywords = "";
  seoForm.seoDescription = "";
};

defineExpose({
  seoForm
});
</script>
