<template>
    <view class="client-device">
        <view class="form">
            <TCard title="设备信息">
                <TInputField
                    v-model="clientNumber"
                    label="设备编号"
                    placeholder="请输入设备编号(唯一)"
                    inputAlign="left"
                />
                <TInputField
                    v-model="clientNumber"
                    label="设备名称"
                    placeholder="请输入设备名称"
                    inputAlign="left"
                />
                <TInputField
                    v-model="clientNumber"
                    label="设备型号"
                    placeholder="请输入设备型号"
                    inputAlign="left"
                />
                <TInputField
                    v-model="clientNumber"
                    label="设备规格"
                    placeholder="请输入设备规格"
                    inputAlign="left"
                />
                <TInputField
                    v-model="clientNumber"
                    label="设备厂家"
                    placeholder="请输入设备厂家"
                    inputAlign="left"
                />
            </TCard>
            <TCard title="设备地址">
                <TMapField
                    label="地图选址"
                    placeholder="请选择地址"
                    v-model="locationName"
                    :address="locationAddress"
                    @onClick="handleSelectAddress"
                />
                <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>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const clientNumber = ref('')
const remark = ref('')
const locationName = ref('')
const locationAddress = ref('')
const reg =
    /(?<province>[^省]+省|.+自治区|上海|北京|天津|重庆)(?<city>[^市]+市|.+自治州)(?<district>[^区县]+区|[^县]+县)/
const handleSelectAddress = () => {
    uni.chooseLocation({
        success: res => {
            const { longitude, latitude, name, address } = res
            locationName.value = name
            locationAddress.value = address.match(reg) != null ? address.match(reg)![0] : ''
        }
    })
}
</script>

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