<template>
    <view class="bg-[#FAFAFE]">
        <view class="bg-white px-[32rpx]">
            <TForm ref="tForm" :model="form" :rules="rules" errorType="toast">
                <TFormItem prop="publishName">
                    <TInputField
                        v-model="form.publishName"
                        label="发布人"
                        placeholder=""
                        inputAlign="left"
                        readonly
                        :required="false"
                        :labelWidth="120"
                    />
                </TFormItem>
                <TFormItem prop="clientName">
                    <TInputField
                        v-model="form.clientName"
                        label="客户姓名"
                        placeholder=""
                        inputAlign="left"
                        readonly
                        :required="false"
                        :labelWidth="120"
                    />
                </TFormItem>
                <TFormItem prop="mobile">
                    <TInputField
                        v-model="form.mobile"
                        label="电话"
                        placeholder=""
                        inputAlign="left"
                        readonly
                        :required="false"
                        :labelWidth="120"
                    />
                </TFormItem>
                <TFormItem prop="desc">
                    <TTextareaField
                        v-model="form.desc"
                        label="基本情况"
                        placeholder=""
                        autoHeight
                        readonly
                        :required="false"
                        :labelWidth="120"
                    />
                </TFormItem>
                <TFormItem prop="status">
                    <TInputField
                        v-model="parseStatusText"
                        label="状态"
                        placeholder=""
                        inputAlign="left"
                        readonly
                        :required="false"
                        :labelWidth="120"
                    />
                </TFormItem>
                <TFormItem prop="isComplete">
                    <TSwitchField
                        v-model="form.isComplete"
                        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" @click="handleSubmit">
                提交
            </u-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { computed } from 'vue'
import { shallowRef } from 'vue'
import { ref } from 'vue'

const id = ref('')

const tForm = ref()
const form = ref({
    publishName: '张三',
    clientName: '张三',
    mobile: '18138952909',
    desc: '学生爸爸接电话，学生高三毕业，300多分，家长不清楚学生收到录取通知，家长说学生不读书了，我让家长先问问学生对未来的规划先和学生沟通一下，家长同意我们加他微信发专业资料给他看看，可以在微信上问问学生具体情况。推荐3+2，给家长发一下学校简介和专业资料。',
    status: 1,
    isComplete: 0,
    remark: ''
})
const rules = {
    isComplete: [{ required: true, message: '请选择是否转化成功' }]
}
const statusList = shallowRef([
    { label: '账号已添加', value: 1 },
    { label: '账号不存在', value: 2 },
    { label: '账号未通过', value: 3 }
])
const parseStatusText = computed(
    () => statusList.value.find(item => item.value == form.value.status)?.label
)

onLoad(option => {
    if (option?.id) {
        id.value = option.id
    }
})
const handleSubmit = () => {
    tForm.value
        .validate()
        .then(valid => {
            if (valid) {
                console.log('校验通过', form.value)
            }
        })
        .catch(() => {})
}
</script>

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