<script setup lang="ts">
import { ref } from "vue";
import { useSupportStore } from "@/modules/00_support/store/Main";
const store = useSupportStore();
const open = ref<boolean>(false);
const statusIssue: ("new" | "ongoing" | "resolved")[] = [
  "new",
  "ongoing",
  "resolved",
];

const status = ref<"new" | "ongoing" | "resolved">(store.correntStatusIssue);

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" persistent>
    <q-card>
      <q-card-section class="row items-center">
        <div class="flex items-center" style="flex-wrap: nowrap">
          <div>
            <h6 class="q-my-none">แก้ไขสถานะ</h6>

            <q-btn-dropdown
              v-if="store.currentIssue"
              :label="
                store.correntStatusIssue == 'new'
                  ? 'ปัญหาใหม่'
                  : store.correntStatusIssue == 'ongoing'
                  ? 'กำลังดำเนินการ'
                  : 'เสร็จสิ้น'
              "
              @click.stop
            >
              <q-list v-for="itemStatusIssue in statusIssue">
                <q-item
                  clickable
                  v-close-popup
                  @click="
                    () => {
                      status = itemStatusIssue;
                    }
                  "
                >
                  <q-item-section>
                    <q-item-label>{{
                      itemStatusIssue == "new"
                        ? "ปัญหาใหม่"
                        : itemStatusIssue == "ongoing"
                        ? "กำลังดำเนินการ"
                        : "เสร็จสิ้น"
                    }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </div>
        </div>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn
          @click="
            () => {
              console.log('ยกเลิกการลบ');
            }
          "
          label="ยกเลิก"
          flat
          v-close-popup
          id="dialogDeleteClose"
        />

        <q-btn
          @click="
            () => {
              store.ChangeStatusIssue(
                store.currentIssue,
                store.currentTitle,
                store.currentCategoryId,
                status
              );
            }
          "
          color="primary"
          v-close-popup
          label="ยืนยัน"
          id="dialogDeleteConfirm"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
