<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { QTableColumn } from 'quasar';

const { t } = useI18n();

const columns: QTableColumn[] = [
  {
    name: 'time',
    label: t('time'),
    field: 'time',
    align: 'left',
    headerStyle: 'font-weight: bold',
  },
  {
    name: 'editBy',
    align: 'center',
    label: t('editBy'),
    field: 'editBy',
    headerStyle: 'font-weight: bold',
  },

  {
    name: 'history',
    align: 'center',
    label: '',
    field: 'history',
  },
  {
    name: 'valueAfter',
    align: 'center',
    label: t('valueAfter'),
    field: 'valueAfter',
    headerStyle: 'font-weight: bold',
  },
  {
    name: 'valueBefore',
    align: 'center',
    label: t('valueBefore'),
    field: 'valueBefore',
    headerStyle: 'font-weight: bold',
  },
];

const rows = [
  {
    time: '17:00:29',
    editBy: 'สุขใจ แสนดี',
    history: [
      { title: 'ข้อมูลส่วนตัว', caption: 'อัพโหลดรูปภาพ' },
      { title: 'ข้อมูลผลตรวจสุขภาพ', caption: 'ผลตรวจสุขภาพ' },
    ],
    valueBefore: [{ title: 'ผิดปกติ' }, { title: 'ผิดปกติ' }],
    valueAfter: [{ title: 'ปกติ' }, { title: 'ปกติ' }],
  },
  {
    time: '15:20:01',
    editBy: 'สุขใจ แสนดี',
    history: [{ title: 'ข้อมูลส่วนตัว', caption: 'อัพโหลดรูปภาพ' }],
    valueBefore: [{ title: '-' }],
    valueAfter: [{ title: '1.jpg' }],
  },
];
</script>

<template>
  <div class="full-width">
    <div
      class="row full-width justify-center q-py-sm header-border"
      style="background: hsla(var(--info-bg) / 0.1)"
    >
      <div class="surface-1 q-py-sm q-px-sm row items-center">
        <q-btn flat padding="0" icon="mdi-chevron-left" />
        <span class="text-weight-medium q-px-xl">
          {{ '20 มีนาคม 2567' }}
        </span>
        <q-btn flat padding="0" icon="mdi-chevron-right" />
      </div>
    </div>

    <q-table
      flat
      class="table-border"
      table-header-class="surface-2"
      :rows="rows"
      :columns="columns"
      row-key="name"
    >
      <template v-slot:body="props">
        <q-tr
          :props="props"
          :style="`background-color: ${props.rowIndex / 2 === 0 ? '' : 'var(--surface-2)'}`"
        >
          <q-td key="time" :props="props">
            {{ props.row.time }}
          </q-td>

          <q-td key="editBy" :props="props">
            <div class="row items-center no-wrap">
              <q-avatar>
                <img src="https://cdn.quasar.dev/img/avatar.png" />
              </q-avatar>
              <div class="column q-pl-md items-start">
                <span class="text-weight-bold">
                  {{ props.row.editBy }}
                </span>
                <span class="text-caption">นักบริหาร</span>
              </div>
            </div>
          </q-td>

          <q-td key="history" :props="props">
            <q-stepper vertical flat>
              <q-step
                v-for="(item, index) in props.row.history.slice().reverse()"
                :key="index"
                :name="1"
                :title="item.title"
                :caption="item.caption"
                :icon="`mdi-numeric-${props.row.history.length - index}`"
              />
            </q-stepper>
          </q-td>

          <q-td key="valueBefore" :props="props">
            <div
              v-for="(item, index) in props.row.valueBefore.slice().reverse()"
              :key="index"
              class="q-py-md"
            >
              {{ item.title }}
            </div>
          </q-td>

          <q-td key="valueAfter" :props="props">
            <div
              v-for="(item, index) in props.row.valueAfter.slice().reverse()"
              :key="index"
              class="q-py-md"
            >
              {{ item.title }}
            </div>
          </q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</template>

<style lang="scss" scoped>
.header-border {
  border: 1px solid var(--border-color);
  border-top-left-radius: var(--radius-2);
  border-top-right-radius: var(--radius-2);
}

.table-border {
  border-bottom: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);

  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--radius-2);
  border-bottom-right-radius: var(--radius-2);
}

:deep(.q-stepper.q-stepper--vertical.q-stepper--flat) {
  background-color: transparent;
  padding: 0;
  text-align: left;
}

:deep(.q-stepper__caption) {
  color: hsl(var(--text-mute-2)) !important;
}

:deep(.q-stepper__title) {
  color: hsl(var(--info-bg)) !important;
}

:deep(i.q-icon.mdi) {
  font-size: 18px !important;
}

:deep(.q-stepper__dot.row.flex-center.q-stepper__line.relative-position) {
  color: hsl(var(--info-bg)) !important;
}
</style>
