<template>
    <div class="application-container">
        <div v-if="!isReview && !isShowDetail && !isShowPaper" style="height: 100%;">
            <Card :bordered="false">
                <Tabs :value="curTab" @on-click="onTabChange">
                    <TabPane :label="$t('jyzx.application.list')" name="name1">
                        <EmptyData v-if="!appList.length"></EmptyData>
                        <div v-else class="app-table">
                            <Table :columns="appCol" :data="appList" height="730">
                                <template slot-scope="{ row }" slot="name">
                                    <p v-if="row.name">{{ row.no }} {{ row.name }}</p>
                                    <p v-else>-</p>
                                </template>
                                <template slot-scope="{ row }" slot="time">
                                    <p v-if="row.uploads.length">
                                        {{ $tools.formatTime(row.selfTime) }}
                                    </p>
                                    <p v-else>-</p>
                                </template>
                                <template slot-scope="{ row }" slot="result">
                                    <p v-if="row.uploads.length" style="font-weight: bold;">
                                        <span v-show="row.self === 2" style="color: #007700;">{{ $t('jyzx.application.fine') }}</span>
                                        <span v-show="row.self === 1" style="color: orangered;">{{ $t('jyzx.application.qualified') }}</span>
                                        <span v-show="row.self === 0" style="color: red;">{{ $t('jyzx.application.unqualified') }}</span>
                                    </p>
                                    <p v-else>-</p>
                                </template>
								<template slot-scope="{ row }" slot="schoolAppraise">
								    <p v-if="row.uploads.length" style="font-weight: bold;">
								        <span v-show="row.schoolAppraise === 2" style="color: #007700;">{{ $t('jyzx.application.fine') }}</span>
								        <span v-show="row.schoolAppraise === 1" style="color: orangered;">{{ $t('jyzx.application.qualified') }}</span>
								        <span v-show="row.schoolAppraise === 0" style="color: red;">{{ $t('jyzx.application.unqualified') }}</span>
								    </p>
								    <p v-else>-</p>
								</template>
								<template slot-scope="{ row }" slot="exerciseScore">
								    <p style="font-weight: bold;">
								        <span v-show="row.exerciseScore === -1" style="color: #a2a2a2;">-</span>
								        <span v-show="row.exerciseScore === 0" style="color: red;">{{ $t('jyzx.application.noPass') }}</span>
								        <span v-show="row.exerciseScore === 1" style="color: #007700;">{{ $t('jyzx.application.pass') }}</span>
								    </p>
								</template>
                                <template slot-scope="{ row }" slot="action">
                                    <Button type="success" size="small" @click="doUpload(row)" v-if="!row.uploads.length">{{ $t('jyzx.application.load') }}</Button>
                                    <Button size="small" @click="goAppraiseDetail(row)" v-else>{{ $t('jyzx.common.seeEvaluate') }}</Button>
                                    <Button type="primary" size="small" @click="goTestPaper(row)" style="margin-left: 5px;">{{ row.exerciseScore > -1 ? $t('jyzx.application.againTest') : $t('jyzx.application.meTest') }}</Button>
                                </template>
                            </Table>
                        </div>
                    </TabPane>
                    <TabPane :label="$t('jyzx.application.discuss')" name="name2">
                        <EmptyData textContent="暂无数据" v-if="!otherList.length"></EmptyData>
                        <div v-else class="app-table">
                            <Table :columns="comCol" :data="otherList">
								 <template slot-scope="{ row }" slot="myAppraise">
                                    <span v-show="row.myAppraise === 2" style="color: #007700;">{{ $t('jyzx.application.fine') }}</span>
                                    <span v-show="row.myAppraise === 1" style="color: orangered;">{{ $t('jyzx.application.qualified') }}</span>
                                    <span v-show="row.myAppraise === 0" style="color: red;">{{ $t('jyzx.application.unqualified') }}</span>
                                    <span v-show="row.myAppraise === -1">{{ $t('jyzx.application.noEvaluate') }}</span>
                                </template>
								<template slot-scope="{ row }" slot="action">
								    <Button :type="row.myAppraise === -1 ? 'primary':'info'" size="small" @click="appraiseOther(row)">{{ row.myAppraise === -1 ? $t('jyzx.application.score') : $t('jyzx.application.againScore') }}</Button>
								</template>
                            </Table>
                        </div>
                    </TabPane>
                </Tabs>
            </Card>
        </div>
        <div class="animated appraise-detail" v-if="isShowDetail">
            <div class="detail-title">
                <Icon type="md-arrow-back" @click="isShowDetail = false" />
                <span>{{ $store.state.userInfo.name }} 【 {{ curData.name }} 】</span>
            </div>
            <Table :columns="appraiseColumns" :data="appraiseArr" border>
                <template slot-scope="{ row, index }" slot="result">
                    <span v-show="row.result === '优秀'" style="color: #007700;">{{ $t('jyzx.application.fine') }}</span>
                    <span v-show="row.result === '合格'" style="color: orangered;">{{ $t('jyzx.application.qualified') }}</span>
                    <span v-show="row.result === '不合格'" style="color: red;">{{ $t('jyzx.application.unqualified') }}</span>
                </template>
            </Table>
        </div>
        <Review v-if="isReview" :mode="curReviewMode" :reviewData="reviewData" @goBack="goBack"></Review>
		<TestPaper v-if="isShowPaper" :abilityData="curData" @goBack="goBack"></TestPaper>
    </div>
