<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",
]);

/**
 * ฟังชั่น update
 * @param value true/false
 */
function updateEdit(value: Boolean){
  emit("update:editvisible", value);
};

/** update edit */
async function edit(){
  updateEdit(!props.editvisible);
  props.edit();
};

/** save */
function 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" 
      >
    </q-btn>

    <div v-else>
      <q-btn 
        unelevated
        label="บันทึก"
        :disabled="!editvisible" 
        :color="!editvisible ? 'grey-7' : 'public'" 
        @click="checkSave"
      >
      </q-btn>
    </div>
  </q-card-actions>
</template>
