<template>
    <div class="q-px-md q-pb-md">
      <div class="col-12 row q-py-sm" v-if="nornmalData == false">
        <q-btn
          v-if="!editvisible == true && publicNoBtn == false"
          flat
          round
          :disabled="editvisible == true"
          :color="editvisible == true ? 'grey-7' : 'primary'"
          @click="edit"
          icon="mdi-pencil-outline"
        >
        
          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
        </q-btn>
        <q-btn
          v-else
          flat
          round
          :disabled="editvisible == false"
          :outline="editvisible == false"
          :color="editvisible == false ? 'grey-7' : 'red'"
          @click="cancel()"
          icon="mdi-undo"
        >
          <q-tooltip>ยกเลิก</q-tooltip>
        </q-btn>
        <div class="q-px-sm">
          <q-btn
            flat
            round
            :disabled="editvisible == false"
            :color="editvisible == false ? 'grey-7' : 'public'"
            @click="add"
            icon="mdi-content-save-outline"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </div>


  
        <q-space />
        <div class="items-center" style="display: flex">

          <div
            class="row items-center"
            style="display: flex"
            v-if="publicData == false && publicNoBtn == false"
          >

          </div>

          <q-input
            standout
            dense
            :model-value="inputfilter"
            ref="filterRef"
            @update:model-value="updateInput"
            outlined
            debounce="300"
            placeholder="ค้นหา"
            style="max-width: 200px"
            class="q-ml-sm"
          >
            <template v-slot:append>
              <q-icon v-if="inputfilter == ''" name="search" />
              <q-icon
                v-if="inputfilter !== ''"
                name="clear"
                class="cursor-pointer"
                @click="resetFilter"
              />
            </template>
          </q-input>
          <!-- แสดง table ใน คอลัมน์ -->
          <q-select
            :model-value="inputvisible"
            @update:model-value="updateVisible"
            :display-value="$q.lang.table.columns"
            multiple
            outlined
            dense
            :options="attrs.columns"
            options-dense
            option-value="name"
            map-options
            emit-value
            style="min-width: 150px"
            class="gt-xs q-ml-sm"
          />
        </div>
      </div>
      <!-- header บน table มี ค้นหา แสดงคอลัมน์ (status nornmalData true) -->
      <div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
        <span class="text-subtitle1">{{ titleText }}</span>
        <!-- <q-select
          :model-value="inputvisibleFilter"
          :options="optionsFilter"
          style="min-width: 150px"
          class="gt-xs q-ml-sm"
        /> -->
        <q-select
          dense
          outlined
          :model-value="inputvisibleFilter"
          :options="optionsFilter"
          class="col-xs-12 col-sm-4 col-md-3"
          option-value="id"
          option-label="name"
          map-options
          emit-value
          @update:model-value="updateVisibleFilter"
          v-if="optionsFilter != undefined && optionsFilter.length > 0"
        />
        <q-space />
        <div class="items-center" style="display: flex">
          <!-- ค้นหาข้อความใน table -->
          <q-input
            standout
            dense
            :model-value="inputfilter"
            ref="filterRef"
            @update:model-value="updateInput"
            outlined
            debounce="300"
            placeholder="ค้นหา"
            style="max-width: 200px"
            class="q-ml-sm"
          >
            <template v-slot:append>
              <q-icon v-if="inputfilter == ''" name="search" />
              <q-icon
                v-if="inputfilter !== ''"
                name="clear"
                class="cursor-pointer"
                @click="resetFilter"
              />
            </template>
          </q-input>
          <!-- แสดงคอลัมน์ใน table -->
          <q-select
            :model-value="inputvisible"
            @update:model-value="updateVisible"
            :display-value="$q.lang.table.columns"
            multiple
            outlined
            dense
            :options="attrs.columns"
            options-dense
            option-value="name"
            map-options
            emit-value
            style="min-width: 150px"
            class="gt-xs q-ml-sm"
          />
        </div>
      </div>
      <q-table
        ref="table"
        flat
        bordered
        class="custom-header-table"
        v-bind="attrs"
        virtual-scroll
        :virtual-scroll-sticky-size-start="48"
        dense
        :pagination-label="paginationLabel"
        :pagination="initialPagination"
        :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
      >
        <!-- :pagination="initialPagination" -->
        <!-- :rows-per-page-options="[0]" -->
        <template v-slot:header="props">
          <q-tr :props="props">
  
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              <span class="text-weight-medium">{{ col.label }}</span>
            </q-th>
            <q-th
              auto-width
              v-if="
                editvisible == true || nextPageVisible == true || history == true
              "
            />
            
          </q-tr>
          
        </template>
        <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
        <template #body="props">
          <slot v-bind="props" name="columns"></slot>
        </template>
      </q-table>
    </div>
    
  </template>
  <script setup lang="ts">
  import { ref, useAttrs } from "vue";
  import { useCounterMixin } from "@/stores/mixin";
  import { useQuasar } from "quasar";
  
  const $q = useQuasar();
  const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
  const { dialogMessage } = mixin;
  
  const attrs = ref<any>(useAttrs());
  const table = ref<any>(null);
  const filterRef = ref<any>(null);
  const modalPublish = ref<boolean>(false);
  const modalDelete = ref<boolean>(false);
  const props = defineProps({
    inputfilter: String,
    inputvisible: Array,
    inputvisibleFilter: String,
    editvisible: Boolean,
    titleText: String,
    optionsFilter: {
      type: Array,
      defualt: [],
    },
    boss: {
      type: Boolean,
      defualt: false,
    },
    saveNoDraft: {
      type: Boolean,
      defualt: false,
    },
    history: {
      type: Boolean,
      defualt: false,
    },
    paging: {
      type: Boolean,
      defualt: false,
    },
    nornmalData: {
      type: Boolean,
      defualt: false,
    },
    nextPageVisible: {
      type: Boolean,
      defualt: false,
    },
    publicData: {
      type: Boolean,
      defualt: true,
      required: false,
    },
    updateData: {
      type: Boolean,
      defualt: true,
      required: false,
    },
    publicNoBtn: {
      type: Boolean,
      defualt: false,
    },
    add: {
      type: Function,
      default: () => console.log("not function"),
    },
    edit: {
      type: Function,
      default: () => console.log("not function"),
    },
    save: {
      type: Function,
      default: () => console.log("not function"),
    },
    deleted: {
      type: Function,
      default: () => console.log("not function"),
    },
    cancel: {
      type: Function,
      default: () => console.log("not function"),
    },
    publish: {
      type: Function,
      default: () => console.log("not function"),
    },
    validate: {
      type: Function,
      default: () => console.log("not function"),
    },
  });
  const initialPagination = ref<any>({
    //   descending: false,
    rowsPerPage: props.paging == true ? 25 : 0,
  });
  
  const emit = defineEmits([
    "update:inputfilter",
    "update:inputvisible",
    "update:editvisible",
    "update:titleText",
    "update:inputvisibleFilter",
  ]);
  
  const updateEdit = (value: any) => {
    emit("update:editvisible", value);
  };
  const updateInput = (value: any) => {
    emit("update:inputfilter", value);
  };
  const updateVisible = (value: any) => {
    emit("update:inputvisible", value);
  };
  const updateVisibleFilter = (value: any) => {
    emit("update:inputvisibleFilter", value);
  };
  
  const paginationLabel = (start: string, end: string, total: string) => {
    if (props.paging == true)
      return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
    else return start + "-" + end + " ใน " + total;
  };
  
  const checkSave = () => {
    props.validate();
    props.save();
    //   if (myForm.value !== null) {
    //     myForm.value.validate().then((success) => {
    //       if (success) {
    //       }
    //     });
    //   }
  };
  
  const publishModal = () => {
    props.validate();
    const filter = attrs.value.rows.filter((r: any) => r.name == "");
  
    if (filter.length == 0 || attrs.value.rows.length == 0) {
      // modalPublish.value = true;
      dialogMessage(
        $q,
        "ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
        "ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
        "public",
        "เผยแพร่",
        "public",
        props.publish,
        undefined
      );
    }
  };
  
  const DeleteModal = () => {
    //   modalDelete.value = true;
    dialogMessage(
      $q,
      "ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
      "ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
      "mdi-file-remove-outline",
      "ลบบันทึก",
      "red",
      props.deleted,
      undefined
    );
  };
  
  const edit = async () => {
    updateEdit(!props.editvisible);
    props.edit();
  };
  
  const add = async () => {
    //   if (myForm.value !== null) {
    //     myForm.value.validate();
    //   }
    props.validate();
    props.add();
    await table.value.lastPage();
    await table.value.scrollTo(attrs.value.rows.length - 1);
  };
  
  const deleted = async () => {
    // const deletedF = () => {
    if (props.publicNoBtn === false) {
      updateEdit(false);
    }
    props.deleted();
  };
  
  const resetFilter = () => {
    // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
    emit("update:inputfilter", "");
    filterRef.value.focus();
  };
  </script>
  <style lang="scss">
  .icon-color {
    color: #4154b3;
  }
  .custom-header-table {
    max-height: 64vh;
    .q-table tr:nth-child(odd) td {
      background: white;
    }
    .q-table tr:nth-child(even) td {
      background: #f8f8f8;
    }
  
    .q-table thead tr {
      background: #ecebeb;
    }
  
    .q-table thead tr th {
      position: sticky;
      z-index: 1;
    }
    /* this will be the loading indicator */
    .q-table thead tr:last-child th {
      /* height of all previous header rows */
      top: 48px;
    }
    .q-table thead tr:first-child th {
      top: 0;
    }
  }
  </style>
  