<!--作业详情-->
<template>
  <view class="dark-theme">
    <!--    作业展示-->
    <view class="top-style" v-if="infoData.student_file">
      <video v-if="infoData.student_file_type == 2" class="pic" style="width: 100%;border-radius: 15rpx;" :src="$util.img(infoData.student_file)"></video>
      <image v-else style="width: 100%;border-radius: 15rpx;" :src="$util.img(infoData.student_file)" mode="aspectFit"></image>
    </view>

    <!--    简练信息+作业描述-->
    <view class="below-style">
      <view class="head-img">
        <!--教练头像-->
        <fui-avatar width="80" :src="$util.img(infoData.coach_pic)"></fui-avatar>
        <view class="head-text">{{infoData.coach_name}}</view>
      </view>
      <view class="multi-line-ellipsis" v-html="infoData.content_text"></view>
    </view>
  </view>
</template>
<script>
import memberApi from '@/api/member.js';


export default {
  data() {
    return {
      //筛选条件
      filteredData: {
        id: '',//作业id
      },

      infoData: {},
    }
  },
  onLoad(options) {
    this.filteredData.id = options.id || '1' // 默认ID为1
    // 使用模拟数据
    this.mockData()
  },
  onShow(){
    // this.init() // 初始化数据 - 已注释
  },
  methods: {
    //初始化
    async init(){
      // this.getAssignmentsInfo() // 已注释
    },

    // 模拟数据
    mockData() {
      this.infoData = {
        student_file: '/static/icon-img/empty.png',
        student_file_type: 1, // 1-图片，2-视频
        coach_pic: '/static/icon-img/default_avatar.png',
        coach_name: '张教练',
        content_text: '<p>这是一份作业的详细说明，包含了作业的要求和注意事项。</p><p>1. 请按照要求完成动作练习</p><p>2. 注意动作的标准性和连贯性</p><p>3. 完成后请上传视频或图片记录</p>'
      }
    },

    //获取作业详情 - 已注释
    /*
    async getAssignmentsInfo() {
      let params = {...this.filteredData}
      let res = await memberApi.assignmentsInfo(params)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.infoData = res.data
    },
    */
  }
}
</script>

<style lang="less" scoped>
.dark-theme {
  background-color: #121212;
  color: #ffffff;
  min-height: 100vh;
  padding-top: 0;
}

.top-style{
  width: 92%;
  height: 500rpx;
  margin: auto;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1e1e1e;
  border-radius: 15rpx;
}
.top-style-img{
  width: 120rpx;
  height: 120rpx;
}
.below-style{
  width: 92%;
  margin: auto;
  background-color: #1e1e1e;
  border-radius: 15rpx;
  margin-top: 20rpx;
  padding: 20rpx 0;
}
.head-img {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
}
.head-text {
  color: #ffffff;
  font-size: 35rpx;
  padding-left: 20rpx;
}
.multi-line-ellipsis {
  color: #e0e0e0;
  font-size: 29rpx;
  padding: 20rpx 30rpx;
  line-height: 1.6;
}
</style>
