<template>
  <div style="display: flex;align-items: center;height: 100%">
    <slot name="prefixSlot"></slot>
    <a-button style="margin-left: 5px" type="primary" @click="handleRefresh" v-if="isShowRefresh">
      <template #icon>
        <i class="icon icon-refresh"> </i>
      </template>
      {{ $t("Formula.Common.Refresh") }}
    </a-button>
    <a-button style="margin-left: 5px" @click="handleNew" v-if="isShowNew"  class="success-btn">
      <template #icon>
        <i class="icon icon-plus"> </i>
      </template>
      {{ $t("Formula.Common.New") }}
    </a-button>
    <a-button
        type="primary"
        style="margin-left: 5px"
        @click="handleCopy"
        v-if="isShowCopy"
    >
      <template #icon>
        <i class="icon icon-copy"> </i>
      </template>
      {{ $t("Formula.Common.Copy") }}
    </a-button>
    <a-button
        type="primary"
        style="margin-left: 5px"
        @click="handleEdit"
        :disabled="!disableEdit"
        v-if="isShowEdit"
    >
      <template #icon>
        <i class="icon icon-edit"> </i>
      </template>
      {{ $t("Formula.Common.Edit") }}</a-button
    >
    <a-button
        type="primary"
        danger
        style="margin-left: 5px"
        @click="handleDel"
        :disabled="!disableDel"
        v-if="isShowDel"
    >
      <template #icon>
        <i class="icon icon-trash"> </i>
      </template>
      {{ $t("Formula.Common.Delete") }}
    </a-button>
    <a-button
        class="success-btn"
        style="margin-left: 5px"
        @click="handleCheck"
        :disabled="!disableCheck"
        v-if="isShowCheck"
    >
      <template #icon>
        <i class="icon icon-beaker"> </i>
      </template>
      {{ $t("Formula.Common.Check") }}
    </a-button>
    <a-button
        class="warning-btn"
        style="margin-left: 5px"
        @click="handleUnCheck"
        :disabled="!disableUncheck"
        v-if="isShowUncheck"
    >
      <template #icon>
        <i class="icon icon-beaker"> </i>
      </template>
      {{ $t("Formula.Common.UnCheck") }}
    </a-button>
    <a-button
        class="success-btn"
        style="margin-left: 5px"
        @click="handleValid"
        :disabled="!disableValid"
        v-if="isShowValid"
    >
      <template #icon>
        <i class="icon icon-anchor"> </i>
      </template>
      {{ $t("Formula.Common.Valid") }}
    </a-button>
    <a-button
        class="warning-btn"
        style="margin-left: 5px"
        @click="handleInvalid"
        :disabled="!disableInvalid"
        v-if="isShowInvalid"
    >
      <template #icon>
        <i class="icon icon-unlock-alt"> </i>
      </template>
      {{ $t("Formula.Common.Invalid") }}
    </a-button>
    <a-button
        type="primary"
        danger
        style="margin-left: 5px"
        @click="handleFinish"
        :disabled="!disableFinish"
        v-if="isShowFinish"
    >
      <template #icon>
        <i class="icon icon-circle"> </i>
      </template>
      {{ $t("Formula.Common.Finish") }}
    </a-button>
    <a-button
        type="primary"
        style="margin-left: 5px"
        @click="handleImport"
        :disabled="!disableImport"
        v-if="isShowImport"
    >
      <template #icon>
        <ImportOutlined />
      </template>
      {{ $t("Formula.Common.Import") }}</a-button
    >
    <a-button
        type="primary"
        style="margin-left: 5px"
        @click="handleExport"
        :disabled="!disableExport"
        v-if="isShowExport"
    >
      <template #icon>
        <ExportOutlined />
      </template>
      {{ $t("Formula.Common.Export") }}</a-button
    >
<!--    <test :test="state.test"></test>-->
    <slot name="suffixSlot"></slot>
  </div>
</template>
<script setup lang="ts">
import {ref, reactive, computed, onBeforeMount, PropType} from "vue";
import Test from "./test.vue"

const props = defineProps({
  isShowRefresh: {
    type: Boolean,
    default: true
  },
  isShowNew: {
    type: Boolean,
    default: false
  },
  isShowCopy: {
    type: Boolean,
    default: false
  },
  isShowEdit: {
    type: Boolean,
    default: false
  },
  disableEdit: {
    type: Boolean,
    default: true
  },
  isShowDel: {
    type: Boolean,
    default: false
  },
  disableDel: {
    type: Boolean,
    default: true
  },
  isShowCheck: {
    type: Boolean,
    default: false
  },
  disableCheck: {
    type: Boolean,
    default: true
  },
  isShowUncheck: {
    type: Boolean,
    default: false
  },
  disableUncheck: {
    type: Boolean,
    default: true
  },
  isShowValid: {
    type: Boolean,
    default: false
  },
  disableValid: {
    type: Boolean,
    default: true
  },
  isShowInvalid: {
    type: Boolean,
    default: false
  },
  disableInvalid: {
    type: Boolean,
    default: true
  },
  isShowFinish: {
    type: Boolean,
    default: false
  },
  disableFinish: {
    type: Boolean,
    default: true
  },
  isShowImport: {
    type: Boolean,
    default: false
  },
  disableImport: {
    type: Boolean,
    default: true
  },
  isShowExport: {
    type: Boolean,
    default: false
  },
  disableExport: {
    type: Boolean,
    default: true
  },
  // test:{
  //   type:String,
  //   default:''
  // }
})

const state = reactive({
  // test:'hhhh'
})

const emits = defineEmits(["refresh","new","copy", "edit", "delete", "check", "uncheck","valid","invalid",'finish','import','export'])

const handleRefresh=()=>{
  emits('refresh')
}
const handleNew=()=>{
  emits('new')
}
const handleCopy=()=>{
  emits('copy')
}
const handleEdit=()=>{
  emits('edit')
}
const handleDel=()=>{
  emits('delete')
}
const handleCheck=()=>{
  emits('check')
}
const handleUnCheck=()=>{
  emits('uncheck')
}
const handleValid=()=>{
  emits('valid')
}
const handleInvalid=()=>{
  emits('invalid')
}
const handleFinish=()=>{
  emits('finish')
}
const handleImport=()=>{
  emits('import')
}
const handleExport=()=>{
  emits('export')
}

</script>

<style scoped lang="less">

</style>