<template>
    <div
        :class="isFocus ? 'is-focus' : ''" class="hc-form-radio-group-box"
        @keydown.shift.up="keyupShiftUp"
        @keydown.shift.down="keyupShiftDown"
        @keydown.shift.left="keyupShiftLeft"
        @keydown.shift.right="keyupShiftRight"
    >
        <ElRadioGroup
            v-model="modelValues"
            :disabled="disabled"
            :keyname="keyname"
            :placeholder="placeholder"
            @change="radioGroupChange"
        >
            <slot />
        </ElRadioGroup>
        <input :id="keyname" class="hc-radio-group-input" @blur="handleBlur" @focus="handleFocus">
    </div>
</template>

<script>
export default {
    inheritAttrs: false,
}
</script>

<script setup>
import { ref, watch } from 'vue'
import { ElRadio, ElRadioGroup } from 'element-plus'

const props = defineProps({
    modelValue: {
        type: [String, Number, Boolean],
    },
    keyname: {
        type: String,
        default: '',
    },
    placeholder: {
        type: String,
        default: '',
    },
    disabled: {
        type: Boolean,
        default: false,
    },
})

//事件
const emit = defineEmits(['update:modelValue', 'change', 'keydowns'])

//变量
const modelValues = ref(props.modelValue)

//监听
watch(() => [
    props.modelValue,
], ([val]) => {
    modelValues.value = val
})

const radioGroupChange = (val) => {
    emit('update:modelValue', val)
    emit('change', val)
}

//向上
const keyupShiftUp = (e) => {
    emit('keydowns', { type: 'up', name: { target: { id: props.keyname } }, key: props.keyname, e })
}

//向下
const keyupShiftDown = (e) => {
    emit('keydowns', { type: 'down', name: { target: { id: props.keyname } }, key: props.keyname, e })
}

//向左
const keyupShiftLeft = (e) => {
    emit('keydowns', { type: 'left', name: { target: { id: props.keyname } }, key: props.keyname, e })
}

//向右
const keyupShiftRight = (e) => {
    emit('keydowns', { type: 'right', name: { target: { id: props.keyname } }, key: props.keyname, e })
}


//获得焦点
const isFocus = ref(false)
const handleFocus = () => {
    isFocus.value = true
}

//失去焦点
const handleBlur = () => {
    isFocus.value = false
}
</script>

<style lang="scss" scoped>
.hc-form-radio-group-box {
    position: relative;
    width: 100%;
    height: initial;
    border-radius: 4px;
    transition: box-shadow 0.3s, background-color 0.3s;
    &.is-focus, &:hover {
        background-color: #eddac4;
        box-shadow: 0 0 0 1.5px var(--el-color-primary) inset;
    }
    .hc-radio-group-input {
        position: absolute;
        z-index: -1;
        right: 10px;
        width: 10px;
    }
}
</style>
