83 lines
2.5 KiB
Vue
83 lines
2.5 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const props = defineProps({
|
|
vehicle: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
driver: {
|
|
type: Object,
|
|
required: false
|
|
}
|
|
})
|
|
|
|
console.log(props.vehicle)
|
|
|
|
const { t } = useI18n()
|
|
|
|
const isShow = ref(false);
|
|
|
|
const toogle = () => {
|
|
isShow.value = !isShow.value;
|
|
}
|
|
|
|
const driver = computed(() => {
|
|
if(props?.driver) {
|
|
return !props?.driver ? 'No definido'
|
|
: props?.driver.first_name + ' ' + props?.driver.last_name
|
|
} else {
|
|
return props.vehicle.driver.first_name + ' ' + props.vehicle.driver.last_name;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<a
|
|
@click="toogle"
|
|
class="btn-text mt-4 mb-2"
|
|
>{{ t('vehicles.infoVehicle') }} <i class="fa-solid" :class="[isShow ? 'fa-chevron-up' : 'fa-chevron-down']"></i></a>
|
|
|
|
<div v-if="isShow">
|
|
<div class="divider"></div>
|
|
<!-- <h2 class="my-3">Información del vehiculo</h2> -->
|
|
<div class="row my-2">
|
|
<div class="col-lg-6">
|
|
<p>{{ t('labels.codeId') }}: <span>{{ vehicle.vehicle_code.toUpperCase() }}</span></p>
|
|
<p>{{ t('directory.typeTruck') }}: <span>{{ vehicle.truck_type }}</span></p>
|
|
<p>{{ t('vehicles.assignedDriver') }}: <span>{{ driver }}</span></p>
|
|
<p>{{ t('global.segment') }}: <span>{{ vehicle.categories?.map((e) => e.name)?.join(', ') }}</span></p>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<p>{{ t('vehicles.truckPlates') }}: <span>{{ vehicle.circulation_serial_number }}</span></p>
|
|
<p>{{ t('vehicles.trailerPlates') }} 1: <span>{{ vehicle.trailer_plate_1 }}</span></p>
|
|
<p>{{ t('vehicles.trailerPlates') }} 2: <span>{{ vehicle.trailer_plate_2 }}</span></p>
|
|
<p>{{ t('vehicles.chargingBase') }}: <span>{{ vehicle.city }}, {{ vehicle.state }}</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<p>{{ t('vehicles.additionalInfoVehicle') }}: <span>{{ vehicle.notes }}</span></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
h2 {
|
|
font-size: 1.2rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
p {
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
color: #323032;
|
|
font-weight: 700;
|
|
}
|
|
|
|
p span {
|
|
color: #323032;
|
|
font-weight: normal;
|
|
}
|
|
</style> |