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

  const list = ref([])
  const paging = ref(null)
  const getList = async (pageNum, pageSize) => {
    try {
      const res = await getLiveRoomList({
        pageNum,
        pageSize
      })
      paging.value.complete(res.rows)
    } catch (error) {
      paging.value.complete(false)
    }
  }

  const onGo = item => {
    // #ifdef APP-PLUS
    uni.$liveID = item.roomId
    navigateTo('/pages/audience/index', { liveID: item.roomId })
    // #endif

    // #ifdef H5
    navigateTo('/pages/discover/livelist/h5-live-player', {
      liveId: item.roomId
    })
    // #endif
  }
</script>

<template>
  <z-paging
    ref="paging"
    v-model="list"
    :default-page-no="1"
    :default-page-size="15"
    safe-area-inset-bottom
    use-safe-area-placeholder
    :paging-style="{ 'background-color': '#f9f9f9' }"
    @query="getList"
  >
    <view class="list-box">
      <view
        v-for="item in list"
        :key="item.roomId"
        class="live-box"
        @click="onGo(item)"
      >
        <!-- 背景图 -->
        <image
          :src="item.coverUrl"
          lazy-load
          mode="aspectFill"
          class="bg-box"
        />
        <view class="title-box">
          <view class="title-text">
            <text>
              {{ item.roomName }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
  .list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx;

    .live-box {
      width: 48%;
      margin-top: 32rpx;
      height: 420rpx;
      border-radius: 20rpx;
      overflow: hidden;
      position: relative;
      .bg-box {
        width: 100%;
        height: 100%;
      }
      .title-box {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        padding: 16rpx 0;
        background: rgba(88, 88, 88, 0.164);
        display: flex;
        align-items: center;
        .title-text {
          color: #fff;
          padding: 0 10rpx 0 14rpx;
          font-size: 26rpx;
          text {
            display: -webkit-box;
            -webkit-line-clamp: 1; /* 显示3行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
</style>
