<template>
    <div class="answer-record-container">
        <vuescroll ref="answer-record" @handle-scroll="checkBackTop">
            <div class="back-to-top fl-col-center" title="返回顶部" v-if="showBack" @click="handleBackToTop">
                <Icon type="ios-arrow-up" />
            </div>
            <div class="answer-record-header dark-iview-select">
                <span style="color:#aaaaaa;">搜学生：</span>
                <Select v-model="model11" filterable style="display: inline-block;width: 240px;" size="small">
                    <Option v-for="item in studentList" :value="item" :key="item">{{ item }}</Option>
                </Select>

            </div>
            <Icon type="md-close" class="close-answer-record" @click="closeAnswerDetail" />
            <div class="step-item-wrap dark-iview-table" v-for="(item,index) in steps" :key="index">
                <p class="step-name">{{item.name}}<span class="study-duration-span">学习时长：1天5小时32分</span></p>
                <div style="width:100%;padding-left:15px;padding-right:15px;">
                    <p class="question-label">作答记录：</p>
                    <Table :columns="columns" :data="data1" border>
                        <template slot-scope="{ row, index }" slot="index">
                            <span>{{index + 1}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="detail">
                            <span class="show-question-icon"><Icon type="md-eye"/></span>
                        </template>
                    </Table>
                    <p class="question-label">留言/提问：</p>
                    <div class="student-question-item">
                        <span class="question-info">这个问题怎么解决，上网查询了资料也没解决？</span>
                        <!--<Button type="primary" size="small" icon="ios-create">
                            回复
                        </Button>-->
                    </div>
                </div>
                <Divider v-if="index < (steps.length - 1)" dashed style="border-color: rgb(80, 80, 80);margin:50px 0px;"/>
            </div>
        </vuescroll>
    </div>
</template>/
<script>
    import WholeClassAnswer from './WholeClassAnswer.vue'
    export default {
        components: {
            WholeClassAnswer
        },
        props: {
            steps: {
                type: Array,
                default: () => {
                    return [
                        {
                            "createTime": 0,
                            "resource": [
                                "1bd0c98d-7753-47b0-b82a-1b775a9ec665",
                                "cfffb105-7a4d-483c-9aa2-6d062dca1be9",
                                "2f8599b3-841d-4270-a9af-7031839984a2",
                                "63b47337-8360-427f-8241-350263a7dae6"
                            ],
                            "item": [],
                            "name": "第一阶段：一次函数基础"
                        },
                        {
                            "createTime": 0,
                            "resource": [
                                "1bd0c98d-7753-47b0-b82a-1b775a9ec665",
                                "cfffb105-7a4d-483c-9aa2-6d062dca1be9",
                                "2f8599b3-841d-4270-a9af-7031839984a2",
                                "63b47337-8360-427f-8241-350263a7dae6"
                            ],
                            "item": [
                                {
                                    "question": "依次填入下列句子横线处的词语，最恰当的一项是(&nbsp;&nbsp;&nbsp;)<br>①.等到月升中天，清光从两棵梨树间筛洒而下，地上阴影<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>，此时尤为幽绝。<br>②.学校正积极<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;　</u>春季运动会，各项工作都作了明确而细致的分工。<br>③.一群四五岁孩子表演的《猫》剧十分有趣。他们或唱或跳，或打或闹，将猫的各种举止神态模仿得<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>。<br>④．用心去<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>花开的声音！你会发现那才是天下最美的风景！",
                                    "option": [
                                        {
                                            "code": "A",
                                            "value": "斑驳　筹备　惟妙惟肖　　聆听"
                                        },
                                        {
                                            "code": "B",
                                            "value": "斑斓　筹划栩栩如生　　倾听"
                                        },
                                        {
                                            "code": "C",
                                            "value": "斑斓　　筹备　栩栩如生　倾听"
                                        },
                                        {
                                            "code": "D",
                                            "value": "斑驳　　筹划　惟妙惟肖　　聆听"
                                        }
                                    ],
                                    "answer": [
                                        "A"
                                    ],
                                    "explain": "",
                                    "type": "Judge",
                                    "points": [
                                        "b32dcb15-9f13-4e8f-9f65-80e55e3b257d"
                                    ],
                                    "field": "知识",
                                    "children": [],
                                    "score": 0,
                                    "order": 326,
                                    "code": "habook0001",
                                    "periodCode": "c3e1e95a-561e-fabf-cce3-3a564782e443",
                                    "level": 4,
                                    "id": "342a6ad7-6a29-4b52-8a97-4e0d92c74428",
                                    "subjectCode": "Subject_Chinese",
                                    "lite": false,
                                    "createTime": 1582521737,
                                    "usageCount": 135
                                },
                                {
                                    "question": "依次填入下列句子横线处的词语，最恰当的一项是(&nbsp;&nbsp;&nbsp;)<br>①.等到月升中天，清光从两棵梨树间筛洒而下，地上阴影<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>，此时尤为幽绝。<br>②.学校正积极<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;　</u>春季运动会，各项工作都作了明确而细致的分工。<br>③.一群四五岁孩子表演的《猫》剧十分有趣。他们或唱或跳，或打或闹，将猫的各种举止神态模仿得<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>。<br>④．用心去<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>花开的声音！你会发现那才是天下最美的风景！",
                                    "option": [
                                        {
                                            "code": "A",
                                            "value": "斑驳　筹备　惟妙惟肖　　聆听"
                                        },
                                        {
                                            "code": "B",
                                            "value": "斑斓　筹划栩栩如生　　倾听"
                                        },
                                        {
                                            "code": "C",
                                            "value": "斑斓　　筹备　栩栩如生　倾听"
                                        },
                                        {
                                            "code": "D",
                                            "value": "斑驳　　筹划　惟妙惟肖　　聆听"
                                        }
                                    ],
                                    "answer": [
                                        "A"
                                    ],
                                    "explain": "",
                                    "type": "Judge",
                                    "points": [
                                        "b32dcb15-9f13-4e8f-9f65-80e55e3b257d"
                                    ],
                                    "field": "知识",
                                    "children": [],
                                    "score": 0,
                                    "order": 326,
                                    "code": "habook0001",
                                    "periodCode": "c3e1e95a-561e-fabf-cce3-3a564782e443",
                                    "level": 4,
                                    "id": "342a6ad7-6a29-4b52-8a97-4e0d92c74428",
                                    "subjectCode": "Subject_Chinese",
                                    "lite": false,
                                    "createTime": 1582521737,
                                    "usageCount": 135
                                }
                            ],
                            "name": "第二阶段：一次函数进阶"
                        },
                        {
                            "createTime": 0,
                            "resource": [
                                "1bd0c98d-7753-47b0-b82a-1b775a9ec665",
                                "cfffb105-7a4d-483c-9aa2-6d062dca1be9",
                                "2f8599b3-841d-4270-a9af-7031839984a2",
                                "63b47337-8360-427f-8241-350263a7dae6"
                            ],
                            "item": [],
                            "name": "第三阶段：一次函数高阶"
                        },
                    ]
                }
            }
        },
        data() {
            return {
                model11: '廖致远',
                studentList: ["尹航",
                    "刘雨菡",
                    "廖致远",
                    "向奕然",
                    "高嘉妍",
                    "李芷萱",
                    "刘嘉皑",
                    "曾沐澄",
                    "邱梦晗"],
                showBack: false,
                columns: [
                    {
                        type: 'expand',
                        width: 50,
                        render: (h, params) => {
                            return h(WholeClassAnswer, {
                                props: {
                                    row: params.row
                                }
                            })
                        }
                    },
                    {
                        title: '题号',
                        slot: 'index',
                        align:'center'
                    },
                    {
                        title: '首次作答答案',
                        key: 'ans',
                        align:'center'
                    },
                    {
                        title: '作答次数',
                        key: 'count',
                        align:'center'
                    },
                    {
                        title: '一次通过率（全班）',
                        key: 'percent',
                        align:'center'
                    }
                ],
                data1: [
                    {
                        count: 2,
                        ans: 'A',
                        percent:'61%'
                    },
                    {
                        count: 1,
                        ans: 'C',
                        percent:'84%'
                    },
                    {
                        count: 1,
                        ans: 'C',
                        percent:'69%'
                    },
                    {
                        count: 3,
                        ans: 'B',
                        percent:'30%'
                    }
                ]
            }
        },
        methods: {
            comfirmComment() {

            },
            showComment() {
                this.commentStatus = true
            },
            /*
             * 返回顶部
             */
            handleBackToTop() {
                this.$refs['answer-record'].scrollTo(
                    {
                        y: '0'
                    },
                    300
                )
            },
            checkBackTop(vertical, horizontal, nativeEvent) {
                if (vertical.scrollTop > 100) {
                    this.showBack = true
                } else {
                    this.showBack = false
                }
            },
            closeAnswerDetail() {
                this.$emit('closeAnswerDetail')
            }
        }
    }
</script>
<style scoped lang="less">
    @import "./AnswerRecord.less";
</style>
<style>
    .answer-record-header .ivu-select-input {
        color:white;
    }
</style>