<script setup lang="ts">
const { t } = useI18n();
const keyword = ref('');
function handleSearch(){
  
}
function handleClickItem(){
  uni.navigateTo({
    url: '/pages/address/choose-type'
  })
}
</script>

<template>
  <z-paging>
    <template #top>
      <navbar :title="t('pages.address.title')" />
      <view class="px-30rpx mt-32rpx">
        <view
            class="px-36rpx h-88rpx bg-#F2F3F6 flex items-center rounded-44rpx "
        >
          <image src="@img/chef/100222.png" class="w-28rpx h-28rpx mr-18rpx"></image>
          <wd-input
              no-border
              clearable
              :focus-when-clear="false"
              :focus="true"
              confirm-type="search"
              use-prefix-slot
              custom-class="flex items-center !text-30rpx !bg-transparent flex-1"
              placeholderStyle="font-size: 30rpx;color: #6D6D6D; font-weight: 500;"
              :modelValue="keyword"
              :placeholder="t('components.search.placeholder')"
              @confirm="handleSearch"
          >
          </wd-input>
        </view>
      </view>
    </template>
    <view class="pl-30rpx mt-24rpx">
      <template v-for="item in 6">
         <view @click="handleClickItem" class="flex items-center">
           <image src="@img/chef/145.png" class="w-44rpx h-44rpx shrink-0 mr-28rpx"></image>
           <view class="flex-1 h-156rpx border-bottom pt-40rpx">
             <view class="text-32rpx lh-32rpx text-#333 font-500 mb-16rpx">818 Avenue du Mont-Royal E</view>
             <view class="text-28rpx lh-28rpx text-#6D6D6D">Montreal,QC</view>
           </view>
         </view>
      </template>
    </view>
  </z-paging>
</template>

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