<script setup>
  import { navigateTo } from '@/utils/router'
  import { ref } from 'vue'
  import { getLiveRecordList } from '@/api/tui-kit'

  const dataList = ref([])
  const paging = ref(null)
  const getList = async (pageNum, pageSize) => {
    console.log(pageSize, '====')
    try {
      const res = await getLiveRecordList({
        pageNum,
        pageSize
      })
      paging.value.complete(res.rows)
    } catch (error) {
      paging.value.complete(false)
    }
  }
</script>

<template>
  <z-paging
    ref="paging"
    v-model="dataList"
    safe-area-inset-bottom
    use-safe-area-placeholder
    :default-page-size="15"
    @query="getList"
  >
    <view class="meeting-record-index">
      <view
        v-for="item in dataList"
        :key="item.id"
        class="public-meeting-card"
        @click="
          navigateTo('/pages/my-index/meeting-record/details', {
            id: item.id
          })
        "
      >
        <image
          :src="item.coverUrl"
          lazy-load
          mode="aspectFill"
          class="left-img"
        ></image>
        <view class="right-box">
          <text>{{ item.roomName }}</text>
          <text>{{ item.createTime }}</text>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
  @import '../styles/meeting-record.scss';
  .meeting-record-index {
    padding: 32rpx 24rpx;
  }
</style>
