<template>
</template>

<script>
</script>

<style>
</style>
<template>
	<div class="spot-box">
		<div class="spot-container" v-if="!isShowDetail && !isShowReview">
			<div class="spot-header">
				<p class="spot-title">考核抽查</p>
				<div class="select-wrap">
					<div class="select-item">
						<Select v-model="curSchoolCode" placeholder="请选择学校" @on-change="onSchoolChange">
							<Option v-for="item in schList" :value="item.id" :key="item.id">{{ item.name }}</Option>
						</Select>
					</div>
					<div class="select-item">
						<Select v-model="curMode" placeholder="请选择抽查模式">
							<Option v-for="(item,index) in modeList" :value="index" :key="index">{{ item }}</Option>
						</Select>
					</div>
					<div class="select-item" v-if="curMode === 1">
						<Select v-model="curGroupName" placeholder="请选择教研组">
							<Option v-for="(item,index) in groupList" :value="item" :key="index">{{ item }}</Option>
						</Select>
					</div>
					<Button type="info" @click="doSpotCheck" :loading="tableLoading">抽查</Button>
				</div>

			</div>
			<div class="spot-content">
				<Table :columns="ablitiesColumn" :data="origin" border :span-method="handleSpan" :loading="tableLoading" no-data-text="暂无考核数据"
					ref="table">
					<template slot-scope="{ row, index }" slot="schoolAppraise">
						<span v-show="row.schoolAppraise === 2" style="color: #007700;">优秀</span>
						<span v-show="row.schoolAppraise === 1" style="color: orangered;">合格</span>
						<span v-show="row.schoolAppraise === 0" style="color: red;">不合格</span>
						<span v-show="row.schoolAppraise === '-'">-</span>
					</template>
					<template slot-scope="{ row, index }" slot="teacherAppraise">
						<span v-show="row.teacherAppraise === 2" style="color: #007700;">优秀</span>
						<span v-show="row.teacherAppraise === 1" style="color: orangered;">合格</span>
						<span v-show="row.teacherAppraise === 0" style="color: red;">不合格</span>
						<span v-show="row.teacherAppraise === '-'">未抽查</span>
					</template>
					<template slot-scope="{ row, index }" slot="action">
						<Button type="info" size="small" style="margin-right: 5px;font-size: 12px;"
							@click="goAppraiseDetail(row)">评价详情</Button>
						<Button type="primary" size="small" style="margin-right: 5px;font-size: 12px;"
							@click="goReview(row)">评审</Button>
					</template>
				</Table>
			</div>

		</div>
		<div class="animated appraise-detail" v-if="isShowDetail">
			<div class="detail-title">
				<Icon type="md-arrow-back" @click="isShowDetail = false" />
				<span>{{ curData.tmdname }} 【 {{ curData.ability }} 】</span>
			</div>
			<Table :columns="appraiseColumns" :data="appraiseArr" border>
				<template slot-scope="{ row, index }" slot="result">
					<span v-show="row.result === '优秀'" style="color: #007700;">优秀</span>
					<span v-show="row.result === '合格'" style="color: orangered;">合格</span>
					<span v-show="row.result === '不合格'" style="color: red;">不合格</span>
				</template>
				<!-- <template slot-scope="{ row, index }" slot="content">
					<span v-show="row.result === '优秀'">{{ row.content }}</span>
				</template> -->
			</Table>
		</div>
		<Review v-if="isShowReview" :mode="curReviewMode" :reviewData="curData" @goBack="goBack"></Review>
	</div>
</template>

