<template>
    <!-- 题目行 -->
    <div class="question_header">
        <span class="q_title" :class="{required_mark:isRequired(titleMsg)}">{{ titleIndex + 1 }}.{{ titleMsg.questionTitleName }}</span>
        <span class="q_type_tag">[{{ qustionTypeToName(titleMsg.questionType) }}]</span>
    </div>
</template>


<script setup lang="ts">
import {qustionTypeToName } from '@/components/commonDictConvert';
// 辅助函数：判断是否必填
const isRequired = (item) => {
  return item.extraConfig && item.extraConfig.includes('required');
};

interface TitleMsg {
    questionTitleName:string,  //问题名称
    questionType:number,       //问题类型 单选/多选/问答...
}

const props = defineProps({
    titleMsg:{
        type:Object as () => TitleMsg,
        required:true
    },
    titleIndex:{
        type:Number,
        required:true,
    }
})

</script>


<style lang="scss" scoped>
.question_header {
    display: flex;
    align-items: baseline;
    margin-bottom: 16px;
    font-size: 14px;
    color: #000;

    .q_title {
        &.required_mark {
            padding-right: 6px;
            position: relative;
            &::after{
                position: absolute;
                right: 0;
                top:0;
                content:'*';
                width: 5px;
                color: #f56c6c;
                margin-left: 2px;
                font-size: 18px;
            }
        }
    }
    .q_type_tag {
        word-break: keep-all;
        color: #2E64FA;
        font-size: 14px;
        margin-left: 8px;
        font-weight: normal;
    }
}
</style>