<script setup lang="ts">
import { ref, onMounted } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useProbationDataStore } from "@/modules/05_placement/storeProbation";

import FormUploadFile from "@/modules/05_placement/components/probation/FormEvaluation/FormUploadFile.vue";
import DialogSelectAuthority from "@/modules/05_placement/components/probation/FormEvaluation/DialogSelectAuthority.vue";

const probationStore = useProbationDataStore();

const $q = useQuasar();
const myForm = ref<any>(null);
const mixin = useCounterMixin();
const router = useRouter();
const {
  date2Thai,
  messageError,
  success,
  showLoader,
  hideLoader,
  dialogConfirm,
  convertDateToAPI,
  dialogMessageNotify,
} = mixin;
const route = useRoute();
const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
const assignId = ref<string>(route.params.form.toString());
const personalId = ref<string>(route.params.personalId.toString());
const action = ref<string>("add");
const assign = ref<any>([]);
const mentors = ref<any>([]);
const commander = ref<any>([]);
const status = ref<boolean>(true);
const evaluateId = ref<string>("");
const date_start = ref<Date>(new Date());
const date_finish = ref<Date>();
const develop = ref<number>();
const result = ref<number>();
const expand_month = ref<string>();
const reson = ref<string>("");
const reson52 = ref<string>("");

const chairman_dated = ref<Date>();
const director1_dated = ref<any>("");
const director2_dated = ref<any>("");
const director_id = ref<any>(null);
const director_id2 = ref<any>(null);
const director_id3 = ref<any>(null);
const optionDirector = ref<any>([]);
const person = ref<any>([]);

const options = ref<any>([
  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
]);
const optionsResult = ref<any>([
  {
    value: 4,
    label: "ไม่ต่ำกว่ามาตรฐานที่กำหนดเห็นควรให้ทดลองปฏิบัติหน้าที่ราชการต่อไป",
    type: "save1",
  },
  {
    value: 2,
    label: "ต่ำกว่ามาตรฐานที่กำหนดเห็นควรให้ออกจากราชการ",
    type: "save1",
  },
  {
    value: 1,
    label: "ไม่ต่ำกว่ามาตรฐานที่กำหนดเห็นควรให้ทดลองปฏิบัติหน้าที่ราชการต่อไป",
    type: "save2",
  },
  {
    value: 2,
    label: "ต่ำกว่ามาตรฐานที่กำหนดเห็นควรให้ออกจากราชการ",
    type: "save2",
  },
  {
    value: 3,
    label: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก",
    type: "save2",
  },
]);

const props = defineProps({
  tab: { type: String, require: true },
  data: { type: Object, require: true },
  fetchData: { type: Function, require: true },
});

const isCheckFile = ref<boolean>(false);

/** get ข้อมูลรายการมอยหมาย เก็บไว้ตัวแปร
 * @param id personal id
 */
async function fecthAssign() {
  const data = props.data;

  const foundData = props?.data?.result.find(
    (e: any) =>
      (e.evaluate_no === 1 && props?.tab === "save1") ||
      (e.evaluate_no === 2 && props?.tab === "save2")
  );

  console.log(foundData);

  if (foundData) {
    date_start.value = foundData.start_date;
    date_finish.value = foundData.end_date;
  }

  assign.value = data?.assign;
  person.value = data?.person;
  mentors.value = data?.mentors;
  if (
    data?.result.develop_complete != null &&
    data?.result.evaluate_result != null
  ) {
    develop.value = data.result.develop_complete;
    result.value = data.result.evaluate_result;
    changeReson52(Number(data.result.evaluate_result));
  }
  director_id.value = data?.chairman;
  director_id2.value = data?.commander;
  if (mentors.value.length != 0) {
    director_id3.value = mentors.value[0];
  }
  commander.value = data?.commander;
  optionDirector.value = mentors.value;
}

/** get ข้อมูล เก็บไว้ตัวแปร
 * @param id personal id
 */
