<template>
    <div class="mta-short-answer-question" v-if="questionData.name">
        <el-row class="mta-first-row" type="flex">
            <el-col>
                <span class="wrap-shitiIndex" v-if="!!shitiNum">
                    <span v-if="isYueDu">({{shitiNum}})</span>
                    <span v-else>{{shitiNum}}.</span>
                </span>
                <!-- 试题题目 -->
                <div class="mta-SC-title" v-html="questionData.name">
                </div>
                <span class="mta-SC-score" v-if="getShowScore && !isYueDu">（{{questionData.score}}分）</span>
            </el-col>
        </el-row>
        <el-row class="mta-two-row" type="flex" v-if='audioOptions'>
            <mta-bus-audio-player
                    :options="audioOptions"
                    @updAudioPlaytimes="updAudioPlaytimes"
            >
            </mta-bus-audio-player>
        </el-row>
        <el-row class="mta-two-row" type="flex">
            <el-col>
                <!-- 试题内容区域 -->
                <!--<el-input
                        @change="inputChange"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入简答题答案"
                        v-model="textarea">
                </el-input>-->

                <mta-st-quill-editor
                        ref="editorQuill"
                        :value="textarea"
                        :quillEditorRef="quillEditorRef"
                        flg="1"
                        @richText="richText"
                        @clickUploadFile="clickUploadFile"
                        @syncValue="syncValue">
                </mta-st-quill-editor>
            </el-col>
        </el-row>
        <div class="mta-modal" v-if="getShowModel"></div>
        <up-load-file-for-jianda
                :option="option"
                :myfileLists="questionData.files"
                @getFileLists="handleGetFileLists"
        />
    </div>
</template>

<script>
    import { mapGetters }      from 'vuex';
    import { getStringByHtml } from '@/utils/common.js';
    import MtaStQuillEditor    from '@/components/management/QuillEditor.vue';
    import MtaBusAudioPlayer   from '@/components/custom/MtaBusAudioPlayer.vue';
    import upLoadFileForJianda from '@/components/client/Questions/upLoadFileForJianda.vue';

    export default {
        name:       'ShortAnswerQuestion',
        components: {
            MtaStQuillEditor,
            MtaBusAudioPlayer,
            upLoadFileForJianda,
        },
        props:      {
            questionData: { // 简答题数据
                require: true,
                type:    Object,
            },
            shitiIndex:   {
                type: String,
            },
            isYueDu:      {
                type:    Boolean,
                default: false,
            },
            yuduIndex:    {
                type: Number,
            },
            option:       {
                type:    Object,
                default: () => ({}),
            },
        },
        watch:      {
            questionData: {
                handler:   function (newVal, oldVal) {
                    this.textarea = newVal.reply;
                    let data = this.questionData;
                    if (data.adjunct) {
                        let arrItem = JSON.parse(data.adjunct);
                        for (const item of arrItem) {
                            if (item.type === 'audio') {
                                this.audioOptions = {};
                                this.audioOptions.src = item.src;
                                this.audioOptions.title = item.oriname.split('.')[0];
                                this.audioOptions.autoplay = false;
                                this.audioOptions.dragable = item.dragable;
                                this.audioOptions.curPlaytimes = newVal.playtimes;
                                this.audioOptions.playtimes = item.playtimes;
                            }
                        }
                    }
                },
                immediate: true,
            },
            shitiIndex:   {
                handler(newVal, oldVal) {
                    if (newVal) {
                        let c = newVal.split('-');
                        this.paragraph = c[0];
                        this.shitiNum = c[1];
                    }
                },
                immediate: true,
            },
            textarea:     {
                handler:   function (newVal, oldVal) {
                    this.debounce(this.changeStr, 1000);
                },
                immediate: true,
            },
        },
        computed:   {
            ...mapGetters(['getShowScore', 'getShowModel']),
        },
        data() {
            return {
                textarea:       this.questionData.reply === null ? '' : this.questionData.reply,
                // 段落
                paragraph:      null,
                shitiNum:       0,
                quillEditorRef: '',
                audioOptions:   null,
            };
        },
        created() {
            this.quillEditorRef = 'quillEditorRef' + Math.floor(Math.random() * 100000);
        },
        methods:    {

            clickUploadFile(data){
                this.$emit('clickUploadFile', data);
            },
            richText(){
                this.$emit('richText','richtext');
            },
            handleGetFileLists(data) {
                this.questionData.files = JSON.stringify(data);
                this.changeStr();
            },
            syncValue(flg, content) {
                this.content = content;
                this.textarea = content;
                if (this.isYueDu) {
                    this.$emit('reply', {
                        paragraph: this.paragraph,
                        type:      'jianda',
                        stId:      this.questionData.stId,
                        files:     this.questionData.files,
                        data:      content,
                        number:    this.yuduIndex,
                    });
                } else {
                    this.$emit('reply', {
                        paragraph: this.paragraph,
                        stId:      this.questionData.stId,
                        files:     this.questionData.files,
                        data:      content,
                        number:    this.shitiIndex - 1,
                    });
                }


            },
            /*inputChange(val) {
                // this.$emit('reply', [1, this.questionData.stId, val]);
                if (this.isYueDu) {
                    this.$emit('reply', {
                        paragraph: this.paragraph,
                        type:      'jianda',
                        stId:      this.questionData.stId,
                        data:      val,
                        number:    this.yuduIndex,
                    });
                } else {
                    this.$emit('reply', {
                        paragraph: this.paragraph,
                        stId:      this.questionData.stId,
                        data:      val,
                        number:    this.shitiIndex - 1,
                    });
                }

            },*/
            debounce:  function (fn, wait) {
                if (this.fun !== null) {
                    clearTimeout(this.fun);
                }
                this.fun = setTimeout(fn, wait);
            },
            changeStr: function () {
                if (this.isYueDu) {
                    this.$emit('reply', {
                        paragraph: this.paragraph,
                        type:      'jianda',
                        stId:      this.questionData.stId,
                        files:     this.questionData.files,
                        data:      this.textarea,
                        number:    this.yuduIndex,
                    });
                } else {
                    this.$emit('reply', {
                        paragraph: this.paragraph,
                        stId:      this.questionData.stId,
                        files:     this.questionData.files,
                        data:      this.textarea,
                        number:    this.shitiIndex - 1,
                    });
                }
            },
            updAudioPlaytimes(playtimes) {
                if (this.questionData.stId === 0) { // 阅读题
                    this.$emit('updAudioPlaytimesSub', {
                        stId:      this.questionData.stId,
                        playtimes: playtimes,
                    });
                } else { // 其他题
                    this.$emit('updAudioPlaytimes', {
                        stId:      this.questionData.stId,
                        playtimes: playtimes,
                    });
                }
            },
        },
    };
</script>