<script>
	import Review from '../ability/Review.vue'
	export default {
		components:{Review},
		data() {
			return {
				spanb: [],
				curReviewMode: '',
				isShowDetail: false,
				isShowReview: false,
				tableLoading: false,
				schList: [],
				originList: [],
				origin: [],
				groupList: [],
				curSchoolSubs: [],
				appraiseColumns: [{
						title: '评价人',
						key: 'name'
					},
					{
						title: '评价类型',
						key: 'type'
					},
					{
						title: '评价结果',
						slot: 'result',
					},
					{
						title: '评价内容',
						key: 'content'
					},
					{
						title: '评价时间',
						key: 'time'
					},
				],
				appraiseArr: [],
				preSchCode: '',
				curData: false,
				curMode: NaN,
				modeList: ['随机挑选一位教师', '以教研组为单位', '学校所有教师'],
				curGroupName: '',
				curSchoolCode: '',
				ablitiesColumn: [{
						title: '教师姓名',
						key: 'tmdname',
						width: 140
					},
					{
						title: '能力点名称',
						key: 'ability'
					},
					{
						title: '维度',
						key: 'dimension',
						width: 140
					},
					{
						title: '所属环境',
						key: 'env',
						width: 180
					},
					{
						title: '教研组',
						key: 'groupName',
						width: 140
					},
					{
						title: '校评结果',
						slot: 'schoolAppraise',
						key: 'schoolAppraise',
						width: 140
					},
					{
						title: '专家抽查',
						slot: 'teacherAppraise',
						width: 140
					},
					{
						title: '操作',
						slot: 'action',
						key: 'action'
					}
				],
			}
		},
		created() {
			this.getSchList(sessionStorage.getItem('areaId'))
		},
		methods: {
			goBack(val) {
				if(val){
					console.log('xxxxx')
					this.originList = []
					this.doSpotCheck()
				}
				this.isShowReview = false
			},
			/* 获取学校名单 */
			getSchList(areaId) {
				this.$api.ability.getSchList({
					id: areaId
				}).then(res => {
					this.schList = res.info
				})
			},
			/* 根据切换学校的编码去获取学校的教研组信息 */
			onSchoolChange(val) {
				this.$api.schoolUser.getSchoolTeacherAll({
					school_code: val
				}).then(res => {
					this.curGroupName = ''
					this.groupList = [...new Set(res.teachers.map(i => i.groupName || '默认组别'))]
					console.log(this.groupList);
				})
			},
			/* 查看评价详情 */
			goAppraiseDetail(data) {
				let promiseArr = []
				data.sub.otherScore.forEach(async i => {
					promiseArr.push(this.getAppraiseContentById(i.replyIds[i.replyIds.length - 1]))
				})
				Promise.all(promiseArr).then(result => {
					this.appraiseArr = data.sub.otherScore.map((i,index) => {
						return {
							name: i.tmdname,
							result: ['不合格', '合格', '优秀'][i.score],
							content: result[index] || '-',
							type: i.roleType === 'member' ? '互评' : i.roleType === 'school' ? '校评' : '专家抽查',
							time: this.$tools.formatTime(i.time)
						}
					})
					this.appraiseArr.unshift({
						name: data.tmdname,
						result: ['不合格', '合格', '优秀'][data.sub.self],
						content: '-',
						type: '自评',
						time: this.$tools.formatTime(data.sub.uploads[0].time)
					})
					this.curData = data
					this.isShowDetail = true
				}).catch(e => {
					this.appraiseArr = data.sub.otherScore.map((i,index) => {
						return {
							name: i.tmdname,
							result: ['不合格', '合格', '优秀'][i.score],
							content: '-',
							type: '互评',
							time: this.$tools.formatTime(i.time)
						}
					})
					this.appraiseArr.unshift({
						name: data.tmdname,
						result: ['不合格', '合格', '优秀'][data.sub.self],
						content: '-',
						type: '自评',
						time: this.$tools.formatTime(data.sub.uploads[0].time)
					})
					this.curData = data
					this.isShowDetail = true
				})
			},
			/* 根据评论ID查找评论内容 */
			getAppraiseContentById(id){
				return new Promise((r,j) => {
					this.$api.jyzx.getReplyContent({
						"school": this.curSchoolCode,
					    "replyIds": [id]
					}).then(res => {
						r(res.replies.map(i => i.replies.comment)[0])
					})
				})
				
			},
			/* 进入评审 */
			goReview(data) {
				if (data.tmdid === this.$store.state.userInfo.TEAMModelId) {
					this.$Message.warning('您自己的材料只能由其它专家进行抽查！')
					return
				}
				let reviewData = {
					id: data.sub.abilityId,
					uploads: data.sub.uploads,
					targetId: data.tmdid,
					targetName: data.tmdname
				}
				this.curData = reviewData
				this.isShowReview = true
				this.curReviewMode = 'expert'
			},
			/* 抽查操作 */
			doSpotCheck() {
				if (this.curSchoolCode === '' || this.curMode === NaN) {
					this.$Message.error('请先选择抽查条件！')
					return
				}

				if (this.curMode === 1 && this.curGroupName === '') {
					this.$Message.error('请先选择抽查条件！')
					return
				}

				if (this.originList.length && this.preSchCode === this.curSchoolCode) {
					this.tableLoading = true
					setTimeout(() => {
						this.doFilter()
						this.tableLoading = false
					},500)
				} else {
					this.origin = []
					this.tableLoading = true
					this.preSchCode = this.curSchoolCode
					this.$api.jyzx.getOtherSubs({
						"tmdid": this.$store.state.userInfo.TEAMModelId,
						"school": this.curSchoolCode,
						"all": "1"
					}).then(res => {
						res.groupMembers.forEach(i => {
							if (i.sub.uploads.length) {
								let ability = res.abilities.find(j => j.id === i.sub.abilityId)
								i.dimension = this.$GLOBAL.DIMENSIONS().find(j => j.code === res.abilities
									.find(k => k.id === i.sub.abilityId).dimension).val
								i.ability = ability.no + ' ' + ability.name
								i.time = i.sub.uploads.length ? this.$tools.formatTime(i.sub.uploads[0]
									.time) : '-'
								i.env = ability.env
								i.name = i.tmdname
								i.id = ability.id
								i.teacherAppraise = i.sub.otherScore.find(i => i.roleType === 'expert') ? i.sub.otherScore.find(i => i.roleType === 'expert').score : '-'
								i.schoolAppraise = i.sub.otherScore.find(i => i.roleType === 'school') ? i
									.sub.otherScore.find(i => i.roleType === 'school').score : '-'
								this.origin.push(i)
							}
						})
						this.tableLoading = false
						this.originList = JSON.parse(JSON.stringify(this.origin))
						console.log(this.origin)
						this.doGroup()
						this.doFilter()
					}).catch(e => {
						console.log(e)
					})
				}
			},
			handleSpan({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex === 0) {
					if (this.spanb[rowIndex]) {
						return {
							rowspan: this.spanb[rowIndex],
							colspan: 1
						}
					} else {
						return {
							rowspan: 0,
							colspan: 1
						}
					}
				}

			},
			doGroup() {
				let contactDotb = 0;
				let spanb = [];
				this.origin.forEach((item, index) => {
					if (index === 0) {
						console.log(spanb)
						spanb.push(1)
					} else {
						if (item.name === this.origin[index - 1].name) {
							spanb[contactDotb] += 1;
							spanb.push(0)
						} else {
							contactDotb = index
							spanb.push(1)
						}
					}
				})
				this.spanb = spanb;
			},
			doFilter() {
				console.log(this.originList);
				if (this.curMode === 0) {
					let nameArr = [...new Set(this.originList.map(i => i.name))]
					let n = Math.floor(Math.random() * nameArr.length + 1) - 1
					let randomName = nameArr[n]
					this.origin = this.originList.filter(i => i.name === randomName)
					console.log(randomName);
				} else if (this.curMode === 1) {
					this.origin = this.originList.filter(i => i.groupName === this.curGroupName)
				} else {
					this.origin = this.originList
				}
				this.origin.length && this.doGroup()
			}
		},
	}
