<!--作业详情-->
<template>
  <view>
    <!--    作业展示-->
    <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
  },
  onShow(){
    this.init()//初始化数据
  },
  methods: {
    //初始化
    async init(){
      this.getAssignmentsInfo()
    },

    //获取作业详情
    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>
.top-style{
  width: 92%;
  height: 700rpx;
  margin: auto;
  margin-top: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-style-img{
  width: 120rpx;
  height: 120rpx;
}
.below-style{
  width: 92%;
  margin: auto;
}
.head-img {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
}
.head-text {
  color: #333333;
  font-size: 35rpx;
  padding-left: 20rpx;
}
.multi-line-ellipsis {
  color: #333333;
  font-size: 29rpx;
  padding: 5rpx 10rpx;
  // display: -webkit-box;
  // -webkit-box-orient: vertical;
  // -webkit-line-clamp: 2;
  // overflow: hidden;
  // text-overflow: ellipsis;
}
</style>
