<template>
  <view v-for="(item, index) in dataList" :key="index" class="w-full px-4 box-border">
    <view class="w-full flex items-center justify-between box-border py-4 last:border-b-0">
      <view
        :style="{
          width: item?.image ? `calc(100% - 200rpx)` : '100%',
        }"
        @click.stop="goToPage(item)"
      >
        <view class="w-full text-xs text-[#666] flex items-center">
          <image class="w-[20rpx] h-[20rpx] mr-2" :src="oval" mode="widthFix" />
          {{ item.time }}
        </view>
        <view class="w-full mt-1 text-[#333] text-sm">{{ item.title }}</view>
        <view class="w-full mt-1 text-sm text-[#666] line-clamp-1">
          {{ item?.desc ? item?.desc : '无备注' }}
        </view>
        <view v-if="item?.recorder" class="mt-1 text-sm text-[#999]">
          记录者：{{ item?.recorder }}
        </view>
      </view>
      <view v-if="item?.image" class="w-20 h-20 shrink-0 ml-4">
        <wd-badge
          :hidden="item.imageCount ? false : true"
          :modelValue="item.imageCount"
          type="primary"
          max="99"
          :right="10"
        >
          <img :src="item?.image" class="w-full h-full rounded-lg object-cover" alt="记录图片" />
        </wd-badge>
      </view>
    </view>
    <wd-divider class="w-full" color="#ccc"></wd-divider>
  </view>
</template>

<script setup>
  import oval from '@img/index/oval.svg'
  defineOptions({
    name: 'Recordlist',
  })

  defineProps({
    dataList: {
      type: Array,
      default: [],
    },
  })

  function goToPage({ type, id }) {
    uni.navigateTo({
      url: `/pages/record/record?type=${type}&id=${id}`,
    })
  }
</script>

<style lang="scss" scoped>
  .wd-divider {
    padding: 0;
    margin: 0;
  }
</style>
