<template>
    <view class="client-contact">
        <view class="form">
            <TCard title="联系人信息" class="card">
                <TInputField
                    v-model="clientNumber"
                    label="姓名"
                    placeholder="请输入姓名"
                    inputAlign="left"
                />
                <TRadioField
                    v-model="sex"
                    label="性别"
                    placeholder="请选择性别"
                    :groupList="groupList"
                />
                <TInputField
                    v-model="clientNumber"
                    label="联系电话"
                    placeholder="请输入联系电话"
                    inputAlign="left"
                />
                <TSelectField label="角色" placeholder="请选择角色" @onClick="handleToggle" />
            </TCard>
            <TCard title="联系地址">
                <TSelectField
                    label="所属区域"
                    placeholder="请选择所属区域"
                    @onClick="handleToggle"
                />
                <TInputField
                    v-model="clientNumber"
                    label="详细地址"
                    placeholder="请输入详细地址信息"
                    inputAlign="left"
                />
            </TCard>
            <TCard>
                <TTextareaField v-model="remark" label="备注" placeholder="请输入备注信息，选填" />
            </TCard>
        </view>
        <view class="btn">
            <u-button text="提交" color="#0e66fb" shape="circle"></u-button>
        </view>
    </view>
    <!-- <AdvanceCityPicker
        :show="show"
        @close-city-picker="handleToggle(true)"
        @handle-select-city="handleSelectCity"
    /> -->
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useToggle } from '@/hooks/useLockFn'

const { show, handleToggle } = useToggle()

const clientNumber = ref('')
const sex = ref(1)
const groupList = [
    { label: '男', value: 1 },
    { label: '女', value: 2 }
]
const remark = ref('')
// 选中所属区域
const handleSelectCity = val => {
    console.log(val)
}
</script>

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