<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">
        <image-grid-simple
            :imageList="list"
            :columns="2"
            :height="'80vh'"
            @image-click="handlerClick"
          >
            
          <template #empty>
            <view class="custom-empty">
              <image src="/static/images/no-videos.png" />
              <text>没有找到视频内容</text>
            </view>
          </template>
        </image-grid-simple> 
    </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:[
          {
            
            "id":1,
            "title":"1",
            "src":"../../static/images/default.png"
          },
          {
            "id":2,
            "title":2,
            "src":"../../static/images/default.png"
          },
          {
            "id":3,
            "title":3,
            "src":"../../static/images/default.png"
          },
          {
            "id":9,
            "title":9,
            "src":"../../static/images/default.png"
          },
          {
            "id":4,
            "title":4,
            "src":"../../static/images/default.png"
          },
          {
            "id":5,
            "title":5,
            "src":"../../static/images/default.png"
          },
          {
            "id":6,
            "title":6,
            "src":"../../static/images/default.png"
          },
          {
            "id":7,
            "title":7,
            "src":"../../static/images/default.png"
          },
          {
            "id":8,
            "title":8,
            "src":"../../static/images/default.png"
          }
        ]
      }
    },
    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>
