<template>
    <view class="client-info">
        <view class="form">
            <TForm ref="tForm" :model="form" :rules="rules" errorType="toast">
                <TCard title="客户信息">
                    <TFormItem prop="clientNumber">
                        <TInputField
                            v-model="form.clientNumber"
                            label="客户编号"
                            placeholder="请输入客户编号(唯一)"
                            inputAlign="left"
                        />
                    </TFormItem>
                    <TFormItem prop="name">
                        <TInputField
                            v-model="form.name"
                            label="客户名称"
                            placeholder="请输入客户名称"
                            inputAlign="left"
                        />
                    </TFormItem>
                    <TFormItem prop="contact">
                        <TInputField
                            v-model="form.contact"
                            label="联系人"
                            placeholder="请输入联系人"
                            inputAlign="left"
                        />
                    </TFormItem>
                    <TFormItem prop="sex">
                        <TRadioField
                            v-model="form.sex"
                            label="性别"
                            placeholder="请选择性别"
                            :groupList="groupList"
                        />
                    </TFormItem>
                    <TFormItem prop="mobile">
                        <TInputField
                            v-model="form.mobile"
                            label="联系电话"
                            placeholder="请输入联系电话"
                            inputAlign="left"
                        />
                    </TFormItem>
                </TCard>
                <TCard title="联系地址">
                    <TFormItem prop="area">
                        <TSelectField
                            label="所属区域"
                            placeholder="请选择所属区域"
                            @onClick="handleToggle"
                        />
                    </TFormItem>
                    <TFormItem prop="address">
                        <TInputField
                            v-model="clientNumber"
                            label="详细地址"
                            placeholder="请输入详细地址信息"
                            inputAlign="left"
                        />
                    </TFormItem>
                </TCard>
                <TCard>
                    <TTextareaField
                        v-model="remark"
                        label="备注"
                        placeholder="请输入备注信息，选填"
                    />
                </TCard>
            </TForm>
        </view>
        <view class="btn">
            <u-button
                class="button"
                text="提交"
                color="#0e66fb"
                shape="circle"
                @click="handleSubmit"
            ></u-button>
        </view>
    </view>
    <!-- <AdvanceCityPicker
        :show="show"
        @close-city-picker="handleToggle(true)"
        @handle-select-city="handleSelectCity"
    /> -->
</template>

<script setup lang="ts">
import { onLoad, onReady } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useToggle } from '@/hooks/useLockFn'

const { show, handleToggle } = useToggle()

const form = ref({
    clientNumber: '',
    name: '',
    sex: 1,
    contact: '',
    mobile: '',
    area: 'ff',
    address: '',
    remark: ''
})
const rules = {
    clientNumber: [{ required: true, message: '请输入客户编号', trigger: 'blur' }],
    name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
    contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
    mobile: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
    area: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
    address: [{ required: true, message: '请输入详细地址信息', trigger: 'blur' }]
}
const clientNumber = ref('')
const groupList = [
    { label: '男', value: 1 },
    { label: '女', value: 2 }
]
const remark = ref('')
const type = ref('add')
const tForm = ref()
// 选中所属区域
const handleSelectCity = val => {
    console.log(val)
}
const handleSubmit = () => {
    tForm.value
        .validate()
        .then(valid => {
            if (valid) {
                console.log('校验通过')
            }
        })
        .catch(() => {})
}
// 设置标题
onLoad(option => {
    type.value = option?.type || 'add'
})
onReady(() => {
    uni.setNavigationBarTitle({
        title: type.value === 'add' ? '新增客户' : '编辑客户'
    })
})
</script>

<style lang="scss" scoped>
:deep(.u-textarea) {
    padding: 0 18rpx 18rpx 0 !important;
}
:deep(.u-textarea__count) {
    background: transparent !important;
}
:deep(.u-radio-group) {
    display: flex;
    gap: 60rpx;
}
</style>
