<template>
    <div class="qbox">
        <div class="title">结合患者目前情况，下一步该如何治疗?</div>
        <div class="tips">注:本题可选择多个选项!</div>
        <div class="options">
            <van-radio-group v-model="checked">
                <div class="cell">
                    <van-radio name="a">
                        复选框 a
                        <template #icon="props">
                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                        </template>
                    </van-radio>
                </div>
                <div class="cell">
                    <van-radio name="b">
                        复选框 b
                        <template #icon="props">
                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                        </template>
                    </van-radio>
                </div>
            </van-radio-group>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import activeIcon from "@/assets/select.png";
import inactiveIcon from "@/assets/noselect.png";
const checked = ref('');
</script>

<style lang='scss' scoped>
.qbox {
    .title {
        font-weight: bold;
        font-size: 16px;
        color: #333333;
    }

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

    .cell {
        border-radius: 10px;
        border: 1px solid #B8B8B8;
        padding: 12px;
        background: #fff;
        margin-bottom: 12px;
    }
    .active{
        border: 1px solid #43C9C3; 
    }

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

    .options {
        margin-top: 15px;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        padding: 15px 12px;
    }
    .img-icon{
        width: 19px;
        height: 19px;
    }
}
</style>
