<script setup lang="ts">
import { ref } from "vue";
import { useSupportStore } from "@/modules/00_support/store/Main";
import dialogHeader from "@/components/DialogHeader.vue";
const store = useSupportStore();
const open = ref<boolean>(false);

const statusIssue: ("ปัญหาใหม่" | "กำลังดำเนินการ" | "เสร็จสิ้น")[] = [
  "ปัญหาใหม่",
  "กำลังดำเนินการ",
  "เสร็จสิ้น",
];

const status = ref<"ปัญหาใหม่" | "กำลังดำเนินการ" | "เสร็จสิ้น">(
  store.correntStatusIssue == "new"
    ? "ปัญหาใหม่"
    : store.correntStatusIssue == "ongoing"
    ? "กำลังดำเนินการ"
    : "เสร็จสิ้น"
);

function saveData(inputStatus: "ปัญหาใหม่" | "กำลังดำเนินการ" | "เสร็จสิ้น") {
  const statusEn: "new" | "ongoing" | "resolved" =
    inputStatus == "ปัญหาใหม่"
      ? "new"
      : inputStatus == "กำลังดำเนินการ"
      ? "ongoing"
      : "resolved";
  store.ChangeStatusIssue(
    store.currentIssue,
    store.currentTitle,
    store.currentCategoryId,
    statusEn
  );
}

defineProps({
  issueId: String,
});
</script>

<template>
  <q-btn icon="more_vert" dense flat size="11px" @click.stop>
    <q-menu transition-show="jump-down" transition-hide="jump-up">
      <q-list style="min-width: 100px">
        <q-item
          clickable
          v-close-popup
          @click="
            () => {
              console.log('เเก้ไข ' + issueId);
              open = true;
            }
          "
        >
          <q-item-section>
            <div class="row items-center white">
              <q-icon name="o_edit" color="positive" />
              <span class="q-ml-sm">แก้ไขสถานะ</span>
            </div></q-item-section
          >
        </q-item>
      </q-list>
    </q-menu>
  </q-btn>

  <q-dialog v-model="open" class="dialog" persistent>
    <q-card style="min-width: 350px" class="bg-grey-11">
      <q-card-section class="flex justify-between" style="padding: 0">
        <dialog-header
          tittle="แก้ไขสถานะ"
          :close="
            () => {
              open = false;
            }
          "
        />
      </q-card-section>

      <q-separator color="grey-4" />
      <q-card-section class="q-pa-none align-center">
        <div class="bg-white q-ma-sm border_black">
          <q-select
            class="q-my-sm q-mx-sm"
            style="width: 280px"
            borderless
            dense
            outlined
            color="secondary"
            v-model="status"
            :options="statusIssue"
            label="สถานะ"
          />
        </div>
      </q-card-section>
      <q-separator color="grey-4" />
      <q-card-actions align="right">
        <q-btn
          id="onSubmit"
          type="submit"
          dense
          unelevated
          label="บันทึก"
          color="public"
          class="q-px-md"
          @click="
            () => {
              saveData(status);
              open = false;
            }
          "
        >
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.border_black {
  border: solid 1px rgb(200, 211, 219);
  padding: 2px;
  display: inline-block;
  border-radius: 5px;
}

.align-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
