<script setup lang="ts">
import avatar from "@/assets/avatar_user.jpg";
import { ref, reactive } from "vue";

//หน้าเมนู
import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
import GovernmentPage from "@/modules/10_registry/tabs/02_government.vue";
import SalaryPage from "@/modules/10_registry/tabs/03_salary.vue";
import InsigniaPage from "@/modules/10_registry/tabs/04_insignia.vue";
import OtherPage from "@/modules/10_registry/tabs/05_other.vue";
import { useRouter } from "vue-router";

const router = useRouter();
const tab = ref<string>("information");
const formData = reactive<any>({
  prefix: "นาง",
  firstName: "กัณฐิมา",
  lastName: "กาฬสินธุ์",
  position: "นักบริหาร",
  posName: "หัวหน้าสำนักงาน",
  posType: "บริหาร",
  posLevel: "ชำนาญการพิเศษ",
});
const sizeImg = ref<string>("");
function onResize(size: any) {
  const width = size.width > 100 ? 100 : size.width;
  sizeImg.value = `${width}px`;
}

function onMobile(type: string) {
  console.log(1111);
  router.push(`/registry/${type}`);
}
</script>
<template>
  <div class="row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        ข้อมูลทะเบียนประวัติ
      </div>
      <div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">
        <div class="col-3">
          <q-card bordered>
            <q-resize-observer @resize="onResize" />
            <q-card-section>
              <div class="text-center">
                <q-avatar :size="sizeImg">
                  <img
                    :src="avatar"
                    style="border-radius: 50%; object-fit: cover"
                  />
                </q-avatar>
              </div>
              <div class="column text-center q-mt-md q-mb-lg">
                <span class="text-teal text-weight-medium">{{
                  formData.firstName
                    ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
                    : "-"
                }}</span>
                <span class="text-grey text-weight-medium">{{
                  formData.position ? `${formData.position}` : "-"
                }}</span>
              </div>
            </q-card-section>

            <q-list separator class="q-mt-md">
              <q-separator />
              <q-item>
                <q-item-section class="text-grey-6"
                  >ตำแหน่งในสายงาน</q-item-section
                >
                <q-item-section>{{ formData.posName }}</q-item-section>
              </q-item>
              <q-item>
                <q-item-section class="text-grey-6">ประเภท</q-item-section>
                <q-item-section>{{ formData.posType }}</q-item-section>
              </q-item>
              <q-item>
                <q-item-section class="text-grey-6"
                  >ระดับชั้นงาน</q-item-section
                >
                <q-item-section>{{ formData.posLevel }}</q-item-section>
              </q-item>
            </q-list>

            <q-card-section class="q-gutter-y-sm">
              <q-btn class="full-width" unelevated color="blue-6"
                ><q-icon left size="2em" name="mdi-file-download-outline" />
                <div>ดาวน์โหลดประวัติแบบย่อ</div></q-btn
              >
              <q-btn class="full-width" unelevated color="primary"
                ><q-icon left size="2em" name="mdi-folder-download-outline" />
                <div>ดาวน์โหลด ก.พ.7/ก.ก. 1</div></q-btn
              >
            </q-card-section>
          </q-card>
        </div>
        <div class="col-9">
          <q-card bordered>
            <q-tabs
              v-model="tab"
              inline-label
              active-color="blue-6"
              class="bg-grey-1 text-grey-6 shadow-2"
              align="left"
            >
              <q-tab name="information" label="ข้อมูลส่วนตัว" class="bg-active"/>
              <q-tab name="government" label="ข้อมูลราชการ" />
              <q-tab name="salary" label="ข้อมูลเงินเดือน/ค่าจ้าง" />
              <q-tab name="insignia" label="ข้อมูลเครื่องราชฯ" />
              <q-tab name="other" label="ข้อมูลอื่นๆ" />
            </q-tabs>

            <q-separator />

            <!-- รายการเเต่ละหน้า -->

            <q-tab-panels v-model="tab" animated>
              <q-tab-panel name="information">
                <InformationPage />
              </q-tab-panel>

              <q-tab-panel name="government">
                <GovernmentPage />
              </q-tab-panel>

              <q-tab-panel name="salary">
                <SalaryPage />
              </q-tab-panel>

              <q-tab-panel name="insignia">
                <InsigniaPage />
              </q-tab-panel>

              <q-tab-panel name="other">
                <OtherPage />
              </q-tab-panel>
            </q-tab-panels>
          </q-card>
        </div>
      </div>

      <div v-else>
        <q-card bordered>
          <q-resize-observer @resize="onResize" />
          <q-card-section>
            <div class="text-center">
              <q-avatar :size="sizeImg">
                <img
                  :src="avatar"
                  style="border-radius: 50%; object-fit: cover"
                />
              </q-avatar>
            </div>
            <div class="column text-center q-mt-md q-mb-lg">
              <span class="text-teal text-weight-medium">{{
                formData.firstName
                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
                  : "-"
              }}</span>
              <span class="text-grey text-weight-medium">{{
                formData.position ? `${formData.position}` : "-"
              }}</span>
            </div>
            <div class="row justify-center q-gutter-x-lg">
              <q-btn
                color="light-blue-1"
                dense
                round
                unelevated
                text-color="light-blue-5"
                size="14px"
                icon="mdi-file-download-outline"
              ></q-btn>
              <q-btn
                color="teal-1"
                text-color="primary"
                dense
                unelevated
                round
                size="14px"
                icon="mdi-folder-download-outline"
              ></q-btn>
              <q-btn
                color="red-1"
                text-color="red-12"
                unelevated
                dense
                round
                size="14px"
                icon="mdi-logout"
              ></q-btn>
            </div>
          </q-card-section>

          <q-list separator class="q-mt-md">
            <q-item clickable v-ripple @click="onMobile('information')">
              <q-item-section>ข้อมูลส่วนตัว</q-item-section>
              <q-item-section avatar>
                <q-avatar text-color="info" icon="mdi-chevron-right" />
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple @click="onMobile('government')">
              <q-item-section>ข้อมูลราชการ</q-item-section>
              <q-item-section avatar>
                <q-avatar text-color="info" icon="mdi-chevron-right" />
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple @click="onMobile('salary')">
              <q-item-section>ข้อมูลเงินเดือน/ค่าจ้าง</q-item-section>
              <q-item-section avatar>
                <q-avatar text-color="info" icon="mdi-chevron-right" />
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple @click="onMobile('insignia')">
              <q-item-section>ข้อมูลผลงาน</q-item-section>
              <q-item-section avatar>
                <q-avatar text-color="info" icon="mdi-chevron-right" />
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple @click="onMobile('other')">
              <q-item-section>ข้อมูลอื่นๆ</q-item-section>
              <q-item-section avatar>
                <q-avatar text-color="info" icon="mdi-chevron-right" />
              </q-item-section>
            </q-item>
          </q-list>
        </q-card>
      </div>
    </div>
  </div>
</template>