<template>
  <q-list bordered>
    <q-item
      v-for="(mov, index) in mylist"
      :key="mov._id"
      :class="[
        'm-mb-sm',
        {
          'background-even': index % 2 === 0,
          'background-odd': index % 2 !== 0,
        },
      ]"
      clickable
      v-ripple
    >
      <q-item-section avatar @click="navigabyMov(mov, true)">
        <CMyImgUser :mov="mov" :from="true"> </CMyImgUser>
      </q-item-section>

      <q-item-section>
        <q-item-label v-if="mov.causal">{{ mov.causal }}</q-item-label>
        <q-item-label lines="1">
          {{ t('movement.from') }} <span class="myfrom">{{ mov.myfrom }}</span>
        </q-item-label>
        <q-item-label lines="1">
          {{ t('movement.to') }}
          <span class="myto">{{ mov.myto }}</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
          caption
          lines="1"
          v-if="mov.transactionDate"
          class="date"
          >{{ tools.getstrDateTime(mov.transactionDate) }}</q-item-label
        >
        <q-item-label caption lines="1" style="text-align: center">
          <CCurrencyValue
            :symbol="mov.circuitfrom.symbol"
            color="red"
            v-model="mov.amount"
            :small="true"
            label=""
          >
          </CCurrencyValue
        ></q-item-label>
      </q-item-section>

      <q-item-section side @click="navigabyMov(mov, false)">
        <CMyImgUser :mov="mov" :from="false"> </CMyImgUser>
      </q-item-section>
    </q-item>
  </q-list>
</template>

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

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