<template>
	<div>
        <div class="questions" v-if="questionList.length > 0"  v-show="!resultStatus">
            <div class="top-tips">{{ form.title }}</div>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span class="questionName">{{ questionList[currentIndex - 1]['content'] }}</span>
                </div>
                <el-radio-group v-model="check" v-if="questionList[currentIndex - 1]['type'] == 'radio'">
                    <div class="" v-for="(item) in questionList[currentIndex - 1]['questionnaireQuestionItemList']" :key="item.id">
                        <el-radio :label="item.id">{{item.answerValue}}</el-radio>
                    </div>
                </el-radio-group>
                <el-checkbox-group v-model="checkBox" v-if="questionList[currentIndex - 1]['type'] == 'checkbox'">
                    <el-checkbox  v-for="(item) in questionList[currentIndex - 1]['questionnaireQuestionItemList']" :key="item.id" :label="item.id">{{ item.answerValue }}</el-checkbox>
                </el-checkbox-group>
                <el-input
                    v-if="questionList[currentIndex - 1]['type'] == 'textarea'"
                    type="textarea"
                    style="border: 0;"
                    :autosize="{ minRows: 3, maxRows: 6}"
                    placeholder="请输入其它意见"
                    v-model="textarea">
                </el-input>
            </el-card>
            <el-button size="large" type="primary" v-if="questionList[currentIndex - 1]['type'] == 'radio'" block round class="btn-submit" color="#01C1B5" :disabled="!check && !!isRequire" @click="onSubmit">提交</el-button>
            <el-button size="large" type="primary" v-if="questionList[currentIndex - 1]['type'] == 'checkbox'" block round class="btn-submit" color="#01C1B5" :disabled="checkBox.length <= 0 && !!isRequire" @click="onSubmit">提交</el-button>
            <el-button size="large" type="primary" v-if="questionList[currentIndex - 1]['type'] == 'textarea'" block round class="btn-submit" color="#01C1B5" :disabled="!textarea && !!isRequire" @click="onSubmit">提交</el-button>
        </div>

        <div class="resultModel" v-show="resultStatus">
            <img src="@/assets/images/pay_success.png" class="img" alt="">
            <p class="content">感谢您的参与！</p>
            <el-button size="large" type="primary" round class="btn-submit" @click="onSubmitClose">确认</el-button>
        </div>

	</div>
</template>

<script>
	export default {
		name: 'question',
        props: ['form', 'close'],
		data() {
			return {
                currentIndex: 1,
                questionList: [],
                check: null,
                isRequire: 1,
                checkBox: [],
                textarea: null,
                checkList: [],
                resultStatus: false
			}
		},
		async mounted() {
            try {
                this.questionList = this.form.questionnaireQuestionList || []
                console.log(this.questionList)
                this.isRequire = this.questionList[this.currentIndex - 1].isRequire
            } catch {
                //
            }
		},
		methods: {
            toggle(index) {
                let selectList = this.questionList[this.currentIndex - 1]
                if(selectList.type == 'radio') {
                    this.check = index
                } else if(selectList.type == 'checkbox') {
                    this.$refs.checkboxes[index].toggle()
                }
            },
            onSubmit() {
                let selectList = this.questionList[this.currentIndex - 1]
                if(selectList.type == 'radio' && selectList.isRequire && !this.check) {
                    this.$message.error('请回答当前问题')
                    return
                } else if(selectList.type == 'checkbox' && selectList.isRequire && this.checkBox.length <= 0) {
                    this.$message.error('请回答当前问题')
                    return
                } else if(selectList.type == 'textarea' && selectList.isRequire && !this.textarea) {
                    this.$message.error('请回答当前问题')
                    return
                }

                let answerList = selectList.questionnaireQuestionItemList || [] //当前题的选项
                let currentIsOver = 0 // 是否终止答题
                answerList.forEach(item => {
                    if(selectList.type == 'radio' && this.check == item.id) {
                        currentIsOver = item.isOver
                    } else if(selectList.type == 'checkbox' && this.checkBox.includes(item.id) && !currentIsOver) {
                        currentIsOver = item.isOver
                    }
                })

                // 判断是否在题目列表里面
                if(this.currentIndex <= this.questionList.length) {
                    if(selectList.type == 'radio') {
                        this.checkList[this.currentIndex - 1] = {
                            questionnaireQuestionId: selectList.id,
                            questionnaireQuestionItemIdList: this.check
                        }
                        this.check = null
                    } else if(selectList.type == 'checkbox') {
                        this.checkList[this.currentIndex - 1] = {
                            questionnaireQuestionId: selectList.id,
                            questionnaireQuestionItemIdList: this.checkBox.join(',')
                        }
                        this.checkBox = []
                    } else if(selectList.type == 'textarea') {
                        this.checkList[this.currentIndex - 1] = {
                            questionnaireQuestionId: selectList.id,
                            additionalValue: this.textarea
                        }
                        this.textarea = null
                    }

                    // 1 为终止答题
                    if(currentIsOver) {
                        this.onConfirm()
                        return
                    }

                    this.check = null
                    if(this.currentIndex == this.questionList.length) {
                        this.saveKey()
                        return
                    }

                    this.currentIndex++
                }
            },
            saveKey() {
                // this.$message.info('谢谢参与')
                this.resultStatus = true
            },
            async onConfirm() {
                // this.$message.info('谢谢参与')
                this.resultStatus = true
            },
            onSubmitClose() {
                this.close()
            }
		}
	}
</script>

<style lang="less" scoped>
.top-tips {
    color: #808080;
    font-size: 14px;
    padding: 0 0 10px;
}

.btn-submit {
    width: 90%;
    margin: 20px 5%;
}

.form-info {
    margin: 10px;
    width: auto;
    border-radius: 5px;
}
.questionName {
    padding-top: 5px;
    font-size: 16px;
    color: #444;
    font-weight: 500;
    line-height: 1.5;
}
/deep/.el-radio-group, /deep/.el-checkbox-group {
    width: 100%;
}
/deep/.el-radio__input.is-checked+.el-radio__label {
    color: #606266;
}
/deep/.el-radio, /deep/.el-checkbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding: 10px 0;
    .el-radio__label, .el-checkbox__label {
        padding-left: 0;
    }
}
/deep/.el-button--primary {
    background: #01c1b5 !important;
    border-color: #01c1b5 !important;
}

.resultModel {
    .img {
        width: 145px;
        margin: 0 auto;
        display: block;
        // padding-top: 50px;
    }
    .content {
        font-size: 20px;
        color: #1A1A1A;
        text-align: center;
        font-weight: 500;
        padding-bottom: 30px;
    }
}
</style>