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

<!--    简练信息+作业描述-->
		<view class="below-style">
			<view class="head-img">
        <!--学生头像-->
				<fui-avatar width="80" :src="infoData.student.customerResources.member.headimg ? infoData.student.customerResources.member.headimg : $util.img('/uniapp_src/static/images/common/yong_hu.png')"></fui-avatar>
				<view class="head-text">{{infoData .student.name}}</view>
			</view>
      <view class="multi-line-ellipsis">
        状态：{{ infoData.status == 1 ? '待批改' : infoData.status == 2 ? '未提交' : infoData.status == 3 ? '已提交' :''}}      </view>
			<view class="multi-line-ellipsis" v-html="infoData.description"></view>
		</view>
	</view>
</template>
<script>
import apiRoute from '@/api/apiRoute.js';


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

      infoData:{},
    }
  },
  onLoad(options) {
    this.filteredData.id = options.id//作业id
  },
  onShow(){
    this.init()//初始化数据
  },
  methods: {
    //初始化
    async init(){
      this.getAssignmentsInfo()
    },

    //获取作业详情
    async getAssignmentsInfo() {
      let params = {...this.filteredData}
      let res = await apiRoute.xy_assignmentsInfo(params)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

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

<style lang="less" scoped>
.main_box{
  width: 100%;
  height: 100%;
  background: #292929;
  padding-top: 45rpx;
}
	.top-style{
		width: 92%;
		height: 700rpx;
		margin: auto;
		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: #fff;
      font-size: 35rpx;
      padding-left: 20rpx;
    }
	}


	.multi-line-ellipsis {
    margin-top: 20rpx;
		color: #fff;
		font-size: 29rpx;
		padding: 5rpx 10rpx;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
		// -webkit-line-clamp: 2;
		// overflow: hidden;
		// text-overflow: ellipsis;
	}
</style>
