<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="120"
                    />
                </TFormItem>
                <TFormItem prop="studentName">
                    <TInputField
                        v-model="form.studentName"
                        label="客户姓名"
                        placeholder=""
                        inputAlign="left"
                        readonly
                        :required="false"
                        :labelWidth="120"
                    />
                </TFormItem>
                <TFormItem prop="phone">
                    <TInputField
                        v-model="form.phone"
                        label="电话"
                        placeholder=""
                        inputAlign="left"
                        readonly
                        :required="false"
                        :labelWidth="120"
                    />
                </TFormItem>
                <TFormItem prop="basicInformation">
                    <TTextareaField
                        v-model="form.basicInformation"
                        label="基本情况"
                        placeholder=""
                        autoHeight
                        readonly
                        :required="false"
                        :labelWidth="120"
                    />
                </TFormItem>
                <TFormItem prop="state">
                    <TInputField
                        v-model="parseStatusText"
                        label="状态"
                        placeholder=""
                        inputAlign="left"
                        readonly
                        :required="false"
                        :labelWidth="120"
                    />
                </TFormItem>
                <TFormItem prop="isConversion">
                    <TSwitchField
                        v-model="form.isConversion"
                        label="是否转化成功"
                        :labelWidth="120"
                    />
                </TFormItem>
                <TFormItem prop="remark">
                    <TTextareaField
                        v-model="form.remark"
                        label="备注"
                        placeholder="请填写备注（选填）"
                        autoHeight
                        readonly
                        :required="false"
                        :labelWidth="120"
                    />
                </TFormItem>
            </TForm>
        </view>
        <view class="px-[60rpx]">
            <u-button
                class="btn"
                color="#0E66FB"
                shape="circle"
                :loading="loading"
                @click="handleSubmit"
            >
                提交
            </u-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'
import { useClueDetail } from '@/hooks/useCommon'
import { optionsMap } from '@/config/options'
import { apiCompleteCluse } from '@/api/clue'
import { toast } from '@/utils/util'

const { fetchClueDetail, clueDetailInfo } = useClueDetail()

const id = ref('')

const tForm = ref()
const form = ref({
    id: '',
    recruitTeacherName: '',
    studentName: '',
    phone: '',
    basicInformation: '',
    state: 1,
    isConversion: 0,
    remark: ''
})
const rules = {
    isConversion: [{ required: true, message: '请选择是否转化成功' }]
}
const parseStatusText = computed(
    () => optionsMap.stateOptions.find(item => item.value == form.value.state)?.label
)

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,
                        isConversion: form.value.isConversion,
                        remark: form.value.remark
                    }
                    await apiCompleteCluse(data)
                    toast('转化完成')
                    uni.navigateBack()
                    uni.$emit('refreshPage')
                } catch (error) {}
            }
        })
        .catch(() => {})
}
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>
