<template>
    <view class="bg-[#FAFAFE]">
        <view class="bg-white px-[32rpx]">
            <TForm ref="tForm" :model="form" :rules="rules" errorType="toast">
                <TFormItem prop="recruitTeacherName">
                    <TInputField
                        v-model="form.recruitTeacherName"
                        label="发布人"
                        placeholder=""
                        inputAlign="left"
                        readonly
                        :required="false"
                        :labelWidth="100"
                    />
                </TFormItem>
                <TFormItem prop="studentName">
                    <TInputField
                        v-model="form.studentName"
                        label="客户姓名"
                        placeholder=""
                        inputAlign="left"
                        readonly
                        :required="false"
                        :labelWidth="100"
                    />
                </TFormItem>
                <TFormItem prop="phone">
                    <TInputField
                        v-model="form.phone"
                        label="电话"
                        placeholder=""
                        inputAlign="left"
                        readonly
                        :required="false"
                        :labelWidth="100"
                    />
                </TFormItem>
                <TFormItem prop="basicInformation">
                    <TTextareaField
                        v-model="form.basicInformation"
                        label="基本情况"
                        placeholder=""
                        autoHeight
                        readonly
                        :required="false"
                        :labelWidth="100"
                    />
                </TFormItem>
                <TFormItem prop="state">
                    <TMultiSelect
                        v-model="form.state"
                        label="状态"
                        :groupList="statusList"
                        :labelWidth="100"
                    />
                </TFormItem>
            </TForm>
        </view>
        <view class="px-[60rpx]">
            <u-button
                class="btn"
                color="#0E66FB"
                shape="circle"
                :loading="loading"
                @click="handleSubmit"
            >
                提交{{ form.state }}
            </u-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { apiAddCluseProgress, apiCluseEdit } from '@/api/clue'
import { stateEnum } from '@/enums'
import { useClueDetail } from '@/hooks/useCommon'
import { toast } from '@/utils/util'
import { onLoad } from '@dcloudio/uni-app'
import { shallowRef } from 'vue'
import { ref } from 'vue'

const { fetchClueDetail, clueDetailInfo } = useClueDetail()

const id = ref('')

const tForm = ref()
const form = ref({
    id: '',
    recruitTeacherName: '',
    studentName: '',
    phone: '',
    basicInformation: '',
    state: null
})
const rules = {
    state: [{ required: true, message: '请选择状态' }]
}
const statusList = shallowRef([
    { label: '账号已添加', value: stateEnum.ADD_RELATION },
    { label: '账号不存在', value: stateEnum.NO_EXIST },
    { label: '账号未通过', value: stateEnum.UN_PASS }
])
onLoad(async option => {
    if (option?.id) {
        id.value = option.id
        await fetchClueDetail(id.value)
        setFormData()
    }
})
const loading = ref(false)
const handleSubmit = () => {
    tForm.value
        .validate()
        .then(async valid => {
            if (valid) {
                loading.value = true
                try {
                    const data = {
                        id: form.value.id,
                        state: form.value.state
                    }
                    await apiAddCluseProgress(data)
                    toast('添加进展成功')
                    uni.navigateBack()
                    uni.$emit('refreshPage')
                } catch (error) {}
            }
        })
        .catch(() => {})
    loading.value = false
}
const setFormData = () => {
    for (const key in clueDetailInfo.value) {
        if (Object.prototype.hasOwnProperty.call(form.value, key)) {
            form.value[key] = clueDetailInfo.value[key]
        }
    }
}
</script>

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