75 lines
2.3 KiB
Vue
75 lines
2.3 KiB
Vue
<script setup>
|
|
import UiButton from '../../components/ui/UiButton.vue';
|
|
import CtScanIcon from '../../components/svg/ctScanIcon.svg';
|
|
import MriIcon from '../../components/svg/mriIcon.svg';
|
|
import SonographyIcon from '../../components/svg/sonographyIcon.svg';
|
|
import ECOIcon from '../../components/svg/ecoIcon.svg';
|
|
import RadiologyIcon from '../../components/svg/radiologyIcon.svg';
|
|
import { computed } from 'vue';
|
|
import { useFastRequestStore } from '../../store/FastRequest';
|
|
const fastRequestStore = useFastRequestStore();
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
value: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
icon: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
selectable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
});
|
|
|
|
const iconComponent = computed(() => {
|
|
switch (props.icon) {
|
|
case 'ct-scan':
|
|
return CtScanIcon
|
|
case 'mri':
|
|
return MriIcon
|
|
case 'sonography':
|
|
return SonographyIcon
|
|
case 'echo':
|
|
return ECOIcon
|
|
case 'radiology':
|
|
return RadiologyIcon
|
|
default:
|
|
return null
|
|
}
|
|
});
|
|
|
|
|
|
const toggleSelect = () => {
|
|
if (!props.selectable) return
|
|
fastRequestStore.requestType = props.value;
|
|
};
|
|
|
|
const submitRequest = () => {
|
|
fastRequestStore.requestType = props.value;
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div @click="toggleSelect"
|
|
:class="[
|
|
'w-full p-[12px] flex flex-col gap-1 items-center justify-center border rounded-[12px] transition-all',
|
|
props.selectable && 'cursor-pointer',
|
|
fastRequestStore.requestType === props.value ? 'border-[#576989] border-2': 'border-[#DEE3EB]'
|
|
]">
|
|
<component :is="iconComponent" class="w-[87px] h-[80px]" />
|
|
<div class="w-full flex flex-col gap-1">
|
|
<p class="w-full flex items-center justify-center font-[700] text-[14px]">{{ title }}</p>
|
|
<ui-button v-if="!selectable" @click="submitRequest" label="ثبت درخواست" severity="secondary" size="small" full-width="true"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|