<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { getLiveRecordDetail } from '@/api/tui-kit'
  import { ref } from 'vue'

  const viewData = ref({})
  const loading = ref(true)
  const getData = async id => {
    loading.value = true
    const res = await getLiveRecordDetail(id)
    viewData.value = res.data
    loading.value = false
  }
  onLoad(e => {
    getData(e.id)
  })
</script>

<template>
  <view v-if="!loading" class="details-index">
    <view class="top-name">
      <text class="title">{{ viewData.roomName }}</text>
      <view class="date-box">
        <image
          src="/static/images/my-index/date-icon.png"
          mode="heightFix"
          class="icon-img"
        ></image>
        <text class="des">开始时间：{{ viewData.startTime }}</text>
      </view>
      <view class="date-box">
        <image
          src="/static/images/my-index/date-icon.png"
          mode="heightFix"
          class="icon-img"
        ></image>
        <text class="des">结束时间：{{ viewData.endTime }}</text>
      </view>
      <view class="id-box">
        <image
          src="/static/images/my-index/id-icon.png"
          mode="heightFix"
          class="icon-img"
        ></image>
        <text class="des">会议ID：{{ viewData.roomId }}</text>
      </view>
      <!-- <view class="user-box">
        <view class="user-text">
          <image
            src="/static/images/my-index/user-icon.png"
            mode="heightFix"
            class="icon-img"
          ></image>
          <text class="des">参会人：</text>
        </view>
        <view class="img-list">
          <view v-for="item in 3" :key="item" class="item-box">
            <image
              src="/static/images/public/random2.png"
              mode="aspectFit"
              class="avatar"
            ></image>
            <text>名字</text>
          </view>
        </view>
      </view> -->
    </view>

    <view class="public-meeting-card">
      <image
        :src="viewData.coverUrl"
        mode="aspectFill"
        class="left-img"
      ></image>
      <view class="right-box">
        <text>{{ viewData.roomName }}</text>
        <text>{{ viewData.startTime }}</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '../styles/meeting-record.scss';

  .details-index {
    padding: 48rpx 24rpx 0 24rpx;

    .icon-img {
      height: 32rpx;
      margin-right: 16rpx;
    }

    .top-name {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-family: PingFang SC, PingFang SC;
      font-style: normal;
      text-transform: none;
      .title {
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
      }
      .des {
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;
        text-align: center;
      }
      .date-box,
      .id-box {
        margin-top: 12rpx;
        display: flex;
        align-items: center;
      }

      .user-box {
        margin-top: 32rpx;
        display: flex;
        flex-direction: column;
        .user-text {
          display: flex;
          align-items: center;
        }
        .img-list {
          display: flex;
          margin-top: 16rpx;
          .item-box + .item-box {
            margin-left: 32rpx;
          }
          .item-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .avatar {
              width: 80rpx;
              height: 80rpx;
              border-radius: 80rpx;
              margin-bottom: 8rpx;
            }
            text {
              font-weight: 500;
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
      }
    }
  }

  .public-meeting-card {
    margin-top: 27rpx;
    padding-top: 27rpx;
    border-top: 2rpx solid #f9f9f9;
  }
</style>
