<template>
|
<div class="flex flex-col gap-1">
|
<span class="text-gray-600 font-normal">{{ `${item?.label}` }}</span>
|
<div v-if="item?.options?.length > 0" class="flex-items-center gap-5">
|
<span
|
@click="select(subItem)"
|
v-for="(subItem, index) in item?.options"
|
:key="index"
|
class="flex w-fit items-center cursor-pointer border-solid border px-3 border-gray-300 hover:text-white rounded-lg"
|
:class="{
|
'cursor-not-allowed': disabled,
|
'bg-blue-400': subItem.value === item.value,
|
'text-white': subItem.value === item.value,
|
}"
|
>{{ subItem.label }}</span
|
>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, watch } from 'vue';
|
import { ParentRegister } from '/@/stores/global';
|
const props = defineProps(['item', 'disabled']);
|
|
let hasExecute = false;
|
|
const select = (option) => {
|
if (hasExecute) return;
|
props.item.value = option.value;
|
hasExecute = true;
|
|
ParentRegister.notify?.({
|
type: 'msg_callback',
|
value: {
|
type: props.item.type,
|
value: option.value,
|
event: props.item.event,
|
},
|
});
|
};
|
</script>
|
<style scoped lang="scss"></style>
|
