<template>
    <div class="content" v-if="num.length > 0">
        <div class="content-input" v-for="(item,index) of num" :key="index">
            <span class="complete-index">{{$t("studentWeb.exam.emput")}}{{(index+1)}}：</span>
            <Input @on-change="getInput(index)" v-model="examInfo[index]" :placeholder="$t('studentWeb.exam.inputAnswers')" style="width:45%" />
        </div>
    </div>
</template>
<script>
    export default {
        components: {

        },
        props: {
            index: {
                type: Number,
                default: -1
            },
            textData: {
                type: Array,
                default: () => {
                    return []
                }
            },
            num: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                editorContent: [],
                examInfo: [],
                editorBox:[]
            }
        },
        methods: {
            getInfo() {
                this.examInfo = []
                if (this.num.length) {
                    if (this.textData.length > 0) {
                        this.examInfo = [...this.textData]
                    } else {
                        this.num.map(() => {
                            this.examInfo.push('')
                        })
                    }

                }
            },
            getInput(data) {
                if (data !== undefined) {
                    this.$emit("dataChange", this.examInfo, this.index)
                }
            }
        },
        mounted() {
            this.getInfo()
        },
        watch: {
            index() {
                this.getInfo()
                deep: true;
            }
        }
	}
</script>
<style scoped>
    .content {
        width: 100%;
        height: 100%;
        display:inline;
    }

    #completeArea {
        width: 100%;
    }
    .complete-index{
        width:80px;
        height:35px;
        margin-top:15px;
    }
    .content-input{
        width:100%;
        height:100%;
        margin-bottom:15px;
        display:flex;
    }
</style>
