<template>
  <el-form :model="form" label-position="top" label-width="120px" :rules="rules" ref="formRef">
    <!-- 联系方式 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item prop="contactInfo" label="联系方式">
          <el-input v-model="form.contactInfo" placeholder="请输入联系方式，如邮箱或电话" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 官网 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item prop="website" label="官网">
          <el-input v-model="form.website" placeholder="请输入官网地址，如：https://openai.com" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- API文档地址 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item prop="apiDocUrl" label="API文档地址">
          <el-input v-model="form.apiDocUrl" placeholder="请输入API文档地址" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 定价页面地址 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item prop="pricingUrl" label="定价页面地址">
          <el-input v-model="form.pricingUrl" placeholder="请输入定价页面URL" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 描述 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item prop="description" label="描述">
          <el-input
              v-model="form.description"
              type="textarea"
              :rows="4"
              placeholder="请输入服务商描述"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// ================== 表单数据定义 ==================
const model = defineModel()

// 响应式表单代理
const form = computed({
  get: () => model.value,
  set: (value) => (model.value = value)
})

// ================== 表单验证规则 ==================
const rules = {
  contactInfo: [
    { required: true, message: '请输入联系方式，如邮箱或电话', trigger: 'blur' }
  ],
  website: [
    { required: true, message: '请输入官网地址', trigger: 'blur' },
    { type: 'url', message: '请输入合法的网址', trigger: 'blur' }
  ],
  apiDocUrl: [
    { required: true, message: '请输入API文档地址', trigger: 'blur' },
    { type: 'url', message: '请输入合法的网址', trigger: 'blur' }
  ],
  pricingUrl: [
    { required: true, message: '请输入定价页面地址', trigger: 'blur' },
    { type: 'url', message: '请输入合法的网址', trigger: 'blur' }
  ],
  description: [
    { required: false, message: '请输入服务商描述', trigger: 'blur' }
  ]
}
</script>

<style scoped lang="scss">
.input-tips {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
</style>
