<template>
    <div class="question-info-container">
        <vuescroll ref="answer-record" @handle-scroll="checkBackTop">
            <Icon type="md-close" class="close-question-info" @click="closeAnswerDetail" />
            <p class="question-label">留言/问题</p>
            <div class="step-item-wrap dark-iview-input">
                <p class="step-name">一次函数初阶</p>
                <div v-for="(item,index) in questions" :key="index" class="question-info-item">
                    <p>
                        <span class="student-label">{{item.student}}</span>
                        <Time :time="item.time" style="margin-left:15px;display:inline-block;color:#CCCCCC;font-size: 12px;" />
                    </p>
                    <p class="question-info">
                        {{item.info}}
                    </p>
                    <span v-if="!item.edit" @click="answerTheQue(index)" class="answer-label"><Icon type="ios-create" size="16" />回复</span>
                    <div v-else>
                        <Input v-model="value17" rows="5" maxlength="100" type="textarea" placeholder="Enter something..." style="width: 400px" />
                        <Button size="small" @click="item.edit = false" style="vertical-align: bottom;display:block;margin-top:5px;">确认</Button>
                    </div>

                </div>
            </div>
            <div class="step-item-wrap dark-iview-input">
                <p class="step-name">一次函数初阶</p>
                <div v-for="(item,index) in questions" :key="index" class="question-info-item">
                    <p>
                        <span class="student-label">{{item.student}}</span>
                        <Time :time="item.time" style="margin-left:15px;display:inline-block;color:white;font-size: 12px;" />
                    </p>
                    <p class="question-info">
                        {{item.info}}
                    </p>
                    <span v-if="!item.edit" @click="answerTheQue(index)" class="answer-label"><Icon type="ios-create" size="16" />回复</span>
                    <div v-else>
                        <Input v-model="value17" rows="5" maxlength="100" type="textarea" placeholder="Enter something..." style="width: 400px" />
                        <Button size="small" @click="item.edit = false" style="vertical-align: bottom;display:block;margin-top:5px;">确认</Button>
                    </div>

                </div>
            </div>
            <div class="step-item-wrap dark-iview-input">
                <p class="step-name">一次函数初阶</p>
                <div v-for="(item,index) in questions" :key="index" class="question-info-item">
                    <p>
                        <span class="student-label">{{item.student}}</span>
                        <Time :time="item.time" style="margin-left:15px;display:inline-block;color:white;font-size: 12px;" />
                    </p>
                    <p class="question-info">
                        {{item.info}}
                    </p>
                    <span v-if="!item.edit" @click="answerTheQue(index)" class="answer-label"><Icon type="ios-create" size="16" />回复</span>
                    <div v-else>
                        <Input v-model="value17" rows="5" maxlength="100" type="textarea" placeholder="Enter something..." style="width: 400px" />
                        <Button size="small" @click="item.edit = false" style="vertical-align: bottom;display:block;margin-top:5px;">确认</Button>
                    </div>

                </div>
            </div>
        </vuescroll>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                value17:'',
                questions: [
                    {
                        info:'css水平、垂直居中的写法，请至少写出4种？',
                        student: '李政谦',
                        time:'2020-08-03'
                    },
                    {
                        info:'1rem、1em、1vh、1px各自代表的含义？',
                        student:'黎秭瑞',
                        time:'2020-08-04'
                    },
                    {
                        info:'画一条0.5px的直线？',
                        student:'曾泓博',
                        time:'2020-08-04'
                    },
                    {
                        info:'说一下盒模型？',
                        student:'陈婧汐',
                        time:'2020-08-04'
                    },
                    {
                        info:'画一个三角形？',
                        student:'赖昱贝',
                        time:'2020-08-04'
                    },
                    {
                        info:'清除浮动的几种方式，及原理？',
                        student:'胥静宇',
                        time:'2020-08-04'
                    }
                ]
            }
        },
        methods: {
            answerTheQue(index) {
                this.$set(this.questions[index], 'edit', true)
            },
            closeAnswerDetail() {
                this.$emit('closeAnswerDetail')
            },
            checkBackTop(vertical, horizontal, nativeEvent) {
                if (vertical.scrollTop > 100) {
                    this.showBack = true
                } else {
                    this.showBack = false
                }
            },
        }
    }
</script>
<style scoped lang="less">
    @import "./QuestionInfo.less";
</style>
<style>

</style>