<template>
	<div class="hw-container">
		<Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoading"></Loading>
		<!-- 作业活动列表 -->
		<div class="hw-col hw-list-box">
			<div class="hw-box-header">
				<span>作业活动列表</span>
				<div>
					<Icon type="md-trash" class="to-create-icon" @click="onDeleteHw" style="margin-left:10px" v-show="hwList.length" />
					<Icon type="md-add" class="to-create-icon" @click="goToCreate" />
				</div>
			</div>
			<vuescroll>
				<Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoadList"></Loading>
				<div class="hw-item-wrap">
					<div v-if="hwList.length === 0">
						<EmptyData :top="50"></EmptyData>
					</div>
					<div style="width:100%" v-else>
						<div :class='["hw-item",index === activeHwIndex ? "item-active":""]' v-for="(item,index) in hwList" :key="index"
						 @click="onHwClick(item,index)">
							<p class="hw-item-name">{{ item.name }}</p>
							<div class="hw-item-info">
								<span class="hw-item-nums">
									<Icon type="md-time" size="14" style="margin-right:5px" />{{ $tools.formatTime(item.startTime) }}</span>
								<span class="hw-item-status" :style="{ background: (item.status === 100 ? '#0BADD4' : item.status === 200 ? '#1CC0F3' : '#949594')}">{{ item.status === 100 ? '待发布' : item.status === 200 ? '进行中' : '已结束' }}</span>
							</div>
						</div>
					</div>

				</div>
			</vuescroll>
		</div>

		<!-- 作业基础信息展示 -->
		<div class="hw-col hw-info-box" v-show="currentHw.status !== 300">
			<div class="hw-box-header">
				<span>作业详情</span>
				<div class="hw-box-header-tools">
					<span class="hw-box-header-tools-tool" v-show="currentHw.status !== 300 && hwList.length">
						<Icon type="md-create" size="18" title="编辑" @click="onEditHw" /></span>
					<span class="hw-box-header-tools-tool" v-show="currentHw.status === 200 && hwList.length">
						<Icon type="md-undo" size="18" title="取消发布" @click="onCancelHw" style="margin-left:8px;" /></span>
				</div>
			</div>
			<vuescroll ref="hwDetailsScroll">
				<div class="hw-info-wrap">
					<div v-show="hwList.length === 0">
						<EmptyData :top="50"></EmptyData>
					</div>
					<BaseHwForm :editItem="currentHw" @onAddSuccess="onAddSuccess" ref="hwForm" v-show="hwList.length"></BaseHwForm>
				</div>
			</vuescroll>
		</div>

		<!-- 作业提交数据 -->
		<div class="hw-col hw-data-box" :style="{ width: currentHw.status !== 300 ? '55%' : '85%' }">
			<div class="hw-box-header">
				<span>作业数据</span>
				<div class="hw-box-header-tools">
					<!--<span class="hw-box-header-tools-tool"><Icon type="md-podium" />数据分析</span>-->
				</div>
			</div>
			<vuescroll>
				<div class="hw-data-wrap">
					<div v-if="hwList.length === 0 || currentHw.status === 100">
						<EmptyData :top="50"></EmptyData>
					</div>
					<BaseHwTable :studentsList="studentsList" :hwId="currentHw.id" :isSimpleColumns="false" v-else></BaseHwTable>
				</div>
			</vuescroll>
		</div>

		<!-- 完善试卷信息 -->
		<!--<Modal v-model="addHwModal"
               class-name="hw-modal"
               :title="isEdit ? '修改作业' : '新增作业'"
               footer-hide
               width="600px">
            <div class="hw-modal-box">
                <vuescroll ref="hwModalScroll">
                    <BaseHwForm @onAddSuccess="onAddSuccess" :editItem="editItem" :editable="editable" ref="editForm"></BaseHwForm>
                </vuescroll>
            </div>
        </Modal>-->
	</div>
