<template>
  <q-item
    v-if="mov"
    :class="[
      'm-mb-sm',
      'schede-mov',
      {
        'background-even': index % 2 === 0,
        'background-odd': index % 2 !== 0,
      },
    ]"
  >
    <q-item-section v-if="visu !== 1" avatar @click="navigabyMov(mov, true)">
      <CMyImgUser :mov="mov" :from="true"> </CMyImgUser>
    </q-item-section>
    <q-item-section v-else side @click="navigabyMov(mov, false)">
      <CMyImgUser :mov="mov" :from="false"> </CMyImgUser>
      <CCurrencyValue
        :symbol="mov.circuitfrom.symbol"
        color="red"
        v-model="mov.amount"
        :small="true"
        label=""
      >
      </CCurrencyValue>
    </q-item-section>

    <q-item-section>
      <q-item-label class="causalDest" v-if="mov.causalDest">{{
        mov.causalDest
      }}</q-item-label>
      <q-item-label v-if="visu !== 1" lines="3">
        {{ t('movement.from') }}
        <span class="userfrom">{{
          tools.getUsernameOrGroupOrContoComByMov(mov, true)
        }}</span>
      </q-item-label>
      <q-item-label v-if="visu !== 2" lines="3">
        {{ t('movement.to') }}
        <span class="userto">{{
          tools.getUsernameOrGroupOrContoComByMov(mov, false)
        }}</span></q-item-label
      >
      <q-item-label caption lines="1" v-if="mov.circuitfrom" class="circuit">{{
        mov.circuitfrom.name
      }}</q-item-label>
      <q-item-label class="causale" v-if="mov.causal">
        <q-icon name="fas fa-star" color="orange"></q-icon>
        &quot;{{ mov.causal }}&quot;</q-item-label
      >
      <q-item-label caption lines="1" v-if="mov.transactionDate" class="date text-right">{{
        tools.getstrDateTime(mov.transactionDate)
      }}</q-item-label>
    </q-item-section>

    <q-item-section v-if="visu === 0" side @click="navigabyMov(mov, false)">
      <CMyImgUser :mov="mov" :from="false"> </CMyImgUser>
      <CCurrencyValue
        :symbol="mov.circuitfrom.symbol"
        color="red"
        v-model="mov.amount"
        :small="true"
        label=""
      >
      </CCurrencyValue>
    </q-item-section>
  </q-item>
</template>

<script lang="ts" src="./CSingleMovement.ts">
</script>

<style lang="scss" scoped>
@import './CSingleMovement.scss';
</style>
