<template>
    <div class="qbox" v-if="question.question_type != 3">
        <div class="title">
            {{ question.question_name }}（{{ question.question_type == 1 ? '单选' : question.question_type == 2 ? '多选' :question.question_type == 3 ? '问答' : '判断'}}）</div>
        <div class="tips" v-if="question.question_type == 2">注:本题可选择多个选项!</div>
        <div class="tips" v-else-if="question.question_type == 1">注:本题最多可选择1个选项!</div>
        <div class="options" v-if="question.question_type == 1 || question.question_type == 2 || question.question_type == 4">

            <div class="cell" v-for="(item, index) in question.case_item_question_option" :key="item.option_id" v-if="question.case_item_question_option">
                <div class="title">{{ item.option_value }}</div>
                <div class="progressbox">
                    <div class="progress">
                        <div class="inner" :style="{ width: 220 / 100 * item.proportion + 'px' }"></div>
                    </div>
                    <div class="numbox">
                        <div class="num">{{ item.select_num }}票</div>
                        <div class="precent">{{ item.proportion }}%</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="options_con" v-if="question.question_type == 3">
            <van-field readonly  :autosize="{ minHeight: 120 }" v-model="question.question_answer" rows="2" autosize type="textarea"
                placeholder="请输入内容" show-word-limit />
        </div>

    </div>
</template>

<script setup>
import { ref } from "vue";
const emit = defineEmits(['checkAnswer']);
const zimu = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
const props = defineProps({
    question: {
        type: Object,
        default: () => ({}),
    },
    disabled: {
        type: Boolean,
        default: false
    },
    pageIndex: {
        type: Number,
        default: 0
    },
    questionIndex: {
        type: Number,
        default: 0
    },
});


</script>

<style lang='scss' scoped>
.options_con {
    border-radius: 5px;
    border: .5px solid #efefef;
    margin-top: 15px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 15px 0px;
    padding-bottom: 8px;

    :deep() .van-cell {
        background: none;
    }

    :deep() .van-field__word-limit {
        color: #999999;
    }
}

.qbox {
    margin-bottom: 15px;

    .title {
        font-weight: bold;
        line-height: 20px;
        font-size: 16px;
        color: #333333;
    }

    .tips {
        margin-top: 8px;
        font-weight: 500;
        font-size: 12px;
        color: #999999;
    }

    .cell {
        border-bottom: 1px solid #efefef;
        background: #fff;
        margin-bottom: 12px;

        .title {
            margin: 0 10px;
            font-weight: 500;
            font-size: 14px;
            color: #1F1F1F;
        }

        .numbox {
            display: flex;
            font-size: 12px;
            color: #999999;

            .precent {
                margin-left: 5px;
            }
        }

        .progressbox {

            justify-content: space-between;
            align-items: center;
            margin: 8px 10px 15px;
            margin-bottom: 15px;
            display: flex;

            border-radius: 5px;

            .progress {
                margin-right: 10px;
                width: 220px;
                overflow: hidden;
                height: 5px;
                background: #EFF3FF;
                border-radius: 5px;
            }

            .inner {
                width: 80%;
                height: 5px;
                border-radius: 5px;
                background: #43C9C3;
            }
        }
    }

    .active {
        border: 1px solid #43C9C3;
    }

    .cell:last-child {
        margin-bottom: 0;
        border: none;
    }

    .options {
        margin-top: 15px;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        padding: 15px 0px;
        padding-bottom: 8px;
    }

    .img-icon {
        width: 19px;
        height: 19px;
    }
}
</style>
