<script setup lang="ts">
import {
  ref,
  computed,
  watchEffect,
  watch,
  type PropType,
  onMounted,
} from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { DirectorRowsResponse } from "@/modules/11_discipline/interface/response/director";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import config from "@/app.config";
import http from "@/plugins/http";

const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
const listCheck = ref<number|null>();

const props = defineProps({
  modal: Boolean,
  title: {
    type: String,
    default: "",
  },
  close: Function,
  type: String,
  dataList: Object,
});
const dataList = ref<any>();
const listInvestigateDetail = ref<any>([]);

function clickList(index: number, data: any) {
  listCheck.value = index;
  dataList.value = data.map((i: any) => ({
    commandNo: i.commandNo,
    duty: i.duty,
    prefix: i.prefix,
    firstName: i.firstName,
    lastName: i.lastName,
    fullName:`${i.prefix}${i.firstName} ${i.lastName}`
  }));
}

watch(props, () => {
  if (props) {
    listCheck.value = null
    listInvestigateDetail.value = []
    dataList.value = []
    const data: DirectorRowsResponse = props.dataList as DirectorRowsResponse;
    showLoader();
    http
      .get(config.API.historyDirectorbyId(data.id, props.type as string))
      .then((res) => {
        listInvestigateDetail.value = res.data.result;
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  }
});
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="min-width: 50vw">
      <q-form ref="myForm">
        <DialogHeader :title="props.title" :close="props.close" />
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-6">
              <q-card
                bordered
                class="row col-12"
                style="border: 1px solid #d6dee1"
              >
                <div
                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                >
                  รายการเรื่องร้องเรียน
                </div>

                <div class="col-12"><q-separator /></div>
                <q-scroll-area
                  style="height: 300px"
                  class="bg-white rounded-borders q-px-xs row col-12"
                >
                  <q-list
                    v-for="(item, index) in listInvestigateDetail"
                    :key="index"
                    bordered
                    separator
                  >
                    <q-item
                      clickable
                      v-ripple
                      :active="listCheck === index"
                      active-class="my-menu-link"
                      @click="clickList(index, item.director)"
                    >
                      <q-item-section>{{ item.title }}</q-item-section>
                    </q-item>
                  </q-list>
                </q-scroll-area>
              </q-card>
            </div>
            <div class="col-6">
              <q-card
                bordered
                class="row col-12"
                style="border: 1px solid #d6dee1"
              >
                <div
                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                >
                  รายชื่อกรรมการ
                </div>

                <div class="col-12"><q-separator /></div>
                <q-scroll-area
                  style="height: 300px"
                  class="bg-white rounded-borders q-px-xs row col-12"
                >
                  <q-list
                    v-for="(item, index) in dataList"
                    :key="index"
                    bordered
                    separator
                  >
                    <q-item clickable v-ripple>
                      <q-item-section>{{ `${item.fullName} ${item.duty ? `(${item.duty})`:''}` }}</q-item-section>
                    </q-item>
                  </q-list>
                </q-scroll-area>
              </q-card>
            </div>
          </div>
        </q-card-section>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.my-menu-link {
  background: #ebf9f7 !important;
  border-radius: 5px;
  border: 1px solid #1bb19ab8;
  color: #1bb19ab8 !important;
}
</style>
