<template>
  <div class="flex justify-between p-y-16px">
    <slot name="headerTitle">
      <div class="title">
        {{ title }}
        <BasicHelp v-if="titleTooltip" class="ml-6px pt-3px" :text="titleTooltip" />
      </div>
    </slot>

    <div style="float: right;">
      <Space>
        <slot name="toolbar"></slot>
        <span v-if="exportFileName">
          <slot name="export-button">
            <a-button size="small" v-if="isExportCurrent" @click="exportData2Excel()">导出</a-button>
            <a-dropdown-button v-else @click="exportData2Excel()" size="small">
              <!-- 导出 -->
              {{ $t('component.excel.export') }}
              <template #overlay>
                <a-menu @click="handleMenuClick">
                  <a-menu-item key="1">{{ $t('component.excel.exportCurrent') }}</a-menu-item>
                  <a-menu-item key="2">{{ $t('component.excel.exportAll') }}</a-menu-item>
                </a-menu>
              </template>
              <template #icon>
                <DownOutlined />
              </template>
            </a-dropdown-button>
          </slot>
        </span>
      </Space>
      <Divider v-if="$slots.toolbar && showTableSetting" type="vertical" />
      <TableSetting
v-if="showTableSetting" :showOrderParama="showOrderParama" :showFullScreen="showFullScreen"
        :showAutoForm="showAutoForm" @clos-change-by-tools="handleColsChange" @order-change="handleOrderChange"
        @full-screen="handleFullScreen" @complex-query="handlerComplexChange" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Divider, Space } from 'ant-design-vue';
import TableSetting from '../table-settings/index.vue';
import BasicHelp from '@/components/basic/basic-help/index.vue';
import type { MenuProps } from 'ant-design-vue';
import { useTableContext } from '@/components/lt-a-table/src/hooks';


defineProps({
  title: {
    type: String,
    default: '',
  },
  titleTooltip: {
    type: String,
    default: '',
  },
  showTableSetting: {
    type: Boolean,
    default: true,
  },
  showOrderParama: {
    type: Boolean,
    default: false,
  },
  showFullScreen: {
    type: Boolean,
    default: false,
  },
  exportFileName: {
    type: String,
    default: '',
  },
  showAutoForm: {
    type: Boolean,
    default: true,
  },
  isExportCurrent: {
    type: Boolean,
    default: false,
  }
});

const emit = defineEmits(['cols-change', 'order-change', "full-screen", "complex-query", "export-data"]);
const handleColsChange = function (cols) {
  emit('cols-change', cols)
}

const handleOrderChange = function (form, union) {
  emit('order-change', form, union)
}
const handleFullScreen = function (value) {
  emit('full-screen', value)
}

const handlerComplexChange = function (val) {
  //复杂查询条件
  emit('complex-query', val)
}
const { exportData2Excel } = useTableContext();

const handleMenuClick: MenuProps['onClick'] = e => {
  if (e.key == '1') {
    exportData2Excel()
  } else {
    exportData2Excel('all')
  }
};

</script>

<style lang="less" scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
}
</style>
