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

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

const tForm = ref()
const form = ref({
    clientName: '',
    mobile: '',
    desc: ''
})
const rules = {
    clientName: [{ required: true, message: '请填写客户姓名', trigger: 'blur' }],
    mobile: [{ required: true, message: '请填写电话', trigger: 'blur' }],
    desc: [{ required: true, message: '请填写基本情况', trigger: 'blur' }]
}
const handleConfirm = () => {
    tForm.value
        .validate()
        .then(valid => {
            if (valid) {
                console.log('校验通过')
            }
        })
        .catch(() => {})
}
</script>

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