const fecthResult = async (id: string) => {
  showLoader();
  const noNumber = props?.tab ? Number(props?.tab.charAt(4)) : "";
  await http
    .get(config.API.createformReport(id) + `&evaluate_no=${noNumber}`)
    .then(async (res: any) => {
      if (res.data.result != null) {
        const data = await res.data.result.evaluate;
        evaluateId.value = data.id;
        date_start.value = data.date_start;
        date_finish.value = data.date_finish;
        develop.value = Number(data.develop_complete);
        result.value = Number(data.pass_result);
        reson.value = data.reson;
        chairman_dated.value = data.chairman_dated;
        director1_dated.value = data.director1_dated;
        director2_dated.value = data.director2_dated;
        status.value = false;
        action.value = "edit";
        expand_month.value = data.expand_month;
        authority_name.value = data.authority_name;
        authority_pos.value = data.authority_pos;
        authority_type.value = data.authority_type;
        authority_level.value = data.authority_level;
        authority_dated.value = data.authority_dated;
        changeReson52(Number(data.pass_result));
      }
    })
    .catch((e) => {})
    .finally(() => {
      hideLoader();
    });
};

/** เช็คก่อน save */
async function savaForm() {
  await myForm.value.validate().then((result: boolean) => {
    if (result) {
      if (authority_name.value === "") {
        dialogMessageNotify($q, "กรุณาเลือกผู้มีอำนาจ");
      } else {
        dialogConfirm($q, async () => await postData("post"));
      }
    }
  });
}

/** post/put  data
 * @param action post put
 */
