<template>
  <uv-popup ref="popup" round="19rpx" mode="bottom">
    <scroll-view class="py-30rpx" scroll-y style="max-height: 60vh">
      <view class="py-30rpx">
        <view
          class="px-base"
          @click="handleClick(item)"
          v-for="(item, i) in list"
          :key="i"
        >
          <view class="flex items-center">
            <view class="py-10rpx flex-1">
              <view class="text-28rpx"> {{ item.title }}</view>
              <view class="text-hex-999 text-24rpx mt-10rpx">{{
                item.address
              }}</view>
            </view>
            <view>
              <uv-icon size="40rpx" color="primary" v-if="id == item.id" name="checkbox-mark"></uv-icon>
            </view>
          </view>
          <uv-line></uv-line>
        </view>
      </view>
    </scroll-view>
  </uv-popup>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { http } from '@/utils/request'
const props = defineProps({
  id: [Number, String],
})
const popup = ref(null)
const list = ref([])
onMounted(() => {
  getStore()
})

const emit = defineEmits(['change'])
const handleClick = (e) => {
  emit('change', e)
}

const getStore = () => {
  http.get('/auth/stores').then((res) => {
    list.value = res
  })
}

const open = () => {
  popup.value.open()
}

const close = () => {
  popup.value.close()
}

defineExpose({ open, close })
</script>
