<script setup lang="ts">
import { ref } from "vue";

import Image from "@/components/information/Image.vue";
import Information from "@/components/information/Information.vue";
import Government from "@/components/information/Government.vue";
import Address from "@/components/information/Address.vue";
import Family from "@/components/information/Family.vue";
import Certicate from "@/components/information/Certicate.vue";

import EducationVue from "@/components/information/Education.vue";
import TrainVue from "@/components/information/Train.vue";
import InsigniaVue from "@/components/information/Insignia.vue";
import CoinedVue from "@/components/information/Coin.vue";
import AssessmentVue from "@/components/information/Assessment.vue";
import SalaryVue from "@/components/information/Salary.vue";
import DisciplineVue from "@/components/information/Discipline.vue";
import LeaveVue from "@/components/information/Leave.vue";
import TalentVue from "@/components/information/Talent.vue";
import WorkVue from "@/components/information/Work.vue";
import RecordVue from "@/components/information/Record.vue";
import OtherVue from "@/components/information/Other.vue";
import DocumentVue from "@/components/information/Document.vue";

const statusEdit = ref<boolean>(false);
</script>

<template>
  <div class="col-12 row">
    <div class="row col-12" style="padding-top: 80px">
      <div id="information" name="1" class="row col-12 information">
        <Information v-model:statusEdit="statusEdit" :statusAdd="false" />
      </div>
      <div id="government" name="16" class="row col-12 q-mt-md">
        <Government
          v-model:statusEdit="statusEdit"
          :statusAdd="false"
          profileType="test"
          employeeClass="test"
        />
      </div>
      <div id="address" name="17" class="row col-12 q-mt-md">
        <Address v-model:statusEdit="statusEdit" :statusAdd="false" />
      </div>
      <div id="family" name="18" class="row col-12 q-mt-md">
        <Family v-model:statusEdit="statusEdit" :statusAdd="false" />
      </div>
      <div id="certicate" name="15" class="row col-12 q-mt-md">
        <Certicate v-model:statusEdit="statusEdit" profileType="test" />
      </div>
      <div id="education" name="2" class="row col-12 q-mt-md">
        <EducationVue v-model:statusEdit="statusEdit" />
      </div>
      <div id="training" name="3" class="row col-12 q-mt-md">
        <TrainVue v-model:statusEdit="statusEdit" />
      </div>
      <div id="insignia" name="4" class="row col-12 q-mt-md">
        <InsigniaVue v-model:statusEdit="statusEdit" />
      </div>
      <div id="coined" name="5" class="row col-12 q-mt-md">
        <CoinedVue v-model:statusEdit="statusEdit" profileType="profileType" />
      </div>
      <div id="assessment" name="6" class="row col-12 q-mt-md">
        <AssessmentVue
          v-model:statusEdit="statusEdit"
          profileType="profileType"
        />
      </div>
      <div id="position" name="7" class="row col-12 q-mt-md">
        <SalaryVue v-model:statusEdit="statusEdit" />
        <!-- v-if="profileType === 'officer'" -->
        <!-- <SalaryEmployeeTempVue
          v-model:statusEdit="statusEdit"
          v-else-if="employeeClass === 'temp'"
        />
        <SalaryEmployeeVue v-model:statusEdit="statusEdit" v-else /> -->
      </div>
      <div id="rule" name="8" class="row col-12 q-mt-md">
        <DisciplineVue v-model:statusEdit="statusEdit" />
      </div>
      <div id="leave" name="9" class="row col-12 q-mt-md">
        <LeaveVue v-model:statusEdit="statusEdit" />
      </div>
      <div id="talent" name="10" class="row col-12 q-mt-md">
        <TalentVue v-model:statusEdit="statusEdit" />
      </div>
      <div id="work" name="11" class="row col-12 q-mt-md">
        <WorkVue v-model:statusEdit="statusEdit" />
      </div>
      <div id="record" name="12" class="row col-12 q-mt-md">
        <RecordVue v-model:statusEdit="statusEdit" />
      </div>
      <div id="other" name="13" class="row col-12 q-mt-md">
        <OtherVue v-model:statusEdit="statusEdit" />
      </div>
      <div id="document" name="14" class="row col-12 q-my-md">
        <DocumentVue v-model:statusEdit="statusEdit" />
      </div>
    </div>
    <Image />
  </div>
</template>

<style lang="scss" scoped>
.information:target {
  padding-top: 84px;
}
</style>
>
