<script setup lang="ts">

const props = defineProps({
  editvisible: Boolean,
  modalEdit: Boolean,
  cancel: {
    type: Function,
    default: () => console.log("not function"),
  },
  edit: {
    type: Function,
    default: () => console.log("not function"),
  },
  save: {
    type: Function,
    default: () => console.log("not function"),
  },
  validate: {
    type: Function,
    default: () => console.log("not function"),
  },
});
const emit = defineEmits([
  "update:editvisible",
  "update:next",
  "update:previous",
]);

const updateEdit = (value: Boolean) => {
  emit("update:editvisible", value);
};
// const cancel = async () => {
//   props.cancel();
// };
const edit = async () => {
  updateEdit(!props.editvisible);
  props.edit();
};
const checkSave = () => {
  props.validate();
  props.save();

};
</script>
<template>
  <q-card-actions class="text-primary">
    <q-space />
    <q-btn 
      v-if="!editvisible" 
      outline
      :disabled="editvisible" 
      :color="editvisible ? 'grey-7' : 'primary'"
      @click="edit" 
      ><!-- icon="mdi-pencil-outline"
      <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
    </q-btn>
    <div v-else>
      <q-btn 
        unelevated
        label="บันทึก"
        :disabled="!editvisible" 
        :color="!editvisible ? 'grey-7' : 'public'" 
        @click="checkSave"
      >
      </q-btn><!-- icon="mdi-content-save-outline">
        <q-tooltip>บันทึก</q-tooltip> -->
    </div>
  </q-card-actions>
</template>
