<script setup lang="ts">
import {UserAddressType} from "@/constant/enums";
import {useAddressStore} from "@/pages/address/store/address";
const addressStore = useAddressStore()
const { t } = useI18n()

const typeList = ref([
  {
    label: t('pages.address.choose-type.house'),
    desc: t('pages.address.choose-type.houseDescription'),
    value: UserAddressType.HOUSE,
    icon: '/static/images/chef/147.png',
  },
  {
    label: t('pages.address.choose-type.apartment'),
    desc: t('pages.address.choose-type.apartmentDescription'),
    value: UserAddressType.APARTMENT,
    icon: '/static/images/chef/148.png',
  },
  {
    label: t('pages.address.choose-type.office'),
    desc: t('pages.address.choose-type.officeDescription'),
    value: UserAddressType.OFFICE,
    icon: '/static/images/chef/149.png',
  },
  {
    label: t('pages.address.choose-type.hotel'),
    desc: t('pages.address.choose-type.hotelDescription'),
    value: UserAddressType.HOTEL,
    icon: '/static/images/chef/150.png',
  },
  {
    label: t('pages.address.choose-type.other'),
    desc: t('pages.address.choose-type.otherDescription'),
    value: UserAddressType.OTHER,
    icon: '/static/images/chef/151.png',
  },
])

function chooseType(item: any) {
  addressStore.addressInfo.type = item.value
  switch (item.value) {
    case UserAddressType.HOUSE:
      uni.redirectTo({
        url: '/pages/address/save-address/house',
      })
      break;
    case UserAddressType.APARTMENT:
      uni.redirectTo({
        url: '/pages/address/save-address/apartment',
      })
      break;
    case UserAddressType.OFFICE:
      uni.redirectTo({
        url: '/pages/address/save-address/office',
      })
      break;
    case UserAddressType.HOTEL:
      uni.redirectTo({
        url: '/pages/address/save-address/hotel',
      })
      break;
    case UserAddressType.OTHER:
      uni.redirectTo({
        url: '/pages/address/save-address/other',
      })
      break;
  }
}
</script>

<template>
  <view>
    <navbar :title="t('pages.address.choose-type.navTitle')">
      <template #right>
        <text @click="chooseType({
          value: UserAddressType.OTHER
        })" class="text-#CE7138 text-36rpx">{{ t('common.skip') }}</text>
      </template>
    </navbar>
    <view class="px-30rpx pt-64rpx">
      <view class="text-40rpx lh-40rpx text-#333 font-500">{{ t('pages.address.choose-type.title') }}</view>
      <view class="mt-28rpx text-28rpx lh-32rpx text-#666 mb-52rpx">
        {{ t('pages.address.choose-type.description') }}
      </view>

      <template v-for="(item, index) in typeList">
         <view @click="chooseType(item)" :class="[index === 0 ? '' : 'mt-36rpx']" class="w-full border-#DFDFDF border-solid border-1px rounded-16rpx px-28rpx py-34rpx flex-center-sb">
           <view class="flex items-center">
             <image :src="item.icon" class="w-48rpx h-48rpx shrink-0 mr-28rpx"></image>
             <view>
               <view class="text-36rpx lh-36rpx text-#333 font-500">{{ item.label }}</view>
               <view class="text-28rpx lh-28rpx text-#6D6D6D mt-18rpx">{{ item.desc }}</view>
             </view>
           </view>
           <image src="@img/chef/142.png" class="w-32rpx h-32rpx shrink-0"></image>
         </view>
      </template>
    </view>
  </view>
</template>

<style>
page {
  background-color: #fff;
}
</style>