</script>


<style lang="less">
	.spot-box {
		font-family: 'NotoSerif', '微软正黑体', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;

		.appraise-detail {
			padding: 20px;

			.detail-title {
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 20px;

				.ivu-icon {
					font-size: 24px;
					margin-right: 10px;
					cursor: pointer;
				}
			}
		}

		.spot-container {
			padding: 15px;
			height: 100vh;
			background-color: #eaeaea;

			.spot-header {
				width: 100%;
				background-color: #ffffff;
				border-radius: 5px 5px 0 0;
				padding: 15px;
				display: flex;
				flex-direction: column;

				.spot-title {
					font-size: 18px;
					font-weight: bold;
					color: #676767;

					&::before {
						content: '';
						display: inline-block;
						border: 4px solid #1593d6;
						border-radius: 50%;
						margin-right: 10px;
						margin-bottom: 3px;
					}

				}

				.select-wrap {
					display: inline-flex;
					width: 100%;
					margin-top: 20px;
					margin-left: 15px;
				}

				.select-item {
					margin-right: 20px;
					display: inline-flex;
					min-width: 200px;
				}
			}

			.spot-content {
				height: 75vh;
				background-color: #ffffff;
				border-radius: 0 0 5px 5px;
				padding: 0 28px 50px 28px;
				overflow: auto;
			}
		}
	}
</style>
