<!-- =============================== -->
<!-- Component ปุ่มกด หน้า TreeList -->
<!-- v-model:editvisible="True/False" -->
<!-- :refreshData="clearLocalStorage Function"
     :deleteDraft="clickDeleteDraft Function"
     :publishDraft="clickPublish Function"
     :publicData="version === 'published'" (True = Disable Buttons) -->
<!-- =============================== -->
<template>
  <div>
    <q-btn
      v-if="!editvisible"
      flat
      round
      :disabled="editvisible"
      :color="editvisible ? 'grey-7' : 'primary'"
      @click="clickEdit()"
      icon="mdi-pencil-outline"
      class="q-mr-sm"
    >
      <q-tooltip>แก้ไขโครงสร้าง</q-tooltip>
    </q-btn>
    <q-btn
      flat
      round
      v-if="editvisible"
      :disabled="!editvisible"
      :color="!editvisible ? 'grey-7' : 'red'"
      @click="clickCancel()"
      icon="mdi-undo"
      class="q-mr-sm"
    >
      <q-tooltip>ยกเลิก</q-tooltip>
    </q-btn>
    <!-- ลบบันทึกร่าง แสดงเมื่อ บันทึกร่างแล้ว -->
    <q-btn
      flat
      round
      :disabled="publicData == true || editvisible == false"
      :color="
        publicData == true || editvisible == false ? 'grey-7' : 'deep-orange'
      "
      @click="showDeleteModal()"
      icon="mdi-file-remove-outline"
      class="q-mr-sm"
    >
      <q-tooltip>ลบบันทึกร่าง</q-tooltip>
    </q-btn>
    <!-- เผยแพร่ -->
    <q-btn
      flat
      round
      :disabled="
        !(publicData == false || updateData == true) || editvisible == false
      "
      :color="
        !(publicData == false || updateData == true) || editvisible == false
          ? 'grey-7'
          : 'public'
      "
      icon="mdi-cloud-upload-outline"
      @click="showPublishModal()"
      class="q-mr-sm"
    >
      <q-tooltip>เผยแพร่</q-tooltip>
    </q-btn>
    <!-- refresh data -->
    <!-- <q-btn
      flat
      round
      icon="mdi-refresh"
      @click="refreshData()"
      color="public"
      class="q-mr-sm"
    >
      <q-tooltip>รีเฟรชข้อมูล</q-tooltip>
    </q-btn> -->
    <q-space />
  </div>
  <!-- ข้อมูลการเผยแพร่ข้อมูล -->
  <!-- <q-dialog v-model="modalPublish" persistent>
    <q-card class="q-pa-sm">
      <q-card-section class="row">
        <div class="q-pr-md">
          <q-avatar
            icon="public"
            size="lg"
            font-size="25px"
            color="blue-1"
            text-color="public"
          />
        </div>
        <div class="col text-dark">
          <span class="text-bold">ต้องการเผยแพร่ข้อมูลนี้หรือไม่?</span>
          <br />
          <span>ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที</span>
        </div>
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-teal">
        <q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
        <q-btn
          label="เผยแพร่"
          color="public"
          @click="publishDraft()"
          v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog> -->
  <!-- <notifyPublishDraft v-model:showModal="modalPublish" :ok="publishDraft" /> -->
  <!-- ข้อมูลการลบเผยแพร่ข้อมูล -->
  <!-- <q-dialog v-model="modalDelete" persistent>
    <q-card class="q-pa-sm">
      <q-card-section class="row">
        <div class="q-pr-md">
          <q-avatar
            icon="mdi-file-remove-outline"
            size="lg"
            font-size="25px"
            color="red-1"
            text-color="deep-orange"
          />
        </div>
        <div class="col text-dark">
          <span class="text-bold">ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?</span>
          <br />
          <span>ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
        </div>
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-teal">
        <q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
        <q-btn
          label="ลบบันทึก"
          color="red"
          @click="deleteDraft()"
          v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog> -->
  <!-- <notifyDeleteDraft v-model:showModal="modalDelete" :ok="deleteDraft" /> -->
</template>
<script setup lang="ts">
// import NotifyDeleteDraft from "@/components/NotifyDeleteDraft.vue";
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";

const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage } = mixin;

const modalPublish = ref<boolean>(false);
const modalDelete = ref<boolean>(false);
const emit = defineEmits(["update:editvisible"]);
const props = defineProps({
  editvisible: {
    type: Boolean,
    defualt: false,
  },
  publicData: {
    type: Boolean,
    defualt: true,
    required: false,
  },
  updateData: {
    type: Boolean,
    defualt: true,
    required: false,
  },
  refreshData: {
    type: Function,
    default: () => console.log("call Parent refreshData"),
  },
  publishDraft: {
    type: Function,
    default: () => console.log("call parent publishDraft"),
  },
  deleteDraft: {
    type: Function,
    default: () => console.log("call parent deleteDraft"),
  },
});
const clickRefresh = () => {
  props.refreshData();
};
const clickEdit = () => {
  emit("update:editvisible", !props.editvisible);
};
const clickCancel = () => {
  emit("update:editvisible", !props.editvisible);
};
const showPublishModal = () => {
  //   modalPublish.value = true;
  dialogMessage(
    $q,
    "ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
    "ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
    "public",
    "เผยแพร่",
    "public",
    props.publishDraft,
    undefined
  );
};
const showDeleteModal = () => {
  //   modalDelete.value = true;
  dialogMessage(
    $q,
    "ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
    "ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
    "mdi-file-remove-outline",
    "ลบบันทึก",
    "red",
    props.deleteDraft,
    undefined
  );
};
const hideDeleteModal = () => {
  props.deleteDraft(); //Call Function DeleteDraft in Parent page
};
const hidePublishModal = () => {
  props.publishDraft(); //Call Function DeleteDraft in Parent page
};
</script>
<style lang="scss">
.icon-color {
  color: #4154b3;
}
</style>
