<template>
	<view class="task-detail">
		<view class="td-info">
			<view class="td-txt">布置作业时间：{{formatDate({date: pageInfo.created_at, partition: '/'}) || '-'}}</view>
			<view class="td-txt">发布人：{{pageInfo.work_coach_name || '-'}}</view>
			<view class="td-txt td-tit">作业内容</view>
			<view class="td-txt">{{pageInfo.work_content || '-'}}</view>
			<view class="td-line">
				<view>视频链接：{{pageInfo.work_video || '无'}}</view>
				<view @click="copyOrder(pageInfo.work_video)">复制</view>
			</view>
			<image class="td-img" mode="aspectFill" v-for="(e,i) in pageInfo.work_imgs" :key="i" :src="e || ''" @tap="previewImageWork(e)"></image>
		</view>
		
		<view class="td-info">
			<view class="td-txt">作业提交时间：{{pageInfo.student_work_at!=''?formatDate({date: pageInfo.student_work_at, partition: '/'}) : ''}}</view>
			<view class="td-txt">提交人：{{pageInfo.student_name || '-'}}</view>
			<view class="td-txt td-tit">完成情况</view>
			<view class="td-txt">{{pageInfo.student_work_content ||'无'}}</view>
			<view class="td-line">
				<view>视频链接：{{pageInfo.student_work_video || '无'}}</view>
				<view @click="copyOrder(pageInfo.student_work_video)">复制</view>
			</view>
			<image class="td-img" mode="aspectFill" v-for="(e,i) in pageInfo.student_work_imgs" :key="i" :src="e || ''" @tap="previewImageStu(e)"></image>
		</view>
	</view>
</template>

<script>
import util from '@/utils/util';
import boxServer from '../../js/course_server';
import BOX_API from '../../js/course_api';
import { mapState } from 'vuex';
export default {
	computed:{
		...mapState([ 'brandInfo',]),
	},
	data() {
		return {
			pageInfo: {},
		}
	},
	async onLoad(options){
		// let _query = util.jsonPar(options.query);
		// this.pageInfo = _query
		this.getWorkInfo(options.id)
	},
	methods: {
		formatDate: util.formatDate,
		copyOrder(data){
			uni.setClipboardData({ data })
		},
		previewImageWork(img){
			uni.previewImage({
				current: img,
				urls: this.pageInfo.work_imgs
			})
		},
		// 查看大图片
		previewImageStu(img) {
			// var current = e.target.dataset.src
			uni.previewImage({
				current: img,
				urls: this.pageInfo.student_work_imgs
			})
		},
		
		// 作业 - 详情
		getWorkInfo(id){
			let { brandInfo } = this
			util.showLoad();
			boxServer.get({
				url: BOX_API.stuWorkInfo,
				data: {
					brand_id: brandInfo.brand.id,
					id,
				},
				failMsg: '加载失败！'
			})
			.then(res=>{
				util.hideLoad();
				this.pageInfo = res
			})
		},
	}
}
</script>

<style lang="scss">
@import '~style/public.scss';
// page{
// 	background: #F2F2F7;
// }
.task-detail{
	.td-info{
		margin-bottom: 12rpx;
		padding: 24rpx 0 30rpx;
		background-color: #FFFFFF;
		.td-txt{
			margin: 0 60rpx 0 24rpx;
			color: #1A1A1A;
			font-size: 28rpx;
			line-height: 40rpx;
		}
		.td-tit{
			font-weight: 700;
			margin: 44rpx 24rpx 20rpx;
		}
		.td-line{
			margin: 30rpx 60rpx 0 26rpx;
			flex-grow: 1;
			padding: 30rpx 4rpx 6rpx;
			border-top: 2rpx solid #D8D8D8;
			@include centerFlex(flex-start);
			>view{
				font-size: 28rpx;
				&:first-child{
					color: #9A9A9D;
					line-height: 40rpx;
					@include textHide(1);
				}
				&:nth-child(2){
					margin-left: 20rpx;
					flex-shrink: 0;
					color: #009874;
				}
			}
		}
		.td-img{
			margin: 24rpx 16rpx 0 30rpx;
			display: inline-block;
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}
}
</style>
