sfp_front_vue_diarista_prestador/src/components/dashboard/DashboardPriceSuggest.vue

<template>
  <div class="q-mx-md q-mb-md">
    <q-card class="price-suggest-card bg-surface shadow-card card-border" :flat="false">
      <q-card-section class="q-pa-md">
        <div class="row items-center justify-between q-mb-sm">
          <div class="row items-center q-gutter-x-sm">
            <span class="text-suggest-label font10">{{ $t('provider.dashboard.price_suggest.region_label_1') }}</span>
            <span class="text-suggest-label font10 fontbold">{{ $t('provider.dashboard.price_suggest.region_label_2') }}</span>
          </div>
          <q-badge rounded class="price-badge font10 fontbold q-px-md q-py-xs gradient-diarista-bg">
            {{ formatCurrency(data?.average_price ?? 0) }}
          </q-badge>
        </div>
        <div class="row items-center justify-between no-wrap">
          <div class="row items-center q-gutter-x-sm">
            <span class="text-suggest-label font10">{{ $t('provider.dashboard.price_suggest.my_price_label') }}</span>
            <q-chip class="row items-center no-wrap bg-surface" outline color="text">
              <span class="text-my-price font10 fontsemibold q-mr-xs">{{ showMyPrice ? formatCurrency(data?.your_price ?? 0) : $t('common.price_masked') }}</span>
              <q-btn icon="mdi-eye-off-outline" flat size="xs" color="grey-6" class="q-pa-none q-pl-sm" @click="showMyPrice = !showMyPrice"/>
            </q-chip>
          </div>
          <q-btn flat no-caps color="primary" size="xs" padding="0" @click="openServiceDataDialog">
            <div class="row items-center q-gutter-x-xs font10">
              <span class="fontbold">{{ $t('common.alter') }}</span>
              <q-icon name="mdi-pencil-outline" size="xs" />
            </div>
          </q-btn>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup>
import { formatCurrency } from 'src/helpers/utils';
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import ServiceDataDialog from '../profile/ProfileServiceDataDialog.vue';

defineProps({
  data: {
    type: Object,
    default: () => ({
    })
  }
});


const showMyPrice = ref(false);

const $q = useQuasar()

const openServiceDataDialog = () => {
  $q.dialog({
    component: ServiceDataDialog
  })
}


</script>

<style scoped lang="scss">
.price-suggest-card {
  border-radius: 12px;
}
.text-suggest-label {
  color: #3a3a4a;
}
.price-badge {
  border-radius: 20px;
}
.text-my-price {
  color: #3a3a4a;
}
</style>