<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    label-width="100px"
    v-loading="formLoading"
  >
    <el-form-item label="国家" prop="country">
      <el-input v-model="formData.country" placeholder="请输入国家" />
    </el-form-item>
    <el-form-item label="语言" prop="language">
      <el-input v-model="formData.language" placeholder="请输入语言" />
    </el-form-item>
    <el-form-item label="品牌名称" prop="name">
      <el-input v-model="formData.name" placeholder="品牌名称" />
    </el-form-item>
    <el-form-item label="Logo URL" prop="logo">
      <UploadImg v-model="formData.logo" :limit="1" :is-show-tip="false" />
    </el-form-item>
    <el-form-item label="Favicon URL" prop="favicon">
      <UploadImg v-model="formData.favicon" :limit="1" :is-show-tip="false" />
    </el-form-item>
    <el-form-item label="页面标题" prop="title">
      <el-input v-model="formData.title" placeholder="请输入页面标题" />
    </el-form-item>
    <el-form-item label="页面描述">
      <el-input v-model="formData.description" height="150px" />
    </el-form-item>
    <el-form-item label="关键词" prop="keywords">
      <el-input v-model="formData.keywords" placeholder="请输入关键词" />
    </el-form-item>
    <el-form-item label="主题颜色" prop="themeColor">
      <el-input v-model="formData.themeColor" placeholder="请输入主题颜色" />
    </el-form-item>
    <el-form-item label="字体" prop="font">
      <el-input v-model="formData.font" placeholder="请输入字体" />
    </el-form-item>
    <el-form-item label="额外CSS URL" prop="cssUrl">
      <el-input v-model="formData.cssUrl" placeholder="请输入CSS URL" />
    </el-form-item>
    <el-form-item label="额外JS URL" prop="jsUrl">
      <el-input v-model="formData.jsUrl" placeholder="请输入JS URL" />
    </el-form-item>
    <el-button @click="submitForm" type="primary">保 存</el-button>
  </el-form>
</template>

<script setup lang="ts" name="H5Pages">
import * as H5PagesApi from "@/api/member/h5Pages";
import { reactive, ref } from "vue";

const formLoading = ref(false)

const formData = ref({
  id: 'undefined',
  country: undefined,
  language: undefined,
  name: undefined,
  logo: undefined,
  favicon: undefined,
  title: undefined,
  description: undefined,
  keywords: undefined,
  themeColor: undefined,
  font: undefined,
  cssUrl: undefined,
  jsUrl: undefined
})

const formRules = reactive({
  country: [{ required: true, message: '国家不能为空', trigger: 'blur' }],
  language: [{ required: true, message: '语言不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
})

const submitForm = async () => {
  const res = await H5PagesApi.createH5Pages(formData.value)
  if (res) {
    ElMessage.success('保存成功')
  }
}

const getH5PageConfig = async () => {
  const res = await H5PagesApi.getH5Pages()
  if (res) {
    formData.value = res
  }
}

/** 初始化 **/
onMounted(() => {
  getH5PageConfig()
})
</script>
