<template>
    <view class="mt-[32rpx] p-[32rpx] bg-white">
        <view class="flex justify-between items-center mb-[20rpx]">
            <text class="text-[44rpx] font-bold">跟进信息</text>
            <text class="text-[28rpx]" @click="handleClear">全部清空</text>
        </view>
        <TForm ref="tForm" :model="form" :rules="rules" errorType="toast">
            <TFormItem prop="studentName">
                <TInputField
                    v-model="form.studentName"
                    label="客户姓名"
                    placeholder="请填写客户姓名（必填）"
                    inputAlign="left"
                />
            </TFormItem>
            <TFormItem prop="phone">
                <TInputField
                    v-model="form.phone"
                    label="电话"
                    placeholder="请填写电话（必填）"
                    inputAlign="left"
                />
            </TFormItem>
            <TFormItem prop="basicInformation">
                <TTextareaField
                    v-model="form.basicInformation"
                    label="基本情况"
                    placeholder="请填写基本情况（必填）"
                    autoHeight
                />
            </TFormItem>
        </TForm>
        <u-button
            class="btn"
            color="#0E66FB"
            shape="circle"
            :loading="loading"
            @click="handleConfirm"
        >
            确认
        </u-button>
    </view>
</template>

<script setup lang="ts">
import { apiAddCluse } from '@/api/clue'
import { toast, validate } from '@/utils/util'
import { validateContact } from '@/utils/validate'
import { ref } from 'vue'

const tForm = ref()
const form = ref({
    studentName: '',
    phone: '',
    basicInformation: ''
})
const loading = ref(false)
const rules = {
    studentName: [{ required: true, message: '请填写客户姓名', trigger: 'blur' }],
    phone: [
        { required: true, message: '请填写电话', trigger: 'blur' },
        { validator: validateContact, trigger: 'blur' }
    ],
    basicInformation: [{ required: true, message: '请填写基本情况', trigger: 'blur' }]
}
const handleConfirm = () => {
    tForm.value
        .validate()
        .then(async valid => {
            if (valid) {
                loading.value = true
                try {
                    await apiAddCluse(form.value)
                    toast('添加成功')
                    handleClear()
                } catch (error) {}
                loading.value = false
            }
        })
        .catch(() => {})
}
const handleClear = () => {
    tForm.value.resetFields()
}
</script>

<style scoped lang="scss">
:deep(.btn) {
    button {
        @apply h-[88rpx] px-[60rpx] mt-[60rpx] mb-[28rpx];
    }
}
</style>
