<template>
    <div class="flex flex-col bg-[#F5F5F5] pt-[30rpx]">
        <div class="mb-[40rpx] px-[30rpx]">
            <div class="text-[32rpx] font-400 text-[#666] mb-[20rpx]">当前定位</div>
            <div class="rounded-[20rpx] bg-white flex items-center">
                <div class="py-[30rpx] pl-[30rpx] flex-1 flex flex-col min-w-0">
                    <p class="text-[36rpx] font-600 truncate">{{ userStore.deviceLocation.address }}</p>
                    <ul class="flex items-center text-[32rpx] text-[#666] font-400 mt-[20rpx]">
                        <li>{{ userStore.deviceLocation.province }}</li>
                        <li>-</li>
                        <li>{{ userStore.deviceLocation.city || userStore.deviceLocation.road }}</li>
                        <li>-</li>
                        <li>{{ userStore.deviceLocation.county }}</li>
                    </ul>
                </div>
                <img src="/images/map/map-icon.png" alt="" class="h-[148rpx] w-[192rpx] shrink-0" @click="handleRelocation">
            </div>
        </div>
        <div class="flex-auto flex flex-col min-h-0">
            <div class="text-[32rpx] font-400 mb-[20rpx] text-[#666] px-[30rpx]">我的地址</div>
            <AddressManagement class="flex-auto min-h-0"/>
        </div>
    </div>
</template>

<script lang="ts" setup>
import AddressManagement from '../mine/addressManagement.vue';
import { useUserStore } from '@/store/user';
import { useRouter } from 'vue-router';

const userStore = useUserStore()
const router = useRouter()

const handleRelocation = () => {
    router.back()
}
</script>