<script setup lang="ts">
/**
 * @Name: IndicatorHeatmap.vue
 * @Description: 搜索词-分析页-Query汇总
 * @Author: Cheney
 */

import { inject, nextTick, onBeforeUnmount, Ref, ref } from 'vue'
import * as api from './api';
import { usePagination } from '/@/utils/usePagination';
import emitter from '/@/utils/emitter'

const { tableData, total, currentPage, pageSize, handlePageChange } = usePagination(fetchTableData);
const filter = inject<Ref>('filter');
const loading = ref(false);
const typeSelect = ref('positive');

onBeforeUnmount(() => {
  emitter.all.clear();
});

emitter.on('QueryCondition-sendRequest', () => {
  fetchTableData();
});

async function fetchTableData() {
  loading.value = true;
  const query = {
    date_start: filter.value.reportDate[0],
    date_end: filter.value.reportDate[1],
    report_range: filter.value.reportType,
    layer_type: filter.value.layerType,
    searchTerm_type: typeSelect.value,
    page: currentPage.value,
    limit: pageSize
  };
  try {
    const response = await api.getTableData(query);
    total.value = response.total;
    tableData.value = response.data;
  } catch (error) {
    console.log('error:', error);
  } finally {
    loading.value = false;
    await nextTick();
    // 触发窗口 resize 事件
    window.dispatchEvent(new Event('resize'));
  }
}

function changeType() {}
</script>

<template>
  <el-card shadow="never" v-loading="loading">
    <div class="flex gap-5 mb-4 justify-center">
      <div>
        <span class="font-medium mr-0.5">类型 </span>
        <el-select v-model="typeSelect" @change="changeType" style="width: 130px">
          <el-option label="positive" value="positive" />
          <el-option label="negative" value="negative" />
        </el-select>
      </div>
    </div>
    <div style="height: 100%; overflow: auto">
      <el-table :data="tableData" height="550" stripe style="width: 100%">
        <!--<el-table-column prop="keyword" label="搜索词" width="200" />-->
      </el-table>
    </div>
    <div class="mt-3.5 flex justify-end">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50, 100, 200]"
        layout="sizes, prev, pager, next"
        :total="total"
        @change="handlePageChange" />
    </div>
  </el-card>
</template>

<style scoped></style>
