{"version":3,"file":"KrScore.cjs","sources":["../../../../../packages/src/kr-score/KrScore.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            <!-- 单项打分 -->\n            <div class=\"content\" v-if=\"dataList.scoreType === 1\">\n                <!-- 单个打分项 -->\n                <div class=\"score-box\" v-if=\"dataList.icon === 'Number' || dataList.icon === 'NumberS'\">\n                    <div class=\"score-icon\" v-for=\"(item, index) in dataList.score\" :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                                borderRadius: dataList.icon === 'Number' ? '50%' : 0,\n                            }\"\n                        >\n                            {{ item }}\n                        </div>\n                        <div v-if=\"dataList.showScoreExplain\" class=\"score-explain\">\n                            <span v-show=\"index === 0\">{{ dataList.miniScoreExplain }}</span>\n                            <span v-show=\"index + 1 === dataList.score\">{{ dataList.maxScoreExplain }}</span>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"score-box\" v-else-if=\"dataList.icon === 'Ruler'\">\n                    <div style=\"display: flex; flex-direction: column; margin-top: 10px\">\n                        <div class=\"score-ruler\">\n                            <div class=\"bar\"></div>\n                            <div class=\"bar-pointer\"></div>\n                        </div>\n                        <ruler-score :score=\"dataList.score\" />\n                        <div v-if=\"dataList.showScoreExplain\" class=\"score-explain\">\n                            <span>{{ dataList.miniScoreExplain }}</span>\n                            <span>{{ dataList.maxScoreExplain }}</span>\n                        </div>\n                    </div>\n                    <!-- <div class=\"score-icon\" v-for=\"(item, index) in dataList.score\" :key=\"index\">\n                        <div\n                            class=\"score-icon_ruler\"\n                            :style=\"{\n                                background: index === 0 ? 'rgba(34, 64, 195, 1)' : '',\n                                color: index === 0 ? '#fff' : '',\n                            }\"\n                        >\n                            {{ item }}\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 v-if=\"dataList.showScoreExplain\" class=\"score-explain\">\n                            <span v-show=\"index === 0\">{{ dataList.miniScoreExplain }}</span>\n                            <span v-show=\"index + 1 === dataList.score\">{{ dataList.maxScoreExplain }}</span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <!-- 多个打分项 -->\n\n            <ul class=\"content\" v-else>\n                <div>\n                    <draggable\n                        :group=\"{\n                            name: 'name1',\n                            put: false,\n                            pull: false,\n                        }\"\n                        force-fallback=\"true\"\n                        v-model=\"mulContentList\"\n                        animation=\"300\"\n                        itemKey=\"value\"\n                        handle=\".operation-drag\"\n                        ghostClass=\"option-ghost-class\"\n                    >\n                        <template #item=\"{ element, index }\">\n                            <li class=\"content-item\">\n                                <div class=\"placeholder-content\">\n                                    <!-- 输入框 -->\n                                    <rich-text-editor\n                                        :key=\"index\"\n                                        ref=\"contetnRef\"\n                                        class=\"content-input\"\n                                        v-model:valueData=\"element.label\"\n                                        @mouseenter=\"() => (element.buttonShowHover = true)\"\n                                        @mouseleave=\"() => (element.buttonShowHover = false)\"\n                                        @focus=\"() => (element.buttonShow = true)\"\n                                        @blur=\"() => (element.buttonShow = false)\"\n                                    >\n                                        <template #operation>\n                                            <!-- 鼠标触摸展示的按钮 -->\n                                            <div class=\"operation-box\" v-show=\"element.buttonShow || element.buttonShowHover\">\n                                                <div class=\"operation-drag\">\n                                                    <el-tooltip content=\"长按拖动\" effect=\"customized\" placement=\"top\">\n                                                        <svg-icon name=\"operationDrag\" class=\"svg-icon\" />\n                                                    </el-tooltip>\n                                                </div>\n                                                <div class=\"operation-delete\" @click=\"deleteOption(index)\">\n                                                    <el-tooltip content=\"删除\" effect=\"customized\" placement=\"top\">\n                                                        <svg-icon name=\"operationDelete\" class=\"svg-icon\" />\n                                                    </el-tooltip>\n                                                </div>\n                                            </div>\n                                        </template>\n                                    </rich-text-editor>\n                                    <div class=\"score-box\" v-if=\"dataList.icon === 'Number' || dataList.icon === 'NumberS'\">\n                                        <div class=\"score-icon\" v-for=\"(item, index) in dataList.score\" :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                                                    borderRadius: dataList.icon === 'Number' ? '50%' : 0,\n                                                }\"\n                                            >\n                                                {{ item }}\n                                            </div>\n                                            <div v-if=\"dataList.showScoreExplain\" class=\"score-explain\">\n                                                <span v-show=\"index === 0\">{{ dataList.miniScoreExplain }}</span>\n                                                <span v-show=\"index + 1 === dataList.score\">{{ dataList.maxScoreExplain }}</span>\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"score-box\" v-else-if=\"dataList.icon === 'Ruler'\">\n                                        <div class=\"score-icon\" v-for=\"(item, index) in dataList.score\" :key=\"index\">\n                                            <div\n                                                class=\"score-icon_ruler\"\n                                                :style=\"{\n                                                    background: index === 0 ? 'rgba(34, 64, 195, 1)' : '',\n                                                    color: index === 0 ? '#fff' : '',\n                                                }\"\n                                            >\n                                                {{ item }}\n                                            </div>\n                                            <div v-if=\"dataList.showScoreExplain\" class=\"score-explain\">\n                                                <span v-show=\"index === 0\">{{ dataList.miniScoreExplain }}</span>\n                                                <span v-show=\"index + 1 === dataList.score\">{{ dataList.maxScoreExplain }}</span>\n                                            </div>\n                                        </div>\n                                    </div>\n\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 v-if=\"dataList.showScoreExplain\" class=\"score-explain\">\n                                                <span v-show=\"index === 0\">{{ dataList.miniScoreExplain }}</span>\n                                                <span v-show=\"index + 1 === dataList.score\">{{ dataList.maxScoreExplain }}</span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </li>\n                        </template>\n                    </draggable>\n                </div>\n            </ul>\n            <!-- 底部操作栏 -->\n            <div class=\"footer-operation\">\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\" v-if=\"dataList.type === 2\">\n                            <div class=\"button1\" @click=\"addSingleOption\"><svg-icon name=\"addOption\" class=\"icon\" />添加评分项</div>\n                            <div class=\"button1\" @click=\"openBatchDialog\"><svg-icon name=\"batchEdit\" class=\"icon\" />批量编辑评分项</div>\n                        </div>\n                    </template>\n                </action-bar>\n            </div>\n            <batch-edit ref=\"batchEdit\" :optionsList=\"mulContentList\" @confirmOption=\"confirmOption\" />\n        </div>\n    </div>\n</template>\n<script setup name=\"kr-score\">\n// js\nimport Draggable from \"vuedraggable\";\nimport { ref, watch, provide } from \"vue\";\n\n// components\nimport RichTextEditor from \"@/components/editor/RichTextEditor.vue\";\nimport ActionBar from \"@/components/action/ActionBar.vue\";\nimport BatchEdit from \"@/components/dialog/BatchEdit.vue\";\nimport QuestionTitle from \"@/components/question/QuestionNumber.vue\";\nimport RulerScore from \"@/components/scoreIcon/RulerScore.vue\";\n\nimport { getAssetsImages } from \"@/utils/index\";\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});\nlet mulContentList = ref([]);\nmulContentList.value = props.dataList.mulContent;\nconst emits = defineEmits([\"copyQuestion\", \"deleteQuestion\", \"change\", \"singlePreview\", \"numberChange\"]); // 复制题目，删除题目, 数据改变, 单题预览;\nconst batchEdit = ref(null);\nconst titileInput = ref(null);\n\nwatch(\n    () => props.dataList,\n    (curr, old) => {\n        // 绑定数据改变时调change方法\n        emits(\"change\", curr);\n    },\n    { deep: true }\n);\n\n// 可能会在外面改变内部输入框的聚焦情况\ndefineExpose({ titileInput });\n\nprovide(\"data\", props.dataList);\n\n// 打开批量编辑选项弹框\nconst openBatchDialog = () => {\n    batchEdit.value.dialogVisible = true;\n    batchEdit.value.newOption = \"\";\n};\n// 添加单个评分项\nconst addSingleOption = () => {\n    let defaultHolder = `评分项${mulContentList.value.length + 1}`;\n    let obj = {\n        label: defaultHolder,\n        value: mulContentList.value.length + 1,\n    };\n    mulContentList.value.push(obj);\n};\nconst confirmOption = (data) => {\n    mulContentList.value = data;\n};\n// 删除当前选项\nconst deleteOption = (index) => {\n    mulContentList.value.splice(index, 1);\n};\n</script>\n<style lang=\"scss\" scoped>\n@use \"@/css/common.scss\" as *;\n.content {\n    margin-left: 0px !important;\n    width: calc(100% - 200px);\n    .score-box {\n        display: flex;\n        padding-left: 6px;\n\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-icon_ruler {\n            width: 32px;\n            height: 32px;\n            border: 1px solid rgba(228, 229, 232, 1);\n            color: rgba(102, 102, 102, 1);\n            line-height: 30px;\n            text-align: center;\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: 30px;\n            text-align: center;\n        }\n        .score-explain {\n            width: 100%;\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                &:nth-child(1) {\n                    left: 0;\n                }\n                &:nth-child(2) {\n                    right: 0;\n                }\n            }\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    .content-item {\n        // background-color: #fff;\n        position: relative;\n        margin-bottom: 18px;\n        .content-input {\n            width: calc(100% - 110px);\n            color: rgba(112, 120, 134, 1) !important;\n        }\n\n        &:hover .input-box {\n            border: 1px dashed rgba(0, 0, 0, 0.4);\n        }\n        .operation-box {\n            display: flex;\n            align-items: center;\n            position: absolute;\n            top: 50%;\n            right: 0;\n            transform: translate(100%, -50%);\n            color: #9aa1ad;\n        }\n        .left-drag-icon,\n        .operation-delete,\n        .operation-add,\n        .operation-drag {\n            width: 18px;\n            height: 18px;\n            margin-left: 10px;\n            cursor: pointer;\n            .svg-icon {\n                width: 100%;\n                height: 100%;\n                &:hover {\n                    color: rgb(34, 64, 195);\n                }\n            }\n        }\n        .operation-delete .svg-icon:hover {\n            color: red;\n        }\n    }\n    .bottom-operation {\n        .button1 {\n            cursor: pointer;\n            &:first-child {\n                margin-right: 30px;\n            }\n        }\n    }\n}\n</style>\n"],"names":["mulContentList","ref","props","batchEdit","titileInput","watch","curr","old","emits","expose","provide","openBatchDialog","addSingleOption","obj","confirmOption","data","deleteOption","index"],"mappings":"k8DA4NA,IAAAA,EAAAC,EAAAA,IAAA,CAAA,CAAA,EACAD,EAAA,MAAAE,EAAA,SAAA,WAEA,MAAAC,EAAAF,EAAAA,IAAA,IAAA,EACAG,EAAAH,EAAAA,IAAA,IAAA,EAEAI,EAAA,MACA,IAAAH,EAAA,SACA,CAAAI,EAAAC,IAAA,CAEAC,EAAA,SAAAF,CAAA,CACA,EACA,CAAA,KAAA,EAAA,CACA,EAGAG,EAAA,CAAA,YAAAL,CAAA,CAAA,EAEAM,EAAAA,QAAA,OAAAR,EAAA,QAAA,EAGA,MAAAS,EAAA,IAAA,CACAR,EAAA,MAAA,cAAA,GACAA,EAAA,MAAA,UAAA,EACA,EAEAS,EAAA,IAAA,CAEA,IAAAC,EAAA,CACA,MAFA,MAAAb,EAAA,MAAA,OAAA,IAGA,MAAAA,EAAA,MAAA,OAAA,CACA,EACAA,EAAA,MAAA,KAAAa,CAAA,CACA,EACAC,EAAAC,GAAA,CACAf,EAAA,MAAAe,CACA,EAEAC,EAAAC,GAAA,CACAjB,EAAA,MAAA,OAAAiB,EAAA,CAAA,CACA"}