<template>
    <el-form ref="specialFormRef" :model="specialFormModel" :rules="specialFormRules" class="mb-6" label-width="0px"
             size="large">
        <el-form-item class="special-form-item" prop="val">
            <el-input id="specialId" ref="specialRef" v-model="specialFormModel.val"
                      clearable placeholder="请选择特殊字符代码" @blur="specialInputBlur" @input="specialInputInput"/>
        </el-form-item>
    </el-form>
    <el-row :gutter="20" style="margin: -10px;">
        <el-col v-for="item in specialCharacters" :span="3" style="padding: 10px;">
            <div class="special-box" @click="specialClick">
                <span :title="`字符代码(C):${item !== 'K̅'?item.slice(2,7):'K̅'}`" class="font-EUDC" v-html="item"/>
            </div>
        </el-col>
    </el-row>
</template>

<script setup>
import {ref, nextTick} from "vue";
import {formValidate, setPosInsert, setPosRange} from "vue-utils-plus"

const specialRef = ref(null)
const specialCharacters = [
    '&#57344;', "&#57345;", "&#57346;", "&#57347;", '&#8804;', '&#8805;', '&#8451;',
    '&#9312;', '&#9313;', '&#9314;', '&#9315;', '&#9316;', '&#9317;', '&#9318;', '&#9319;', '&#9320;', '&#9321;', '&#9322;', '&#9323;',
    '&#9324;', '&#9325;', '&#9326;', '&#9327;', '&#9328;', '&#9329;', '&#9330;', '&#9331;',
    "&#8544;", "&#8545;", "&#8546;", "&#8547;", "&#8548;", "&#8549;", "&#8550;", "&#8551;", "&#8552;", "&#8553;", "&#8554;", "&#8555;", "K̅"
]

nextTick(() => {
    specialRef.value?.focus();
})

//输入框验证
const specialFormRef = ref(null)
const specialFormModel = ref({val: ''})
const specialFormRules = {
    val: {
        required: true,
        trigger: "blur",
        message: "请选择特殊字符代码"
    }
}

//事件
const emit = defineEmits(['change'])


//失去焦点
const specialPos = ref({start: 0, end: 0})
const specialInputBlur = (e) => {
    specialPos.value = {
        start: e?.target?.selectionStart || 0,
        end: e?.target?.selectionEnd || 0
    }
}

//点击符号
const specialClick = (event) => {
    const text = event?.target?.innerText ?? ''
    const {start, end} = specialPos.value
    const form = specialFormModel.value.val
    specialFormModel.value.val = setPosInsert(start, end, form, text)
    specialRef.value?.focus();
    let posVal = start + text.length;
    nextTick(() => {
        setPosRange('specialId', posVal)
    })
}

//输入框内容改变
const specialInputInput = () => {
    const val = specialFormModel.value.val ?? ''
    emit('change', val)
}

//插入特殊符号的处理
const getSpecialNode = async ({KeyName, startPos, endPos, pkeyId}, itemForm) => {
    const res = await formValidate(specialFormRef.value)
    if (res) {
        const val = specialFormModel.value.val ?? ''
        try {
            const formValue = setPosInsert(startPos, endPos, itemForm, val)
            let posVal = startPos + val.length;
            return {code: 200, val: formValue, posVal}
        } catch (e) {
            return {code: 300, val: '', posVal: ''}
        }
    } else {
        return {code: 300, val: '', posVal: ''}
    }
}

// 暴露出去
defineExpose({
    getSpecialNode
})
</script>

<style lang="scss">
.special-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 3px;
    height: 52px;
    width: 52px;
    cursor: pointer;
    user-select: none;
    transition: color .3s, background-color .3s;
    &:hover {
        color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-8);
    }
    .font-EUDC {
        font-size: 22px;
    }
}
</style>
