<template>
  <view>
    <!-- 头像 -->
    <view class="header">
      <uni-row class="avatar-box">
        <uni-col :span="6">
          <image class="avatar" :src="userInfo.avatar"></image>
        </uni-col>
        <uni-col :span="18">
          <view class="user-info">
            <uni-icons type="vip-filled" style="color:#eede6f"></uni-icons>
            <text style="color:#eede6f"> 昵称 </text>
            <uni-icons type="vip-filled" style="color:#eede6f"></uni-icons>
          </view>
          <view class="user-info">
            <text>当前已下载：{{download}}</text>
          </view>
        </uni-col>
      </uni-row>
    </view>
    
    <uni-section class="title" title="已下载" type="line"></uni-section>
    <!-- 已下载列表 -->
    <view class="video-container">
        <view class="video-grid">
          <view 
            v-for="(video, index) in list" 
            :key="index" 
            class="video-item"
          >
            <view class="video-card">
              <video 
                :src="video.url" 
                :poster="video.poster"
                class="video-player"
                :controls="false"
                :show-center-play-btn="true"
                :autoplay="true"
                :loop="true"
                @play="handlePlay(index)"
              ></video>
              
            </view>
          </view>
        </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userInfo:{
          avatar:'https://ts4.tc.mm.bing.net/th/id/OIP-C.-RXVvrUScB5pzqIpuROWNgAAAA?rs=1&pid=ImgDetMain&o=7&rm=3'
        },
        download:0,
        list:[]
      }
    },
    onLoad() {
      this.getUserInfo()
    },
    methods: {
      getUserInfo() {
        // 获取用户信息
      },
      getUserDownload(){
        // 获取用户已下载数据
      }
    }
  }
</script>

<style>

/* @font-face {
	font-family: CustomFont;
	src: url('@/static/iconfont/iconfont.ttf');
} */

.header {
  margin: 10rpx;
}

.title {
  margin-top: 10rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.avatar-box {
  margin-top: 20rpx;
  
}
.avatar {
  margin-left: 30rpx;
  border-radius: 50%;
  height: 150rpx;
  width: 150rpx;
}

.user-info {
  margin-left: 20rpx;
  margin-top: 20rpx;
}

.download-box {
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
}
</style>
