<template>
  <a-card title="订单确认">
    <a-radio-group v-model:value="selected">
      <a-list :data-source="addresses">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-radio :value="item.id">
              {{ item.receiverName }} {{ item.receiverPhone }} {{ item.detail }}
            </a-radio>
          </a-list-item>
        </template>
      </a-list>
    </a-radio-group>
    <a-button type="primary" @click="createOrder" :disabled="!selected">提交订单</a-button>
  </a-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import api from '../../api'

const addresses = ref([])
const selected = ref(null)
const router = useRouter()

const load = async () => {
  const res = await api.get('/api/user/addresses')
  if (res.success) addresses.value = res.data
}

const createOrder = async () => {
  await api.post('/api/user/orders', { addressId: selected.value })
  message.success('下单成功')
  router.push('/orders')
}

onMounted(load)
</script>
