<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]" @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 { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useClueDetail } from '@/hooks/useCommon'
import { apiEditClue } from '@/api/clue'
import { toast } from '@/utils/util'

const { fetchClueDetail, clueDetailInfo } = useClueDetail()

const tForm = ref()
const form = ref({
    id: '',
    studentName: '',
    phone: '',
    basicInformation: ''
})
const rules = {
    studentName: [{ required: true, message: '请填写客户姓名', trigger: 'blur' }],
    phone: [{ required: true, message: '请填写电话', trigger: 'blur' }],
    basicInformation: [{ required: true, message: '请填写基本情况', trigger: 'blur' }]
}
const loading = ref(false)
const handleConfirm = () => {
    tForm.value
        .validate()
        .then(async valid => {
            if (valid) {
                loading.value = true
                try {
                    await apiEditClue(form.value)
                    toast('修改成功')
                    uni.navigateBack()
                    uni.$emit('refreshPage')
                } catch (error) {}
                loading.value = false
            }
        })
        .catch(() => {})
}
const handleClear = () => {
    tForm.value.resetFields()
}
onLoad(async option => {
    if (option?.id) {
        await fetchClueDetail(option.id)
        setFormData()
    }
})
const setFormData = () => {
    for (const key in clueDetailInfo.value) {
        if (Object.prototype.hasOwnProperty.call(form.value, key)) {
            form.value[key] = clueDetailInfo.value[key] as any
        }
    }
}
</script>

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