{"version":3,"file":"KrEvaluation.cjs","sources":["../../../../../packages/src/kr-evaluation/KrEvaluation.vue"],"sourcesContent":["<template>\n    <!-- 单选题 -->\n    <div class=\"question-item\">\n        <div class=\"question-item-num\">\n            <question-title v-if=\"titleIsEdit\" :dataList=\"dataList\" @numberBlur=\"(e) => emits('numberChange', e)\" />\n            <div v-else style=\"margin-top: 8px\">{{ dataList.questionNumber }}</div>\n        </div>\n        <div class=\"question-item-content\">\n            <div class=\"title\">\n                <rich-text-editor ref=\"titileInput\" class=\"titile-input\" v-model:valueData=\"dataList.title\" />\n            </div>\n            <div class=\"content\">\n                <div class=\"score-box\" v-if=\"dataList.icon === 'Number'\">\n                    <div class=\"score-icon\" v-for=\"(item, index) in 5\" :key=\"index\">\n                        <div\n                            class=\"score-icon_number\"\n                            :style=\"{\n                                background: index === 0 ? 'rgba(34, 64, 195, 1)' : '',\n                                color: index === 0 ? '#fff' : '',\n                            }\"\n                        >\n                            {{ item }}\n                        </div>\n                        <div class=\"score-explain\">\n                            <span v-if=\"dataList.explainsList[index + 1] && [0, 4].includes(index)\">\n                                {{ dataList.explainsList[index + 1].explainDes }}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n                <div v-else class=\"score-box\">\n                    <div class=\"score-icon\" v-for=\"(item, index) in dataList.score\">\n                        <img v-if=\"index === 0\" :src=\"getAssetsImages(dataList.icon + '_light')\" />\n                        <img v-else :src=\"getAssetsImages(dataList.icon)\" />\n                        <div class=\"score-explain\">\n                            <span style=\"left: 0\" v-if=\"index == 0 && dataList.explainsList[index + 1]\">{{\n                                dataList.explainsList[index + 1].explainDes\n                            }}</span>\n                            <span style=\"right: 0\" v-if=\"index == 4 && dataList.explainsList[index + 1]\">{{\n                                dataList.explainsList[index + 1].explainDes\n                            }}</span>\n                            <!-- <span v-if=\"dataList.explainsList[index + 1] && [0, 4].includes(index)\">\n                                {{ dataList.explainsList[index + 1].explainDes }}\n                            </span> -->\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <!-- 底部操作栏 -->\n            <div class=\"footer-operation\" v-if=\"footerShow\">\n                <action-bar\n                    class=\"action-bar\"\n                    @addCopy=\"() => emits('copyQuestion', dataList)\"\n                    @deleteQuestion=\"() => emits('deleteQuestion')\"\n                    @view=\"(e) => emits('singlePreview', e)\"\n                >\n                    <!-- 添加左侧操作按钮 -->\n                    <template #operation>\n                        <div class=\"bottom-operation\">\n                            <div class=\"button1\" @click=\"openEditDialog\"><svg-icon name=\"batchEdit\" class=\"icon\" />编辑选项</div>\n                        </div>\n                    </template>\n                </action-bar>\n            </div>\n            <!--  编辑选项弹框 -->\n            <evaluation-dialog ref=\"editDialog\" :question=\"dataList\" @confirmEdit=\"confirmEdit\" />\n        </div>\n    </div>\n</template>\n<script setup name=\"kr-evaluation\">\n// js\nimport { ref, watch, provide } from \"vue\";\nimport { getAssetsImages } from \"@/utils/index\";\n// components\nimport RichTextEditor from \"@/components/editor/RichTextEditor.vue\";\nimport ActionBar from \"@/components/action/ActionBar.vue\";\nimport EvaluationDialog from \"@/components/dialog/EvaluationDialog.vue\";\nimport QuestionTitle from \"@/components/question/QuestionNumber.vue\";\n\n// props\nconst props = defineProps({\n    // 是否展示底部操作栏\n    footerShow: {\n        type: Boolean,\n        default: true,\n    },\n    // 题号是否可编辑\n    titleIsEdit: {\n        type: Boolean,\n        default: true,\n    },\n    // 数据渲染\n    dataList: {\n        type: Object,\n        default: () => ({}),\n    },\n});\n// 复制题目，删除题目, 数据改变, 单题预览;\nconst emits = defineEmits([\"copyQuestion\", \"deleteQuestion\", \"change\", \"singlePreview\", \"numberChange\"]);\nconst editDialog = ref(null);\nconst titileInput = ref(null);\nwatch(\n    () => props.dataList,\n    (curr, old) => {\n        // 绑定数据改变时调change方法\n        emits(\"change\", curr);\n    },\n    { deep: true }\n);\n\n// 可能会在外面改变内部输入框的聚焦情况\ndefineExpose({ titileInput });\nprovide(\"data\", props.dataList);\n\n// 打开批量编辑选项弹框\nfunction openEditDialog() {\n    editDialog.value.editDialogVisible = true;\n}\nfunction confirmEdit(data) {\n    props.dataList.explainsList = data.explainsList;\n}\n</script>\n<style lang=\"scss\" scoped>\n@use \"@/css/common.scss\" as *;\n\n.question-item {\n    .content {\n        .score-box {\n            display: flex;\n            .score-icon {\n                width: 32px;\n                min-height: 32px;\n                margin-right: 25px;\n                display: flex;\n                flex-direction: column;\n                white-space: nowrap;\n\n                img {\n                    width: 32px;\n                    height: 32px;\n                }\n\n                .score-explain {\n                    height: 18px;\n                    margin-top: 10px;\n                    color: rgba(112, 120, 134, 1);\n                    font-size: 12px;\n                    position: relative;\n                    span {\n                        position: absolute;\n                        top: 50%;\n                        transform: translateY(-50%);\n                    }\n                }\n            }\n            .score-icon_number {\n                width: 32px;\n                height: 32px;\n                border: 1px solid rgba(228, 229, 232, 1);\n                color: rgba(102, 102, 102, 1);\n                border-radius: 50%;\n                line-height: 29px;\n                text-align: center;\n            }\n        }\n        .icon {\n            position: absolute;\n            top: 50%;\n            transform: translateY(-50%);\n            left: 14px;\n            width: 16px;\n            height: 16px;\n            border-radius: 50%;\n            border: 1px solid #ccc;\n            background-color: #fff;\n        }\n    }\n}\n</style>\n"],"names":["editDialog","ref","titileInput","watch","props","curr","old","emits","expose","provide","openEditDialog","confirmEdit","data"],"mappings":"gtCAmGAA,EAAAC,EAAAA,IAAA,IAAA,EACAC,EAAAD,EAAAA,IAAA,IAAA,EACAE,EAAA,MACA,IAAAC,EAAA,SACA,CAAAC,EAAAC,IAAA,CAEAC,EAAA,SAAAF,CAAA,CACA,EACA,CAAA,KAAA,EAAA,CACA,EAGAG,EAAA,CAAA,YAAAN,CAAA,CAAA,EACAO,EAAAA,QAAA,OAAAL,EAAA,QAAA,EAGA,SAAAM,GAAA,CACAV,EAAA,MAAA,kBAAA,EACA,CACA,SAAAW,EAAAC,EAAA,CACAR,EAAA,SAAA,aAAAQ,EAAA,YACA"}