const BASE_URL = '/mobile/question/h5'
const onlineAnswer = {
    template:
        `
            <div style="height: 100%">
                <div style="max-height: 700px;overflow-y: scroll">
                    <div class="btDiv mb10" title="">
                        <el-row style="text-align: center">
                            <h2>{{questionData.qtitle}}</h2>
                        </el-row>
                    </div>
                    <div class="survey-container" v-if="!mLoading">
                        <!-- 顶部信息区 -->
                        <el-card class="survey-head-top" shadow="never">
                            <!-- 轮次/日期选择 -->
                            <template v-if="questionData.qlx==2">
                                <el-dropdown @command="randomCountSelect"
                                             v-if="questionData.ctMode==2 && isSameDay && randomCount > 0">
                                    <el-button>
                                        第{{randomCount}}轮<i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="i in userHasAnswerRandomNum" :key="i"
                                                          :command="{val: i}">第{{i}}轮
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>

                                <el-date-picker
                                        v-else-if="questionData.ctMode==1 || (questionData.ctMode==2 && !isSameDay)"
                                        v-model="currentDate"
                                        type="date"
                                        :disabled-date="disabledDate"
                                        @change="dateChange">
                                </el-date-picker>
                            </template>

                            <!-- 分数显示 -->
                            <span class="score" v-if="finishAnswer && (currentScore || currentScore===0)">
            {{questionData.calcScoreMode==1 ? '今日最高成绩' : '得分'}}：{{currentScore}}
          </span>

                            <!-- 计时器 -->
                            <span v-if="questionData.enableTimer && !finishAnswer">
            剩余时间：{{remainder}}
          </span>
                        </el-card>

                        <!-- 题目列表 -->
                        <el-table :data="issueList"
                                  class="issueList mt10"
                                  default-expand-all="true"
                                  highlight-current-row="true"
                                  style="width: 100%">
                            <el-table-column align="left" header-align="left" label="">
                                <template scope="issue">
                                    <el-col :span="1">
                                        <span style="color: red" v-if="issue.row.iisbd">*</span>
                                        <span style="font-weight: bolder">{{issue.$index+1}}.</span>
                                    </el-col>
                                    <el-col :span="23">
                                        <el-row>
                                            <el-col :span="1" v-if="issue.row.fraction">
                                                <span>({{issue.row.fraction}}分)</span>
                                            </el-col>
                                            <el-col :span="23" style="display: flex">
                                                <span v-html="issue.row.iname"></span>
                                                <span v-if="issue.row.itx===1" size="mini" style="font-weight: bold">
                                                ({{issue.row.iisdx ? '单选' : '多选'}})
                                            </span>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <div style="color: rgb(160,160,160)" v-html="issue.row.its"
                                                 v-if="!isNull(issue.row.its)"></div>
                                        </el-row>
                                        <el-row>
                                            <el-row v-for="wor,idx in issue.row.wors">
                                                <el-row style="margin-top: 5px" v-if="wor.wimg">
                                                    <el-image
                                                            :src="FILE_STREAM_PREVIEW_ADDRESS + '?id=' +wor.wimg"
                                                            fit="fill"
                                                            style="max-width: 100px;max-height: 100px"></el-image>
                                                </el-row>

                                                <el-row style="margin-top: 5px"
                                                        v-if="!isNull(wor.wimg)">
                                                    <div style="color: rgb(160,160,160);text-align: left">
                                                        <div v-html="wor.wsm"></div>
                                                    </div>
                                                </el-row>

                                                <!--                                            <el-radio v-if="issue.row.iisdx==true"-->
                                                <!--                                                      :label="idx"-->
                                                <!--                                                      v-model="issue.row.userSelect"-->
                                                <!--                                                      border-->
                                                <!--                                                      style="margin-bottom: 5px;"-->
                                                <!--                                                      :disabled="finishAnswer || finishAllAnswer"-->
                                                <!--                                                      size="small">-->
                                                <!--                                                <span>{{wor.wtxt}}</span>-->
                                                <!--                                            </el-radio>-->
                                                <!--                                            :disabled="finishAnswer || finishAllAnswer"-->
                                                <el-checkbox style="margin-bottom: 5px;"
                                                             class="custom-disabled-checkbox"
                                                             border
                                                             size="small"
                                                             v-model="issue.row.userSelect"
                                                             :key="idx"
                                                             :label="wor.wid">
                                                    <span>{{wor.wtxt}}</span>
                                                </el-checkbox>

                                                <span v-else-if="wor.wistk==true" class="inputParent">
                                                <el-input
                                                        size="mini"
                                                        style="border-top: none"
                                                        disabled
                                                        v-model="wor.tktxt"></el-input>
                                                <span style="color:red;"
                                                      v-if="wor.wisbt==true">*</span>
                                            </span>

                                                <el-row style="margin-top: 5px"
                                                        v-if="isNull(wor.wimg)&&!isNull(wor.wsm)">
                                                    <div style="color: rgb(160,160,160)">
                                                        <div v-html="wor.wsm"></div>
                                                    </div>
                                                </el-row>
                                            </el-row>
                                        </el-row>
                                        <el-row v-if="issue.row.itx==2">
                                            <el-input size="small" style="width: 50%"
                                                      v-for="wor in issue.row.wors"
                                                      v-model="issue.row.tktxt"></el-input>
                                        </el-row>

                                        <div v-if="finishAnswer" class="question-result">
                                        <span :class="issue.row.isEqual ? 'text-success' : 'text-danger'">
                                            {{issue.row.isEqual ? '回答正确' : '回答错误'}}
                                        </span>
                                            <span>
                                            正确答案：{{issue.row.wors.filter(v=>v.correct).map(v=>v.wtxt).join('')}}
                                        </span>
                                        </div>
                                    </el-col>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

                <div class="page-control" style="display: flex;justify-content: center;margin-top: 10px">
                    <el-button v-if="!finishAnswer && !questionData.enableTimer"
                               type="primary"
                               @click="save">保存
                    </el-button>
                    <el-button v-if="!finishAnswer"
                               type="primary"
                               @click="submit">提交
                    </el-button>
                    <el-button v-if="canAnswerAgain && finishAnswer"
                               type="primary"
                               @click="answerAgain">再答一次
                    </el-button>
                </div>
            </div>
        `, data() {
        return {
            questionData: {
                issues: []
            },
            currentIssueIndex: 0,
            replyInfo: [],
            finishAnswer: false,
            finishAllAnswer: false,
            mLoading: true,

            //用户已答题总轮数
            randomCount: null,
            currentRandomCountScore: 0,
            sumScore: 0,
            randomCountSheetShow: false,
            randomActions: [],
            currentRandomCount: null,

            //能否再次答题
            canAnswerAgain: false,

            //当前的时间（针对定时定题）
            currentDate: moment().format('YYYY-MM-DD'),

            //当前分数
            currentScore: null,

            //获取用户已回答的轮数 针对单天随机
            userHasAnswerRandomNum: 0,

            //倒计时计时器
            timerInterval: null, //答题时间（使用秒）
            countDownSeconds: 0, //剩余时间
            remainder: null,

            isNull(val) {
                return !val
            },
        }
    },

    computed: {
        issueList() {
            return this.questionData.issues
        }, titleMsg() {
            const radios = this.issueList.filter(v => v.itx === 1 && v.iisdx)
            const checkBoxes = this.issueList.filter(v => v.itx === 1 && !v.iisdx)

            const radioScore = radios && radios.length > 0 ? radios[0].fraction : 0
            const checkBoxesScore = checkBoxes && checkBoxes.length > 0 ? checkBoxes[0].fraction : 0

            const radioScoreSum = radios.map(v => v.fraction ? v.fraction : 0).reduce((a, b) => a + b, 0)
            const checkBoxesScoreSum = checkBoxes.map(v => v.fraction ? v.fraction : 0).reduce((a, b) => a + b, 0)

            const sumScore = radioScoreSum + checkBoxesScoreSum

            let radiosText = ''
            let checkBoxesText = ''

            if (radios && radios.length > 0) {
                radiosText = "单选题" + radios.length + "题，每题" + radioScore + "分，合计" + radioScoreSum + "分；"
            }
            if (checkBoxes && checkBoxes.length > 0) {
                checkBoxesText = "多选题" + checkBoxes.length + "题，每题" + checkBoxesScore + "分，合计" + checkBoxesScoreSum + "分；总分" + sumScore + "分。"
            }
            return "说明：" + radiosText + checkBoxesText
        },

        fullScore() {
            return this.issueList.map(v => v.fraction ? v.fraction : 0).reduce((a, b) => a + b)
        }, radioNum() {
            return this.issueList.filter(v => v.idx === 1 && v.iisdx).map(v => v.fraction ? v.fraction : 0).reduce((a, b) => a + b)
        }, checkBoxNum() {

        },

        //判断是否为同一天
        isSameDay() {
            if (this.questionData.startTime && this.questionData.endTime) {
                return moment(this.questionData.startTime).isSame(moment(this.questionData.endTime), 'day')
            }
            return false
        }
    },

    methods: {
        openRandomCount() {
            this.randomCountSheetShow = true
            this.randomActions = []

            if (this.questionData.qlx == 2 && this.questionData.ctMode == 2 && this.isSameDay) {
                for (let i = 0; i < this.userHasAnswerRandomNum; i++) {
                    this.randomActions.push({
                        name: '第' + (i + 1) + '轮', val: i + 1
                    })
                }
            } else if (this.questionData.qlx == 2 && (this.questionData.ctMode == 1 || (this.questionData.ctMode == 2 && !this.isSameDay))) {
                const {startTime, endTime} = this.questionData
                const startMoment = moment(startTime)
                const endMoment = moment(endTime)
                const now = moment()
                // 计算两个日期之间相差的天数
                const daysDifference = endMoment.diff(startMoment, 'days')
                for (let i = 0; i <= daysDifference; i++) {
                    this.randomActions.push({
                        name: startMoment.clone().add(i, 'days').format('YYYY-MM-DD'),
                        val: startMoment.clone().add(i, 'days').format('YYYY-MM-DD'),
                        disabled: moment(startMoment.clone().add(i, 'days').format('YYYY-MM-DD')).isAfter(now)
                    })
                }
            }
        }, async randomCountSelect(val) {
            if (this.questionData.qlx == 2 && this.questionData.ctMode == 2 && this.isSameDay) {
                this.randomCount = val.val
            } else if (this.questionData.qlx == 2 && this.questionData.ctMode == 2 && !this.isSameDay) {
                this.currentDate = val.val
            } else if (this.questionData.qlx == 2 && this.questionData.ctMode == 1) {
                this.currentDate = val.val
            }
            await this.getQuestionData()
            await this.checkUserFinishAnswer()
            await this.checkCanAnswerAgain()
            await this.getScore()
        },

        async getQuestionData() {
            const resp = await $.get(BASE_URL + '/questionInfo/' + this.id, {
                currentDate: this.currentDate, randomCount: this.randomCount
            })
            this.questionData = resp.data
        },

        // cellToggle(issue, worId) {
        //     if (this.finishAnswer || this.finishAllAnswer) {
        //         return
        //     }
        //     this.toggle(issue, worId)
        // },
        //
        // toggle(issue, worId) {
        //     //单选
        //     if (issue.iisdx) {
        //         this.$refs['checkboxGroup' + issue.iid][0].toggleAll(false)
        //     } else {
        //
        //     }
        //     console.log(issue.userSelect)
        //     this.$refs['checkboxes' + worId][0].toggle()
        //     setTimeout(() => {
        //         console.log(issue.userSelect)
        //     })
        // },

        save() {
            this.$confirm('保存后下次可继续做答，您确定要保存吗？').then(async () => {
                const replies = this.questionData.issues.map(v => {
                    return {
                        qid: v.iid, issueId: v.iid, userSelect: v.userSelect,
                    }
                })

                const {code} = await $.post(BASE_URL + '/saveAnswer', {
                    replies: JSON.stringify(replies),
                    questionId: this.questionData.qid,
                    isSave: true,
                    randomCount: this.randomCount
                })
                this.$modal.closeLoading()
                if (code === 0) {
                    this.$message.success('保存成功')
                } else {
                    this.$message.success('保存失败')
                }
            })
        },

        submit() {
            const iids = this.questionData.issues.filter(v => !v.userSelect).map(v => v.iid)

            if (iids.length > 0) {
                this.$toast('您还有' + iids.length + '题未作答，请答完后再提交！')
                document.getElementById('issue' + iids[0]).scrollIntoView({
                    behavior: 'smooth', block: 'center', 'inline': 'start'
                });
                return
            }

            const msg = '一旦提交不可修改，您确定要提交吗？'

            this.$modal.confirm(msg).then(async () => {
                this.autoSubmit()
            })
        },

        async autoSubmit() {
            const replies = this.questionData.issues.map(v => {
                return {
                    qid: this.id, issueId: v.iid, userSelect: v.userSelect,
                }
            })

            let takeTime = null
            if (this.questionData.enableTimer) {
                takeTime = this.questionData.timerMinute * 60 - this.countDownSeconds
            }

            const {code} = await $.post(BASE_URL + '/saveAnswer', {
                replies: JSON.stringify(replies),
                questionId: this.questionData.qid,
                isSave: false,
                randomCount: this.randomCount,
                takeTime: takeTime
            })
            this.$modal.closeLoading()
            if (code === 0) {
                this.$modal.msg('提交成功')
                await this.getUserHasAnswerRandomNum()
                await this.checkUserFinishAnswer()
                await this.getReply()
                await this.assignmentAnswer()
                await this.checkUserFinishAnswer()
                await this.checkCanAnswerAgain()
                await this.getScore()
            }
        },

        //获取回答信息
        async getReply() {
            const resp = await $.get(BASE_URL + '/answerInfo/' + this.id, {
                randomCount: this.randomCount, currentDate: this.currentDate
            })
            this.replyInfo = resp.data
        },

        //用户是否全部答完提交
        async checkUserFinishAnswer() {
            this.mLoading = true
            const resp = await $.get(BASE_URL + '/checkUserFinishAnswer', {
                questionId: this.id, randomCount: this.randomCount, currentDate: this.currentDate
            })
            this.mLoading = false
            this.finishAnswer = resp.data
            await this.getReply()
            await this.assignmentAnswer()
        },

        //答案赋值
        assignmentAnswer() {
            this.questionData.issues.forEach((issue,issueIndex) => {
                const rwids = this.replyInfo.filter(v => v.issueId === issue.iid).map(v => v.rwid)
                // rwids.forEach(rwid => {
                //     // this.toggle(issue, rwid)
                //     issue.userSelect = rwid
                // })
                // issue.userSelect = rwids
                this.$set(this.questionData.issues[issueIndex],'userSelect',rwids)

                const wids = issue.wors.filter(v => v.correct).map(v => v.wid)
                const userSelects = this.replyInfo.filter(v => v.issueId === issue.iid).map(v => v.rwid)
                const isEqual = wids.length === userSelects.length && wids.every(value => userSelects.includes(value))
                issue.isEqual = isEqual
            })
        },

        async answerAgain() {
            if (this.questionData.ctMode === 3) {
                await this.onOpen(this.id)
                this.finishAnswer = false
                this.questionData.issues.forEach((issue,issueIndex) => {
                    issue.wors.forEach(wor => {
                        this.$set(this.questionData.issues[issueIndex],'userSelect',[])
                    })
                })
                this.checkTimer()
            } else {
                // this.finishAnswer = false
                // setTimeout(() => {
                //     this.questionData.issues.forEach(issue => {
                //         issue.wors.forEach(wor => {
                //             // this.$refs['checkboxes' + wor.wid][0].toggle(false)
                //             wor.userSelect = []
                //         })
                //     })
                // }, 0)
                // this.checkTimer()
            }
        },

        async getUserHasAnswerRandomNum() {
            const resp = await $.get(BASE_URL + '/getUserHasAnswerRandomNum', {
                questionId: this.id
            })
            this.userHasAnswerRandomNum = resp.data
            this.randomCount = this.userHasAnswerRandomNum
        },

        async checkCanAnswerAgain() {
            const resp = await $.get(BASE_URL + '/checkCanAnswerAgain', {
                questionId: this.id, randomCount: this.randomCount, currentDate: this.currentDate
            })
            this.canAnswerAgain = resp.data
        },

        async getScore() {
            const resp = await $.get(BASE_URL + '/getScore/', {
                questionId: this.id, randomCount: this.randomCount, currentDate: this.currentDate
            })
            this.currentScore = resp.data
        },

        checkTimer() {
            if (this.questionData.enableTimer) {
                if (this.timerInterval) {
                    clearInterval(this.timerInterval)
                }
                if (!this.finishAnswer) {
                    this.$alert(
                        '本次答题时间' + this.questionData.timerMinute + '分钟，请尽快完成！', '提示'
                    ).then(() => {
                        this.countDownSeconds = this.questionData.timerMinute * 60
                        this.updateCountdown()
                        this.timerInterval = setInterval(() => {
                            this.updateCountdown()
                        }, 1000)
                    });
                }
            }
        },

        updateCountdown() {
            // 计算剩余的分钟和秒数
            let mins = Math.floor(this.countDownSeconds / 60)
            let secs = this.countDownSeconds % 60
            // 格式化时间，确保分钟和秒数始终是两位数
            mins = mins < 10 ? '0' + mins : mins;
            secs = secs < 10 ? '0' + secs : secs;
            this.remainder = mins + ':' + secs
            // 如果倒计时结束，显示结束信息
            if (this.countDownSeconds <= 0) {
                this.remainder = '时间到'
                clearInterval(this.timerInterval)
                this.$alert(
                    '答题时间到，请点击确认提交答案！', '提示'
                ).then(() => {
                    this.autoSubmit()
                })
            } else {
                this.countDownSeconds = this.countDownSeconds - 1
            }
        },

        async onOpen(id) {
            if (this.timerInterval) {
                clearInterval(this.timerInterval)
            }
            this.id = id
            await this.getQuestionData()
            await this.checkCanAnswerAgain()
            await this.getUserHasAnswerRandomNum()
            await this.checkUserFinishAnswer()
            await this.getScore()
            await this.checkTimer()
        }

    },

    async created() {

    },

    style: /*language=CSS*/ `
        .custom-disabled-checkbox{
            pointer-events: none;
        }
    `
}