<script setup lang="ts">
import { ref, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";

const modal = defineModel<boolean>("modal", { required: true });
const rows = defineModel<any>("rows", { required: true });
const dataRows = ref<any[]>([]);

const visibleColumns = ref<String[]>(["level", "description"]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "level",
    align: "center",
    label: "ระดับสมรรถนะ",
    sortable: true,
    field: "level",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:5px;",
  },
  {
    name: "description",
    align: "left",
    label: "พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย",
    sortable: true,
    field: "description",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
]);

/** ปิด dialog */
function closeDialog() {
  modal.value = false;
  rows.value = [];
  dataRows.value = [];
}

watch(
  () => rows.value,
  () => {
    if (rows.value) {
      const data = rows.value;
      dataRows.value = data.sort((a: any, b: any) => a.level - b.level);
    }
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 85%">
      <DialogHeader
        :tittle="`พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย`"
        :close="closeDialog"
      />
      <q-separator />

      <q-card-section class="q-pa-sm scroll" style="max-height: 80vh">
        <div class="row">
          <div class="col-12">
            <d-table
              flat
              bordered
              dense
              :paging="true"
              row-key="level"
              virtual-scroll
              :rows="dataRows"
              hide-pagination
              :columns="columns"
              :visible-columns="visibleColumns"
            >
              <template v-slot:header="props">
                <q-tr :props="props">
                  <q-th
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                    class="bg-grey-2"
                  >
                    <span class="text-weight-bold">{{ col.label }}</span>
                  </q-th>
                </q-tr>
              </template>
              <template v-slot:body="props">
                <q-tr :props="props" class="cursor-pointer">
                  <q-td
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                  >
                    <div v-if="(col.name = 'description')">
                      <span v-html="col.value"></span>
                    </div>
                    <div v-else>
                      {{ col.value }}
                    </div>
                  </q-td>
                </q-tr>
              </template>
              <template #item="props">
                <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
                  <q-card bordered flat>
                    <q-list>
                      <q-item
                        v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
                        :key="col.name"
                      >
                        <q-item-section>
                          <q-item-label caption>{{ col.label }}</q-item-label>

                          <q-item-label v-if="(col.name = 'description')">
                            <span v-html="col.value"></span
                          ></q-item-label>

                          <q-item-label v-else>{{
                            col.value ?? "-"
                          }}</q-item-label>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-card>
                </div>
              </template>
              <template v-slot:no-data="{ icon, message }">
                <div class="q-pa-md text-weight-bold full-width text-center">
                  <span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
                </div>
              </template>
            </d-table>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.my-menu-link {
  background: #ebf9f7 !important;
  color: #1bb19ab8 !important;
}
.no-shadow {
  box-shadow: none !important;
}
.lineRight {
  border-right: 1px solid #ededed !important;
}
.lineTop {
  border-top: 1px solid #ededed !important;
}
.card-box {
  border: 1px solid #ededed !important;
  border-radius: 8px;
}
.custom-table2 {
  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
  }

  .q-table td:nth-of-type(2) {
    z-index: 3 !important;
  }

  .q-table th:nth-of-type(2),
  .q-table td:nth-of-type(2) {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>
