<template>
  <!-- <wd-action-sheet v-model="show" safe-area-inset-bottom title=" " @close="show = !show">
    <view class="box-border py-16 px-6">
      <view class="grid grid-cols-4 gap-6">
        <view
          v-for="(item, index) in dataList"
          :key="item.id + index"
          class="flex flex-col items-center"
          @click="goToPage(item?.type)"
        >
          <view class="w-16 h-16 rounded-2xl overflow-hidden mb-2">
            <image
              :src="item?.img"
              :alt="item?.title"
              class="w-full h-full object-cover"
              mode="widthFix"
            />
          </view>
          <span class="text-sm text-gray-600">{{ item.title }}</span>
        </view>
      </view>
    </view>
  </wd-action-sheet> -->
  <wd-popup
    v-model="show"
    position="bottom"
    closable
    custom-style="height: 720rpx;border-radius: 16rpx "
    @close="show = !show"
  >
    <view class="box-border py-16 px-6">
      <view class="grid grid-cols-4 gap-6">
        <view
          v-for="(item, index) in dataList"
          :key="item.id + index"
          class="flex flex-col items-center"
          @click="goToPage(item?.type)"
        >
          <view class="w-16 h-16 rounded-2xl overflow-hidden mb-2">
            <image
              :src="item?.img"
              :alt="item?.title"
              class="w-full h-full object-cover"
              mode="widthFix"
            />
          </view>
          <span class="text-sm text-[#333]">{{ item.title }}</span>
        </view>
      </view>
    </view>
  </wd-popup>
</template>

<script setup>
  import baby01 from '@img/index/baby-01.svg'
  import baby02 from '@img/index/baby-02.svg'
  import baby03 from '@img/index/baby-03.svg'
  import baby04 from '@img/index/baby-04.svg'
  import baby05 from '@img/index/baby-05.svg'
  import baby06 from '@img/index/baby-06.svg'
  import baby07 from '@img/index/baby-07.svg'
  defineOptions({
    name: 'FeedWdPopup',
  })

  const list = [baby01, baby03, baby04, baby02, baby05, baby06, baby07]
  import data from './data.json'
  const show = defineModel('show')
  const dataList = ref([])
  function getList() {
    dataList.value = data.map((item, index) => ({
      ...item,
      img: list[index],
    }))
  }

  function goToPage(type) {
    // console.log(type, '44')

    uni.navigateTo({
      url: `/pages/record/record?type=${type}`,
    })
  }
  onMounted(() => {
    getList()
  })
</script>

<style lang="scss" scoped></style>
