<template>
  <div class="flex items-center q-pb-md">
    <div class="flex items-center" v-if="header != ''">
      <q-icon :name="icon" size="1.5em" color="grey-5" class="q-mr-md" />
      <div class="text-weight-medium text-dark col-12 row items-center text-subtitle1">
        {{ header }}
      </div>
    </div>
    <div v-if="editData == true">
      <div class="q-gutter-sm q-mx-sm" v-if="addData == true">
        <q-btn
          size="15px"
          flat
          dense
          v-if="edit && !editOnly"
          :color="!edit ? 'grey-7' : 'public'"
          @click="save"
          icon="mdi-content-save-outline"
        >
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
        </q-btn>
      </div>
      <div class="q-pl-sm" v-else>
        <q-btn
          size="12px"
          flat
          round
          v-if="edit && !editOnly"
          :color="!edit ? 'grey-7' : 'add'"
          @click="add"
          icon="mdi-plus"
        >
          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
        </q-btn>
      </div>
    </div>
    <q-space />
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  header: {
    type: String,
    default: "",
    required: true,
  },
  icon: {
    type: String,
    default: "",
    required: true,
  },
  edit: {
    type: Boolean,
    default: true,
    required: true,
  },
  addData: {
    type: Boolean,
    defualt: true,
    required: true,
  },
  editData: {
    type: Boolean,
    defualt: true,
    required: true,
  },
  editOnly: {
    type: Boolean,
    defualt: false,
    required: true,
  },
  add: {
    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"),
  },
  editBtn: {
    type: Function,
    default: () => console.log("not function"),
  },
  changeBtn: {
    type: Function,
    default: () => console.log("not function"),
  },
});

const save = () => {
  props.save();
};

const add = () => {
  props.add();
};
</script>
<style scoped></style>
