<template>
    <div class="flex flex-col ">
        <ul class="flex-auto bg-[#F5F5F5] p-[30rpx] overflow-auto">
          <nut-radio-group v-model="defaultAddress" class="grid! gap-[30rpx]" @change="handleRadioChange">
            <li v-for="(item, index) in address" :key="index" class="rounded-[20rpx] p-[30rpx] bg-white focus:outline outline-[4rpx] outline-[#28BEBB]" tabindex="0">
              <p class="text-[36rpx] font-600">{{ item.fullAddress }}</p>
              <div class="flex items-center text-[#333] text-[32rpx] font-400 my-[30rpx]">
                <span class="mr-[20rpx]">{{ item.name }}</span>
                <span class="">{{ item.phone }}</span>
              </div>
              <div class="flex items-center justify-between">
                <nut-radio :label="item.id">
                  <template #icon>
                      <div class="w-[36rpx] h-[36rpx] rounded-full border-solid border-[#999] border-[2rpx] mr-[10rpx]">
                      </div>
                      <span class="text-[#999] text-[32rpx] font-400">设为默认</span>
                  </template>
                  <template #checkedIcon>
                      <div class="w-[36rpx] h-[36rpx] rounded-full bg-[#2bbfbc] flex items-center justify-center mr-[10rpx]">
                          <Check color="white" class="w-[32rpx] h-[32rpx]" />
                      </div>
                      <span class="text-[#28BEBB] text-[32rpx] font-400">默认</span>
                  </template>
                </nut-radio>
                <div class="flex items-center">
                    <div class="flex items-center mr-[40rpx]" v-show="defaultAddress !== item.id">
                        <Trash2 class="w-[36rpx] h-[36rpx] text-[#ccc] mr-[10rpx]"/>
                        <span class="text-[32rpx] text-[#666] font-400" @click="handleRemoveAddress(index)">删除</span>
                    </div>
      
                    <div class="flex items-center">
                        <PencilLine class="w-[36rpx] h-[36rpx] text-[#ccc] mr-[10rpx]"/>
                        <span class="text-[32rpx] text-[#666] font-400">修改</span>
                    </div>
                </div>
              </div>
            </li>
          </nut-radio-group>
        </ul>
        <div class="flex items-center text-[44rpx] font-600 px-[30rpx] py-[16rpx] justify-between bg-white">
            <div class="rounded-[20rpx] border-[4rpx] border-solid border-[#28BEBB] px-[46rpx] py-[24rpx] text-[#28BEBB]" @click="handleBack">返回</div>
            <div class="flex items-center justify-between bg-[#28BEBB] rounded-[20rpx] px-[80rpx] py-[28rpx]" @click="toAddAddressPage">
                <CirclePlus class="text-white mr-[16rpx]" />
                <span class="text-white">新增收货地址</span>
            </div>
        </div>
        <nut-toast class="hidden"></nut-toast>
    </div>
</template>

<script lang="ts" setup>
  import { Check,Trash2,PencilLine,CirclePlus } from "lucide-vue-next";
  import { useRouter } from "vue-router";
  import {address,defaultAddress,useGetUserAddressList} from "@/composables/useUserAddress"
import { postRequest } from "@/api/customFetch";
import { setUserDefaultAddress } from "@/api/interfaceDocument";
import { showToast } from "@nutui/nutui";

  useGetUserAddressList();

  const router = useRouter()

  const handleBack = () => {
    router.back()
  }

  const handleRemoveAddress = (index:number) => {
    address.value.splice(index,1)
  }

  const handleRadioChange = (_val:number) => {
    postRequest(setUserDefaultAddress()).then(()=>{
        showToast.text("修改成功")
    })
  }
  
  const toAddAddressPage = () =>{
    router.push({path:'/mine/add/address'})
  }
</script>

