<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" flat round :disabled="editvisible" :color="editvisible ? 'grey-7' : 'primary'"
      @click="edit" icon="mdi-pencil-outline">
      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
    </q-btn>
    <div v-else>
      <q-btn flat round :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'public'" @click="checkSave"
        icon="mdi-content-save-outline">
        <q-tooltip>บันทึก</q-tooltip>
      </q-btn>
    </div>
  </q-card-actions>
</template>
