<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="contact" label="联系方式">
                    <template #label>
                        <span class="el-form-item__label">联系方式</span>
                    </template>
                    <el-input v-model="form.contact" placeholder="请输入联系方式，如邮箱或电话" />
                </el-form-item>
            </el-col>
        </el-row>

        <!-- 官网 -->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item prop="website" label="官网">
                    <template #label>
                        <span class="el-form-item__label">官网</span>
                    </template>
                    <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文档地址">
                    <template #label>
                        <span class="el-form-item__label">API文档地址</span>
                    </template>
                    <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="定价页面地址">
                    <template #label>
                        <span class="el-form-item__label">定价页面地址</span>
                    </template>
                    <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-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                    <el-input
                            v-model="form.remark"
                            type="textarea"
                            :rows="4"
                            placeholder="请输入备注信息"
                    />
                </el-form-item>
            </el-col>
        </el-row>

    </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// ================== 表单数据类型定义 ==================
interface Form {
    contact: string
    website: string
    apiDocUrl: string
    pricingUrl: string
    description: string
    remark: string
}
const dialogVisible = ref(true)
// ================== 表单数据初始化 ==================
const form = ref<Form>({
    contact: '',
    website: '',
    apiDocUrl: '',
    pricingUrl: '',
    description: '',
    remark: ''
})

// ================== 表单验证规则 ==================
const rules = {
    contact: [
        { 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' }
    ]
}

// ================== 表单引用 ==================
const formRef = ref()

// ================== 提交方法 ==================
const submitForm = () => {
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            ElMessage.success('验证通过，准备提交')
            console.log('提交数据：', form.value)
            // 这里可以调用 API 提交数据
        } else {
            ElMessage.error('请检查表单输入')
            return false
        }
    })
}
</script>

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