<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.value
  };
  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() {
  fetchTableData();
}

function getSearchLink(searchRoot: any) {
  const baseUrl = window.location.origin;  // 获取当前环境的基础URL
  return `${baseUrl}/apiLogin/?next=/#/searchTerm/targetingSearchTerm?searchRoot=${searchRoot}`;
}
</script>

<template>
  <el-card v-loading="loading" style="border: none;">
    <div class="relative flex gap-5 mb-5">
      <span class="absolute left-7 font-bold text-xl mb-4 text-center" style="color: #464646">搜索词-分析页-Query汇总</span>
      <div class="flex justify-center w-full items-center">
        <span class="font-medium mr-1.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>
    <el-card shadow="never">
      <div style="height: 100%; overflow: auto">
        <el-table :data="tableData" height="600" stripe style="width: 100%">
          <el-table-column type="index" width="55" />
          <el-table-column prop="Search_Query" label="搜索词" min-width="200">
            <template #default="{ row }">
              <el-link :underline="false" :href="getSearchLink(row.Search_Query)" target="_blank" style="color: #5a6fc0">
                {{ row.Search_Query }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="出现次数" align="center" min-width="200" sortable>
            <template #default="{ row }">
              <span class="font-medium">{{ row.count }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Impressions_Total_Count" label="曝光次数" align="center" min-width="200" sortable>
            <template #default="{ row }">
              <span class="font-medium">{{ row.Impressions_Total_Count ? row.Impressions_Total_Count : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Clicks_Total_Count" label="点击次数" align="center" min-width="200" sortable>
            <template #default="{ row }">
              <span class="font-medium">{{ row.Clicks_Total_Count ? row.Clicks_Total_Count : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Cart_Adds_Total_Count" label="加购次数" align="center" min-width="200" sortable>
            <template #default="{ row }">
              <span class="font-medium">{{ row.Cart_Adds_Total_Count ? row.Cart_Adds_Total_Count : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Purchases_Total_Count" label="购买次数" align="center" min-width="200" sortable>
            <template #default="{ row }">
              <span class="font-medium">{{ row.Purchases_Total_Count ? row.Purchases_Total_Count : '--' }}</span>
            </template>
          </el-table-column>
        </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="total, sizes, prev, pager, next"
            :total="total"
            @change="handlePageChange" />
      </div>
    </el-card>
  </el-card>

</template>

<style scoped></style>
