<template>
  <Space :size="8">
    <Tooltip placement="top" v-if="props.showFullScreen == false">
      <template #title>
        <span>{{ $t('component.table.fullScreen') }}</span>
      </template>
      <FullscreenOutlined @click="handleFullScreen(true)" />
    </Tooltip>
    <Tooltip placement="top" v-else>
      <template #title>
        <span>{{ $t('component.table.exitFullScreen') }}</span>
      </template>
      <FullscreenExitOutlined @click="handleFullScreen(false)" />
    </Tooltip>
    <RefreshSetting />
    <ColumnSetting @clos-change-by-tools="handleClosChange" />
    <SizeSetting />
    <OrderParam v-if="props.showOrderParama" @order-confirm="handleOrderChange" />
    <QueryForm v-if="props.showAutoForm" @complex-query="handlerComplexChange" />
  </Space>
</template>

<script lang="ts" setup>
import { Space, Tooltip } from 'ant-design-vue';
import SizeSetting from './size-setting.vue';
import RefreshSetting from './refresh-setting.vue';
import ColumnSetting from './column-setting.vue';
import OrderParam from "./order-param.vue"; //排序设置界面
import QueryForm from "./filter-query-form.vue" //更多条件查询界面

const props = defineProps({
  showOrderParama: {
    type: Boolean,
    default: false,
  },
  showFullScreen: {
    type: Boolean,
    default: true,
  },
  showAutoForm: {
    type: Boolean,
    default: true,
  }
})

const emits = defineEmits(['clos-change-by-tools', "order-change", "full-screen", "complex-query"])
const handleClosChange = function (cols) {
  emits('clos-change-by-tools', cols)
}

const handleOrderChange = function (form, union) {
  emits('order-change', form, union)
}

const handleFullScreen = function (val) {
  emits('full-screen', val)
}

const handlerComplexChange = function (val) {
  //复杂查询条件
  emits('complex-query', val)

}
</script>

