<route lang="jsonc" type="page">
{
    "layout": "default",
    "style": {
        "navigationStyle": "custom"
    }
}
</route>


<template>
    <view class="pb-200rpx">
        <!-- 消息弹窗 -->
        <wd-message-box selector="wd-message-box-slot"></wd-message-box>

        <view>
			<navbar title="地址簿" custom-class='!bg-[#F6F7F8]' :leftArrow="false"></navbar>
		</view>

        <view class="">
            <!-- 地址为空显示 -->
            <view class="text-center" v-if="addressList.length === 0">
                <view class="mt-318rpx">
                    <wd-img width="260rpx" height='260rpx' :src="`${OSS}icon/icon_address_empty.png`"></wd-img>
                </view>
                <view class="text-28rpx leading-40rpx text-[#8A94A3] mt-18rpx">还没有地址，请尽快新建地址</view>
            </view>

            <view class="mx-30rpx mt-38rpx address-radio">
                <wd-radio-group v-model="addressId" shape="dot" >
                    <view class="bg-white rounded-16rpx px-40rpx py-30rpx mb-20rpx" v-for="(item, index) in addressList" :key="item.id">
                        <view class="">
                            <wd-radio :value="item.id" checked-color="#4C9F44">
                                <view class="flex items-center">
                                    <wd-img :src="`${OSS}icon/icon_location5.png`" width="40rpx" height="40rpx"></wd-img>
                                    <view class="ml-16rpx text-30rpx leading-42rpx text-[#303133]">位置{{ index + 1 }}</view>
                                </view>
                            </wd-radio>
                        </view>
                        <view class="line-2 text-26rpx leading-34rpx text-[#606266] mt-16rpx">
                            {{ item.address }}
                        </view>

                        <view class="flex items-center justify-end mt-24rpx text-26rpx leading-34rpx text-[##303133]">
                            <view class="w-112rpx h-48rpx bg-[#F6F7F8] text-center leading-48rpx mr-12rpx" @click="List.handleDeleteAddress(item.id)">删除</view>
                            <view class="w-112rpx h-48rpx bg-[#F6F7F8] text-center leading-48rpx" @click="List.handleEditAddress(item.id)">修改</view>
                        </view>
                    </view>
                </wd-radio-group>
            </view>
        </view>

        <!-- <view  
            v-if="addressList.length == 0"
            class="fixed bottom-70rpx left-0 right-0 bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx"
            @click="router.navigateTo('/bundle/address/add')">新建地址</view> -->

        <view class="bg-white fixed left-0 right-0 bottom-0 h-152rpx flex items-center px-30rpx">

            <view v-if="addressList.length == 0"  class="w-630rpx bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx" @click="router.navigateTo('/bundle/address/add')">新建地址</view>

            <view class="flex items-center justify-between w-full" v-if="addressList.length > 0">
                <view class="w-330rpx bg-[#F6F7F8] text-[#303133] h-90rpx text-center leading-90rpx rounded-8rpx" @click="router.navigateTo('/bundle/address/add')">新建地址</view>
                <view class="w-330rpx bg-[#4C9F44] text-[#FFFFFF] h-90rpx text-center leading-90rpx rounded-8rpx" @click="List.handleUpdateLocation">位置更新</view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    // import { getUserAddress } from '@/api/user'
    import type { IUserAddressListResult } from '@/api/types/user'
    import { router } from '@/utils/tools'
    import { useMessage } from 'wot-design-uni'
    import { getUserAddressList, deleteUserAddress, updateUserAddressLocation } from '@/api/user'
    import { useToast } from 'wot-design-uni'

    const OSS = inject('OSS')
    const from = ref<string>('')
    const toast = useToast()

    // 弹出框
    const message = useMessage('wd-message-box-slot')

    // 地址列表
    // const addressList = ref<IUserAddressListResult[]>([])

    // 选中的地址ID
    const addressId = ref<number>(0)
    const addressList = ref<Array<{id:number, address: string, status: number}>>([])

    onLoad((args) => {
        if (args.from) {
            from.value = args.from as string
        }

        // 监听地址列表刷新
        uni.$on('refreshAddressList', () => {
            List.handleInit()
        })

        // 初始化地址列表
        List.handleInit()
    })

    onUnload(() => {
        uni.$off('refreshAddressList')
    })

    const List = {
        /**
         * 初始化地址列表
         */
        handleInit: async () => {
            const res = await getUserAddressList()
            addressList.value = res
            addressId.value = addressList.value.filter(item => item.status === 1)[0]?.id || 0
        },

        /**
         * 编辑地址
         * @param id 地址ID
         */
        handleEditAddress: (id: number) => {
            router.navigateTo(`/bundle/address/add?id=${id}`)
        },

        /**
         * 选择地址
         * @param item 地址内容
         */
        handleChooseAddress(item: IUserAddressListResult) {
            if (from.value === 'reserve') {
                uni.$emit('chooseAddress', item)
                uni.navigateBack()
            }
        },

        /**
         * 删除地址
         */
        handleDeleteAddress: (id: number) => {
            message.confirm({
                title: '删除地址',
                msg: '确定要删除该地址吗？',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                cancelButtonProps: {
                    customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
                },
                confirmButtonProps: {
                    customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
                }
            }).then(async (res) => {
                // 点击确认按钮回调事件
                await deleteUserAddress(id)
                toast.show('删除成功')
                List.handleInit()
            }).catch((res) => { })
        },

        /**
         * 更新位置
         */
        handleUpdateLocation: async () => {
            if (addressId.value === 0) {
                toast.show('请选择地址')
                return
            }

            const res = await updateUserAddressLocation(addressId.value)
            toast.show('更新成功')
        }
    }
</script>


<style lang="scss">
    page {
		background-color: $cz-page-background;
	}

    .address-radio {
        :deep() {
            .wd-radio-group {
                background-color: transparent !important;
            }
        }
    }
</style>
