<template>
  <div class="flex items-center">
    <div class="flex items-center">
      <q-icon
        :name="icon"
        size="1.5em"
        color="grey-5"
        class="q-mr-md"
        v-if="icon != ''"
      />
      <div
        class="text-bold text-subtitle2 col-12 row items-center"
        v-if="header != ''"
      >
        {{ header }}
      </div>
    </div>
    <div class="q-gutter-sm q-mx-sm" v-if="addData == false"></div>

    <q-space />
    <q-btn
      color="info"
      flat
      dense
      round
      size="14px"
      icon="mdi-history"
      v-if="history"
      @click="historyClick"
    >
      <q-tooltip>ประวัติ{{ header }}</q-tooltip>
    </q-btn>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  header: {
    type: String,
    default: "ข้อความ",
    required: true,
  },
  iconAdd: {
    type: String,
    default: null,
  },
  icon: {
    type: String,
    default: "mdi-help",
    required: true,
  },
  edit: {
    type: Boolean,
    default: true,
    required: true,
  },
  history: {
    type: Boolean,
    default: true,
    required: true,
  },
  addData: {
    type: Boolean,
    defualt: false,
  },
  disable: {
    type: Boolean,
    defualt: false,
  },
  historyClick: {
    type: Function,
    default: () => console.log("not function"),
  },
  add: {
    type: Function,
    default: () => console.log("not function"),
  },
  addleave: {
    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"),
  },
  changeBtn: {
    type: Function,
    default: () => console.log("not function"),
  },
  addEmployee: {
    type: Boolean,
    defualt: false,
  },
});

const emit = defineEmits(["update:edit"]);

const updateEdit = (value: any) => {
  emit("update:edit", value);
};

const ClickEdit = () => {
  updateEdit(!props.edit);
  props.changeBtn();
};

const historyClick = async () => {
  await props.historyClick();
};

const ClickCancel = () => {
  updateEdit(!props.edit);
  props.cancel();
  props.changeBtn();
};

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

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

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