<template>
    <div class="component-questionnaire">
        <!-- 问卷的基本操作栏 -->
        <p class="qn-title">{{currentQn.name}}</p>

        <p class="qn-description" v-html="currentQn.description"></p>
        <div class="qn-item-box">
            <div v-if="items.length === 0" class="no-data-text">
                <img src="@/assets/icon/no_data.svg" width="120" />
                <span style="margin-top:15px;color:#808080">{{ $t('survey.questionaire.noItemData') }}</span>
            </div>
            <!-- 问卷题目单元 -->
            <div v-else>
                <transition-group type="transition" :name="!drag ? 'flip-list' : null">
                    <div class="qn-item" v-for="(item,index) in items" :key="index">
                        <div class="qn-item-content">
                            <!-- 题干 -->
                            <p class="qn-stem">
                                <span style="color: red;" v-show="item.required">* </span>
                                <span>{{ index + 1 }}. </span>
                                <span v-html="item.question"></span>
                                <span>( {{ typeList[item.type] }} )</span>
                            </p>
                            <!-- 单选题-选项 -->
                            <RadioGroup v-model="answer[index]" v-if="item.type === 'single' || item.type === 'judge'">
                                <Radio v-for="(option,optionIndex) in item.option" :key="optionIndex" :label="option.code">
                                    <span v-html="getSimpleText(option.value)"></span>
                                </Radio>
                            </RadioGroup>
                            <!-- 多选题-选项 -->
                            <CheckboxGroup v-model="answer[index]" v-if="item.type === 'multiple'">
                                <Checkbox v-for="(option, optionIndex) in item.option" :key="optionIndex" :label="option.code">
                                    <span v-html="getSimpleText(option.value)"></span>
                                </Checkbox>
                            </CheckboxGroup>
						</div>
                        <!-- <div class="qn-item-charts" v-if="currentQn.progress === 'finish' && item.type !== 'subjective'">
							<BaseMiniBar :barId="'minibar' + index" :barData="item.result || []"></BaseMiniBar>
						</div> -->
                    </div>
                </transition-group>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ["exam"],
    data(vm) {
        return {
            answer: [],
            curIndexList: [],
            curItem: null,
            isUpdate: false,
            barData: [],
            editIndex: null,
            editable: false,
            isShowAnalysis: false,
            isShowAllAnalysis: false,
            addModal: false,
            drag: false,
            radioModel: '',
            multipleModel: [],
            items: [],
            itemAnswers: [],
            curType: '',
            typeList: {
                'single': vm.$t('survey.questionaire.single'),
                'multiple': vm.$t('survey.questionaire.multiple'),
                'judge': vm.$t('survey.questionaire.judge'),
                'subjective': vm.$t('survey.questionaire.subjective')
            },
            rightAns: [],
            haveAns: [],
        };
    },
    created() { },
    methods: {
        async getFullSurvey(examItem) {
            this.answer = []
            this.rightAns = []
            this.items = await this.getBlobItems(examItem)
            this.items.forEach((item, index) => {
                item.answer = item.answer.sort()
                this.rightAns.push(item.answer)
            })
            console.log(this.haveAns);
            if(this.haveAns.length) {
                this.$emit('have-answer', {
                    answer: this.haveAns,
                    rightAns: this.rightAns,
                })
            }
        },

        // 提取富文本内容中的文本
        getSimpleText(html) {
            var r = /<(?!img|video|audio).*?>/g;
            return html.replace(r, "").replace(/&nbsp;/g, '　');
        },


        // 获取blob里的试题数据
        getBlobItems(qnItem) {
            return new Promise(async (resolve, reject) => {
                let blobHost = JSON.parse(decodeURIComponent(localStorage.school_profile, "utf-8")).blob_uri
                // 根据试卷的Blob地址 去读取JSON文件
                let sasString = await this.$tools.getSchoolSas()
                // 如果是区级
                if(qnItem.owner === 'area'){
					blobHost = this.$store.state.user.osblob_uri
					sasString = { sas : '?' + this.$store.state.user.osblob_sas }
				}
                let promiseArr = []
                let indexJson = JSON.parse(await this.$tools.getFile(blobHost + qnItem.blob + sasString.sas))
                if (indexJson.slides.length) {
                    for (let item of indexJson.slides) {
                        promiseArr.push(new Promise(async (r, j) => {
                            try {
                                let itemJson = JSON.parse(await this.$tools.getFile(blobHost + item + sasString.sas))
                                r(itemJson)
                            } catch (e) {
                                j(e)
                            }
                        }))
                    }
                    Promise.all(promiseArr).then(result => {
                        resolve(result)
                    }).catch(err => {
                        reject(err)
                    })
                } else {
                    resolve([])
                }

            })
        },

        // 获取blob里的试题数据
        getBlobJsonFile(scope, url) {
            return new Promise(async (resolve, reject) => {
                let blobHost = scope === 'private' ? JSON.parse(decodeURIComponent(localStorage.user_profile, "utf-8")).blob_uri : JSON.parse(decodeURIComponent(localStorage.school_profile, "utf-8")).blob_uri
                // 根据试卷的Blob地址 去读取JSON文件
                let sasString = scope === 'private' ? await this.$tools.getPrivateSas() : await this.$tools.getSchoolSas()
                try {
                    let itemJson = JSON.parse(await this.$tools.getFile(blobHost + url + sasString.sas))
                    resolve(itemJson)
                } catch (e) {
                    reject(e)
                }
            })
        },
    },
    computed: {
        dragOptions() {
            return {
                animation: 200,
                group: "description",
                disabled: this.currentQn.progress !== 'pending',
                ghostClass: "ghost"
            };
        }
    },
    watch: {
        exam: {
            handler(n, o) {
                if (n) {
                    this.haveAns = []
                    this.currentQn = n
                    if(n.teachers.length) {
                        let teacherAr = n.teachers.find(item => {
                            return item.id == this.$store.state.userInfo.TEAMModelId
                        })
                        this.haveAns = teacherAr.answer
                        
                    }
                    this.getFullSurvey(n)
                }
            },
            immediate: true,
            deep: true
        },
        answer: {
            handler(n, o) {
                this.$emit('answer-change', {
                    answer: n,
                    count: this.items.length,
                    rightAns: this.rightAns
                })
            }
        }
    }
};
</script>

<style lang="less" scope>
@import "./DoSurvey.less";
</style>