</template>

<script>
import Review from "@/view/ability/Review.vue"
import TestPaper from "@/view/ability/TestPaper.vue"

export default {
    components: {
        Review,TestPaper
    },
    data() {
        return {
			isShowPaper:false,
            isShowDetail: false,
            curReviewMode: 'self',
			curTab:'name1',
            appraiseColumns: [
                {
                    title: this.$t('jyzx.application.evaName'),
                    key: 'name'
                },
                {
                    title: this.$t('jyzx.application.evaType'),
                    key: 'type'
                },
                {
                    title: this.$t('jyzx.application.evaResult'),
                    slot: 'result',
                },
                {
                    title: this.$t('jyzx.application.evaContent'),
                    key: 'content'
                },
                {
                    title: this.$t('jyzx.application.evaTime'),
                    key: 'time'
                },
            ],
            appraiseArr: [],
            appCol: [{
                title: this.$t('jyzx.common.pointName'),
                key: "name",
                slot: "name",
            },
            {
                title: this.$t('jyzx.common.loadTime'),
                slot: "time",
            },
            {
                title: this.$t('jyzx.application.disNum'),
                key: "num",
				width:100
            },
            {
                title: this.$t('jyzx.application.disByMe'),
                slot: "result",
				width:100
            },
			{
			    title: this.$t('jyzx.application.disBySchool'),
			    slot: "schoolAppraise",
				width:100
			},
			{
			    title: this.$t('jyzx.application.spotCheck'),
			    key: "teacherAppraise",
				width:100
			},
			{
			    title: this.$t('jyzx.application.testByMe'),
			    slot: "exerciseScore",
			},
            {
                title: this.$t('jyzx.common.action'),
                slot: "action",
            },
            ],
            appList: [],
            comCol: [{
                title: this.$t('jyzx.application.teacherName'),
                key: "tmdname",
                align: "center",
            },
            {
                title: this.$t('jyzx.common.dimension'),
                key: "dimension",
                align: "center",
            },
            {
                title: this.$t('jyzx.common.point'),
                key: "abilityName",
                align: "center",
            },
            {
                title: this.$t('jyzx.common.loadTime'),
                key: "time",
                align: "center",
            },
			{
			    title: this.$t('jyzx.application.evaResult'),
			    slot: "myAppraise",
			    align: "center",
			},
            {
                title: this.$t('jyzx.common.action'),
                slot: "action",
                align: "center",
            },
            ],
            otherList: [],
            isDiscuss: false,
            curData: null,
            isReview: false,
            reviewData: null
        }
    },
    methods: {
        onTabChange(val) {
            this.curTab = val
        },
        goAppraiseDetail(data) {
            this.isShowDetail = true
            console.log(data)
            this.appraiseArr = data.otherScore.map(i => {
                return {
                    name: i.roleType === 'school' ? '管理员' : '教师',
                    result: ['不合格', '合格', '优秀'][i.score],
                    content: i.replyIds[0],
                    type: i.roleType === 'school' ? '校评' : '互评',
                    time: this.$tools.formatTime(i.time)
                }
            })
            this.appraiseArr.unshift({
                name: this.$store.state.userInfo.name,
                result: ['不合格', '合格', '优秀'][data.self],
                content: '-',
                type: '自评',
                time: this.$tools.formatTime(data.uploads[0].time)
            })
            this.curData = data
        },
		
		goTestPaper(data){
			this.isShowPaper = true
			this.curData = data
		},
		
        goBack() {
            this.isReview = false
			this.isShowPaper = false
			this.isShowDetail = false
            this.getMyAbilities()
            this.getOtherSubs()
        },
		
        getMyAbilities() {
            this.$api.jyzx.getPoint({
                "tmdid": this.$store.state.userInfo.TEAMModelId,
                "scope": "school",
                "code": this.$store.state.userInfo.schoolCode
            }).then(res => {
                res.rcdSubs.forEach(i => {
                    i.name = res.hadSubs.find(j => j.id === i.id).name
                    i.no = res.hadSubs.find(j => j.id === i.id).no
                    i.num = i.uploads.length ? (i.otherScore.length ? i.otherScore.filter(j => j.roleType === 'member').length : 0) : 0
					i.schoolAppraise = i.otherScore.length && i.otherScore.filter(j => j.roleType === 'school').length ? i.otherScore.find(j => j.roleType === 'school').score : -1
					i.teacherAppraise = '未抽查'
					i.exerciseScore = i.exerciseScore
                })
                this.appList = res.rcdSubs.sort(function(s, t) {
					var a = s.no.toLowerCase();
					var b = t.no.toLowerCase();
					if (a.length === 2) {
						a = a.slice(0, a.length - 1) + '0' + a.slice(-1)
					}
					if (b.length === 2) {
						b = b.slice(0, b.length - 1) + '0' + b.slice(-1)
					}

					if (a < b) return -1;
					if (a > b) return 1;
					return 0;
				});
                console.log(this.appList);
            })
        },

        getOtherSubs() {
			this.otherList = []
            this.$api.jyzx.getOtherSubs({
                "tmdid": this.$store.state.userInfo.TEAMModelId,
                "school": this.$store.state.userInfo.schoolCode,
                "all": "0"
            }).then(res => {
				let myId = this.$store.state.userInfo.TEAMModelId
                res.groupMembers.forEach(i => {
					if(i.sub.uploads.length){
						i.dimension = this.$GLOBAL.DIMENSIONS().find(j => j.code === res.abilities.find(k => k.id === i.sub.abilityId).dimension).val
						i.abilityName = res.abilities.find(j => j.id === i.sub.abilityId).no + ' ' + res.abilities.find(j => j.id === i.sub.abilityId).name
						i.time = i.sub.uploads.length ? this.$tools.formatTime(i.sub.uploads[0].time) : '-'
						i.myAppraise = i.sub.otherScore.find(j => j.tmdid === myId && j.roleType === 'member') ? i.sub.otherScore.find(j => j.tmdid === myId && j.roleType === 'member').score : -1
						this.otherList.push(i)
					}
                })
				console.log(this.otherList)
            })
        },

        doUpload(data) {
            this.reviewData = data
            this.isReview = true
            this.curReviewMode = 'self'
        },
        appraiseOther(data) {
            console.log(data)
            let reviewData = {
                id: data.sub.abilityId,
                uploads: data.sub.uploads,
                targetId: data.tmdid,
                targetName: data.tmdname
            }
            this.reviewData = reviewData
            this.isReview = true
            this.curReviewMode = 'other'
			console.log(this.curTab);
        },

        delApp() {
            this.$Modal.confirm({
                title: "您确实要删除该作业吗？",
                okText: "删除",
                cancelText: "取消",
                onOk: () => {
                    this.$Message.success("删除成功")
                },
            })
        },
        disApp(data) {
            this.curData = data
            this.isReview = true
        },
        cancelMo() {
            this.isDiscuss = false
        },
    },
    mounted() {
        this.getMyAbilities()
        this.getOtherSubs()
    },
    computed: {

    }
}
</script>

<style lang="less">
.application-container {
	height: 100%;
	background-color: #f7f7f7;
    .ivu-card {
        height: 100%;

        .ivu-card-body {
            height: 100%;

            .ivu-tabs {
                height: 100%;

                .ivu-tabs-content-animated {
                    height: 100%;
                }
            }
        }
    }

    .ivu-tabs .ivu-tabs-tabpane {
        height: 100%;
    }
}
</style>

<style lang="less" scoped>
.app-table {
    height: calc(100vh - 190px);
    padding: 0 5px;
    overflow: auto;
}

.application-container {
    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;
        }
    }
}
</style>