</template>
<script>
	import BaseHwForm from '@/components/homework/BaseHwForm'
	import BaseHwTable from '@/components/homework/BaseHwTable'
	export default {
		components: {
			BaseHwForm,
			BaseHwTable
		},
		data() {
			return {
				isLoading: false,
				isLoadList: false,
				isEdit: false,
				editable: false,
				hwList: [],
				studentsList: [],
				currentHw: {
					status: 0
				},
				editItem: {},
				activeHwIndex: 0,
				addHwModal: false,
			}
		},
		methods: {

			/** 新增作业 */
			goToCreate() {
				//this.$refs.editForm.handleReset('hwForm')
				//this.$refs.editForm.$refs.uploadRef.clearUploadedList()
				//this.$refs.editForm.isAdd = true
				//this.$refs.editForm.defaultFileList = []
				//this.$refs.hwForm.hwFormEdit = true
				//this.isEdit = false
				//this.editItem = null
				//this.editable = true
				//this.addHwModal = true
				//this.backToTop('hwModalScroll')

				let defaultHw = {
					name: '预设作业名称',
					target: [],
					endTime: '',
					publishModel: '0',
					startTime: '',
					description: '',
					resource: [],
					isReset: [],
					other: []
				}
				this.studentsList = []
				this.hwList.unshift(defaultHw);
				this.currentHw = defaultHw;
				this.editable = true
				this.$refs.hwForm.hwFormEdit = true

			},

			/** 删除当前作业 */
			onDeleteHw() {
				this.$Modal.confirm({
					title: '删除作业',
					content: '<p>确认删除该作业？</p>',
					okText: '确认',
					cancelText: '取消',
					onOk: () => {
						this.isLoading = true

						if (this.currentHw.id) {
							this.$api.learnActivity.DeleteHomeWork({
								id: this.currentHw.id,
								pk: this.$store.state.userInfo.TEAMModelId
							}).then(res => {
								if (res.result.data) {
									this.$Message.success('操作成功')
									this.getHomeWorkList()
								} else {
									this.$Message.success('操作失败')
								}
								this.isLoading = false
							})
						} else {
							this.hwList.splice(this.hwList.indexOf(this.currentHw), 1)
							this.isLoading = false
							this.$Message.success('操作成功')
							if (this.hwList.length) this.onHwClick(this.hwList[0], 0)
						}
					}
				})
			},

			/** 获取作业列表 */
			getHomeWorkList() {
				this.isLoadList = true
				let params = {
					code: this.$store.state.userInfo.TEAMModelId
				}
				this.$api.learnActivity.FindHomeWork(params).then(res => {
					if (!res.error && res.homeWorkFindDtos) {
						this.hwList = res.homeWorkFindDtos.sort((a, b) => {
							return b.createTime - a.createTime
						})
						if (res.homeWorkFindDtos.length) this.onHwClick(res.homeWorkFindDtos[0], 0)
						this.isLoadList = false
					} else {
						this.$Message.error('获取数据失败')
					}
				})
			},

			/**
			 * 作业点击事件
			 * @param item
			 * @param index
			 */
			onHwClick(item, index) {
				this.currentHw = item
				this.activeHwIndex = index
				this.studentsList = []
				if (item.id) this.getHwStudents(item.id, item.target)
				this.$refs.hwForm.hwFormEdit = false
				//this.backToTop('hwDetailsScroll')
			},


			/**
			 * 获取作业关联的学生清单
			 * @param hwId 作业ID
			 */
			async getHwStudents(hwId, target) {
				let records = await this.getHwRecord(hwId)
				this.isLoading = true
				//  先查找 作业发布对象关联的学生清单 然后再去判断学生的作答情况
				this.$api.courseMgmt.getClassroomStudent({
					classroomCode: target.map(i => i.classroomCode),
					schoolCode: this.$store.state.userInfo.schoolCode
				}).then(res => {
					if (!res.error && res.result.data) {
						let list = res.result.data
						let infoList = res.result.extend.students
						list.forEach(i => {
							i.name = infoList.filter(j => j.studentId === i.code)[0].name
							i.classroomName = target.filter(k => k.classroomCode === i.id)[0].classroomName
						})
						// 要根据作答情况 结合两张表 处理表格显示的数据 
						if (records.length) {
							list.forEach(i => {
								for (let a = 0; a < records.length; a++) {
									// 如果学生已提交 则添加提交信息 如果未提交则跳过
									let item = records[a]
									if (i.code === item.code) {
										i.submissionBool = true
										i.submissionTime = item.submitTime
										i.teacherComments = item.tchCmt
										i.studentComments = item.stuCmt
										i.score = item.score
										i.content = item.content
										return false
									} else {
										i.submissionBool = false
										i.submissionTime = null
										i.teacherComments = null
										i.studentComments = []
										i.score = 0
										i.content = []
									}
								}
							})
						}
						this.studentsList = list
						this.isLoading = false
					} else {
						this.$Message.error('获取数据失败')
					}
				})
			},

			/**
			 * 老师评分请求接口
			 * @param params
			 */
			getHwRecord(hwId) {
				return new Promise((r, j) => {
					this.$api.learnActivity.FindRecordByHwId({
						id: hwId
					}).then(res => {
						if (!res.error && res.result.data) {
							r(res.result.data)
						} else {
							j(500)
						}
					})
				})
			},



			/** 作业编辑事件 */
			onEditHw() {
				this.editItem = this.currentHw
				this.isEdit = true
				this.editable = true
				this.$refs.hwForm.hwFormEdit = !this.$refs.hwForm.hwFormEdit
				//this.addHwModal = true
				//this.backToTop('hwModalScroll')
			},

			/* 取消发布作业 */
			onCancelHw() {
				this.$Modal.confirm({
					title: '取消发布',
					content: '<p>确认取消发布该作业？</p>',
					okText: '确认',
					cancelText: '取消',
					onOk: () => {
						this.isLoading = true
						this.$api.learnActivity.RevokeHomeWork(this.currentHw.id).then(res => {
							if (res.result.data) {
								this.isLoading = false
								this.$Message.success('操作成功')
								this.getHomeWorkList()
							} else {
								this.isLoading = false
								this.$Message.success('操作失败')
							}
						})
					}
				})
			},


			/** 新增作业成功回调 */
			onAddSuccess() {
				this.getHomeWorkList()
			},


			/**
			 * 滚动条返回顶部
			 * @param refName
			 */
			backToTop(refName) {
				this.$refs[refName].scrollTo({
						y: 0
					},
					100, 'easeInQuad'
				)
			}
		},
		mounted() {
			this.getHomeWorkList()
		}
	}
</script>
<style lang="less" scoped>
	@import "./ManageHomeWork.less";
</style>
<style>
	.hw-modal .ivu-modal-content {
		background: #454545;
	}

	.hw-modal .ivu-modal-body {
		padding: 0;
	}

	.hw-modal .ivu-modal-header p,
	.hw-modal .ivu-modal-header-inner {
		color: #fff;
		font-size: 18px;
		font-weight: bold;
	}

	.hw-modal .ivu-modal-header {
		border-bottom: none;
	}

	.hw-modal .hw-modal-box {
		height: 600px;
		max-height: 600px;
		padding: 15px;
	}
</style>