async function postData(action: string) {
  const data = {
    start_date: convertDateToAPI(date_start.value),
    date_finish: date_finish.value ? convertDateToAPI(date_finish.value) : null,
    develop_complete: props.tab === "save1" ? 0 : develop.value,
    pass_result: result.value,
    reson: reson.value,
    chairman_dated: chairman_dated.value,
    // director1_dated: director1_dated.value ? director1_dated.value : new Date(),
    // director2_dated: director2_dated.value ? director2_dated.value : new Date(),
    expand_month: expand_month.value ? expand_month.value : undefined,
    evaluate_no: props?.tab ? Number(props?.tab.charAt(4)) : undefined,
    authority_name: authority_name.value,
    authority_pos: authority_pos.value,
    authority_type: authority_type.value,
    authority_level: authority_level.value,
    authority_dated: convertDateToAPI(authority_dated.value),
  };
  if (action === "post") {
    showLoader();
    await http
      .post(config.API.createformReport(assignId.value), data)
      .then(async () => {
        await props.fetchData?.(assignId.value);
        // await fecthResult(assignId.value);
        success($q, "บันทึกสำเร็จ");
        router.push(`/probation/detail/${personalId.value}/${assignId.value}`);
        status.value = false;
      })
      .catch((e: any) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  }
  // else if (action === "put") {
  //   showLoader();
  //   await http
  //     .put(config.API.createformReport(assignId.value), data)
  //     .then(() => {
  //       success($q, "บันทึกสำเร็จ");
  //       fecthResult(assignId.value);
  //       status.value = false;
  //       router.push(`/probation/detail/${personalId.value}/${assignId.value}`);
  //     })
  //     .catch((e: any) => {
  //       messageError($q, e);
  //     })
  //     .finally(() => {
  //       hideLoader();
  //     });
  // }
}

/** ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ  */
function selectResult() {
  expand_month.value = "";
  changeReson52(Number(result.value));
}

/** แปลง val เป็นตัวหนังสือ
 * @param val ตัวเลข
 */
function changeReson52(val: number) {
  if (props.tab === "save1") {
    switch (val) {
      case 4:
        reson52.value = "เห็นควรให้ทดลองปฏิบัติหน้าที่ราชการต่อไป";
        break;
      case 2:
        reson52.value = "เห็นควรให้ออกจากราชการ";
        break;

      default:
        break;
    }
  } else if (props.tab === "save2") {
    switch (val) {
      case 1:
        reson52.value = "เห็นควรให้รับราชการต่อไป";
        break;
      case 2:
        reson52.value = "เห็นควรให้ออกจากราชการ";
        break;
      case 3:
        reson52.value = `เห็นควรให้ขยายเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก ${
          expand_month.value ? expand_month.value : ""
        } เดือน`;
        break;

      default:
        break;
    }
  }
}

const modal = ref<boolean>(false);
const authority_dated = ref<Date | null>(null);
const authority_name = ref<string>("");
const authority_pos = ref<string>("");
const authority_type = ref<string>("");
const authority_level = ref<string>("");

function updateAuthority(data: any) {
  authority_name.value = `${data.prefix}${data.firstName} ${data.lastName}`;
  authority_pos.value = `${data.position}`;
  authority_type.value = `${data.posType}`;
  authority_level.value = `${data.posLevel}`;
}

onMounted(async () => {
  await fecthAssign();
  await fecthResult(assignId.value);
});
</script>

<template>
  <div class="row col-12">
    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
      <div>แบบรายงานการประเมินฯ</div>
    </div>

    <div class="col-12 row">
      <div class="col-12 text-top0 row items-center">
        <div class="col-12 row text-top0">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ person.name }}
        </div>
        <div class="col-12 q-pl-md q-pb-md">
          <div class="col-12">
            <span class="text-top0 q-pl-sm">ตำแหน่งในสายงาน</span>
            {{ person.positionName }}
          </div>
          <div class="col-12">
            <span class="text-top0 q-pl-sm">ระดับ</span>
            {{ person.positionLevelName }}
          </div>
          <div class="col-12">
            <span class="text-top0 q-pl-sm">สังกัด</span>
            {{ person.Oc ? person.Oc : "-" }}
          </div>
        </div>
      </div>

      <div class="col-12 text-top0 row items-center">
        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
        ประเมินผล
        <span class="text-primary q-pr-sm">
          ครั้งที่ {{ props?.tab ? props?.tab.charAt(4) : "" }}</span
        >
      </div>

      <div class="col-12 text-top0 row items-center">
        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
        การทดลองปฎิบัติหน้าที่ราชการ
      </div>
    </div>

    <q-form ref="myForm" class="col-12">
      <div class="row col-12">
        <div class="col-12 row q-col-gutter-md">
          <div class="col-xs-12 col-sm-6">
            <datepicker
              v-model="date_start"
              :locale="'th'"
              autoApply
              borderless
              :readonly="
                !status ||
                checkRoutePermisson ||
                probationStore.dataPermissions?.tab6.isEdit == false
              "
              :enableTimePicker="false"
              week-start="0"
              :max-date="date_finish"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  :readonly="
                    !status ||
                    checkRoutePermisson ||
                    probationStore.dataPermissions?.tab6.isEdit == false
                  "
                  class="full-width datepicker"
                  :model-value="
                    date_start != null ? date2Thai(date_start) : null
                  "
                  :label="`${'ระหว่างวันที่'}`"
                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่'}`]"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>

          <div class="col-xs-12 col-sm-6">
            <datepicker
              :readonly="
                !status ||
                checkRoutePermisson ||
                probationStore.dataPermissions?.tab6.isEdit == false
              "
              v-model="date_finish"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
              :min-date="date_start"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  :readonly="!status || checkRoutePermisson"
                  class="full-width datepicker"
                  :model-value="
                    date_finish != null ? date2Thai(date_finish) : null
                  "
                  :label="`${'ถึงวันที่'}`"
                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่'}`]"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
        </div>
      </div>

      <div class="col-12 row q-mt-xs">
        <div class="col-12 row q-col-gutter-md">
          <div class="col-xs-12 col-sm-6" v-if="props?.tab === 'save2'">
            <q-select
              :rules="[
                (val:string) =>
                  !!val ||
                  'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
              ]"
              hide-bottom-space
              :options="options"
              class="col-xs-12 col-sm-6"
              dense
              borderless
              :readonly="
                !status ||
                checkRoutePermisson ||
                probationStore.dataPermissions?.tab6.isEdit == false
              "
              emit-value
              map-options
              option-label="label"
              option-value="value"
              outlined
              v-model="develop"
              label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
              use-input
              ><template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>

          <div class="col-xs-12 col-sm-6">
            <div class="row">
              <q-select
                class="col-sm-12"
                :rules="[
                  (val:string) =>
                    !!val ||
                    'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
                ]"
                hide-bottom-space
                :options="optionsResult.filter((e:any)=> e.type === props?.tab)"
                :readonly="
                  !status ||
                  checkRoutePermisson ||
                  probationStore.dataPermissions?.tab6.isEdit == false
                "
                dense
                borderless
                emit-value
                map-options
                option-label="label"
                option-value="value"
                outlined
                v-model="result"
                label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
                @update:model-value="selectResult"
                use-input
                ><template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      ไม่มีข้อมูล
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
            <div class="row q-mt-xs" v-if="result === 3">
              <q-input
                outlined
                @change="changeReson52(3)"
                dense
                v-model="expand_month"
                label="จำนวนเดือน"
                :rules="[(val:string) => !!val || 'กรุณากรอกจำนวนเดือน']"
                type="number"
                :readonly="
                  !status ||
                  checkRoutePermisson ||
                  probationStore.dataPermissions?.tab6.isEdit == false
                "
              />
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 row q-mt-md">
        <div class="col-12 row q-col-gutter-md">
          <div class="col-xs-12 col-sm-6">
            <q-input
              hide-bottom-space
              dense
              borderless
              outlined
              :readonly="
                !status ||
                checkRoutePermisson ||
                probationStore.dataPermissions?.tab6.isEdit == false
              "
              class="bg-white"
              type="textarea"
              v-model="reson"
              lazy-rules
              label="เหตุผล"
              :rules="[(val:string) => (!!val && val.length > 0) || 'กรุณาระบุเหตุผล']"
            />
          </div>
          <div class="col-xs-12 col-sm-6">
            <q-input
              hide-bottom-space
              dense
              borderless
              outlined
              readonly
              class="bg-white"
              type="textarea"
              v-model="reson52"
              lazy-rules
              label="ความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52"
              :rules="[(val:string) => (!!val && val.length > 0) || 'กรุณาระบุเหตุผล']"
            />
          </div>
        </div>
      </div>

      <div class="col-12 q-mt-lg">
        <q-separator size="3px" color="grey-2" />
      </div>

      <div class="row col-12 q-gutter-lg q-mt-none">
        <div class="col-12 row">
          <div class="col-12 text-top2 row items-center">
            ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
          </div>
          <div class="col-12 row q-col-gutter-md">
            <q-select
              class="col-xs-12 col-sm-8"
              dense
              v-model="director_id"
              outlined
              :options="commander"
              label="ชื่อ-นามสกุล"
              option-label="label"
              readonly
            />
            <div class="col-xs-12 col-sm-4">
              <datepicker
                v-model="chairman_dated"
                :locale="'th'"
                :readonly="
                  !status ||
                  checkRoutePermisson ||
                  probationStore.dataPermissions?.tab6.isEdit == false
                "
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    :readonly="!status || checkRoutePermisson"
                    class="full-width datepicker col-3"
                    :model-value="
                      chairman_dated != null ? date2Thai(chairman_dated) : null
                    "
                    :label="`${'ลงวันที่'}`"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
        </div>

        <div class="col-12 row q-mt-xs">
          <div class="col-12 text-top2 row items-center q-gutter-sm">
            <span> ผู้มีอํานาจสั่งบรรจุตามมาตรา 52 </span>
            <div
              v-if="
                action == 'add' &&
                !checkRoutePermisson &&
                probationStore.dataPermissions?.tab6.isEdit
              "
            >
              <q-btn
                color="primary"
                label="เลือกผู้มีอํานาจ"
                @click="modal = true"
              />
            </div>
          </div>
          <div class="col-12 row q-col-gutter-md">
            <q-input
              class="col-xs-12 col-sm-8"
              dense
              outlined
              label="ชื่อ-นามสกุล"
              readonly
              option-label="label"
              :model-value="`${authority_name ? authority_name : ''} ${
                authority_pos ? `(${authority_pos}${authority_level})` : ''
              }`"
            />
            <div class="col-xs-12 col-sm-4">
              <datepicker
                v-model="authority_dated"
                :locale="'th'"
                autoApply
                borderless
                :readonly="
                  !status ||
                  checkRoutePermisson ||
                  probationStore.dataPermissions?.tab6.isEdit == false
                "
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    :readonly="!status || checkRoutePermisson"
                    class="full-width datepicker col-3"
                    :model-value="
                      authority_dated != null
                        ? date2Thai(authority_dated)
                        : null
                    "
                    :label="`${'ลงวันที่'}`"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
        </div>

        <!-- <div class="col-12 row q-mt-xs">
          <div class="col-12 text-top2 row items-center">คณะกรรมการ</div>
          <div class="col-12 row q-col-gutter-md">
            <q-select
              class="col-xs-12 col-sm-8"
              dense
              v-model="director_id2"
              outlined
              label="ชื่อ-นามสกุล"
              readonly
              :options="optionDirector"
              option-label="label"
            />
            <div class="col-xs-12 col-sm-4">
              <datepicker
                v-model="director1_dated"
                :locale="'th'"
                autoApply
                borderless
                :readonly="
                  !status ||
                  checkRoutePermisson ||
                  probationStore.dataPermissions?.tab6.isEdit == false
                "
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    :readonly="!status || checkRoutePermisson"
                    class="full-width datepicker col-3"
                    :model-value="
                      director1_dated != null
                        ? date2Thai(director1_dated)
                        : null
                    "
                    :label="`${'ลงวันที่'}`"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
        </div> -->

        <!-- <div class="col-12 row q-mt-xs">
          <div class="col-12 text-top2 row items-center">
            คณะกรรมการ
          </div>

          <div class="col-12 row q-col-gutter-md">
            <q-select
              class="col-xs-12 col-sm-8"
              dense
              v-model="director_id3"
              outlined
              label="ชื่อ-นามสกุล"
              :options="optionDirector"
              readonly
              option-label="label"
            />

            <div class="col-xs-12 col-sm-4">
              <datepicker
                v-model="director2_dated"
                :locale="'th'"
                autoApply
                :readonly="
                  !status ||
                  checkRoutePermisson ||
                  probationStore.dataPermissions?.tab6.isEdit == false
                "
                borderless
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    :readonly="!status || checkRoutePermisson"
                    class="full-width datepicker col-3"
                    :model-value="
                      director2_dated != null
                        ? date2Thai(director2_dated)
                        : null
                    "
                    :label="`${'ลงวันที่'}`"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
        </div> -->
      </div>
    </q-form>

    <q-toolbar
      class="text-primary"
      v-if="
        action == 'add' &&
        !checkRoutePermisson &&
        probationStore.dataPermissions?.tab6.isEdit
      "
    >
      <q-space />
      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
    </q-toolbar>

    <FormUploadFile
      v-else
      :group="`รายงานผลครั้งที่ ${props.tab?.charAt(4)}`"
      v-model:is-check-file="isCheckFile"
      :check-route-permisson="checkRoutePermisson"
      :data-permissions="
        probationStore.dataPermissions?.tab6.isEdit
          ? probationStore.dataPermissions?.tab6.isEdit
          : false
      "
      :round="props.tab?.charAt(4)"
      :pass-result="result"
    />
  </div>

  <DialogSelectAuthority
    v-model:modal="modal"
    @update-authority="updateAuthority"
  />
</template>

<style lang="scss" scoped>
.text-top2 {
  font-weight: 500;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}

.text-top0 {
  font-weight: 600;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}

.q-rating__icon {
  text-shadow: transparent !important;
}

.q-card {
  box-shadow: 0px 0px 0px 0px !important;
}
</style>
