<script lang="ts" setup>
/**
 * @Name: index.vue
 * @Description: Targeting-SearchTerm 跳转页面
 * @Author: Cheney
 */

import { useRoute } from 'vue-router';
import { searchTermColumns, targetingColumns } from './useColumns';
import { onBeforeMount, reactive, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { usePublicData } from '/@/stores/publicData';
import * as api from './api';
import { debounce } from 'lodash';


const publicData = usePublicData();
const { dateRange } = storeToRefs(publicData);
const route = useRoute();
const { searchRoot } = route.query;
const date = ref([ dateRange.value[0], dateRange.value[1] ]);
const searchType = ref('BROAD');
const targetingSearchRoot = ref('');
const searchTermSearchRoot = ref('');

const TargetingLoading = ref(false);
const searchTermLoading = ref(false);
const targetingOptions: any = reactive({
  height: 'auto',
  border: false,
  round: true,
  columnConfig: {
    resizable: true
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: 'toolbar_buttons'
    }
  },
  columns: targetingColumns,
  data: []
});
const targetingPage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 15
});

const searchTermOptions: any = reactive({
  height: 'auto',
  border: false,
  round: true,
  columnConfig: {
    resizable: true
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: 'toolbar_buttons'
    }
  },
  columns: searchTermColumns,
  data: []
});
const searchTermPage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 15
});

onBeforeMount(() => {
  fetchTableData();
});

function targetingPageChange({ currentPage, pageSize }) {
  targetingPage.currentPage = currentPage;
  targetingPage.pageSize = pageSize;
  fetchTargetingData();
}

function searchTermPageChange({ currentPage, pageSize }) {
  searchTermPage.currentPage = currentPage;
  searchTermPage.pageSize = pageSize;
  fetchSearchTermData();
}

const fetchTableData = debounce(
    () => {
      targetingPage.currentPage = 1;
      targetingPage.pageSize = 15;
      searchTermPage.currentPage = 1;
      searchTermPage.pageSize = 15;
      fetchTargetingData();
      fetchSearchTermData();
    },
    500,
    { leading: true, trailing: false }  // 首次调用立即执行，500毫秒内的后续调用不生效
);

async function fetchTargetingData() {
  TargetingLoading.value = true;

  const query = {
    date_start: date.value[0],
    date_end: date.value[1],
    page: targetingPage.currentPage,
    limit: targetingPage.pageSize,
    search_root: targetingSearchRoot.value ? targetingSearchRoot.value : searchRoot,
    search_type: searchType.value, // BROAD, PHRASE, EXACT, AUTO
    term_type: 'TARGETING' // TARGETING, SEARCHTERM
  };
  try {
    const response = await api.getTargetingData(query);
    targetingOptions.data = response.data;
    targetingPage.total = response.total;
  } catch (error) {
    console.log('error=>', error);
  } finally {
    TargetingLoading.value = false;
  }
}

async function fetchSearchTermData() {
  searchTermLoading.value = true;

  const query = {
    date_start: date.value[0],
    date_end: date.value[1],
    page: targetingPage.currentPage,
    limit: targetingPage.pageSize,
    search_root: searchTermSearchRoot.value ? searchTermSearchRoot.value : searchRoot,
    search_type: searchType.value,
    term_type: 'SEARCHTERM'
  };
  try {
    const response = await api.getTargetingData(query);
    searchTermOptions.data = response.data;
    searchTermPage.total = response.total;
  } catch (error) {
    console.log('error=>', error);
  } finally {
    searchTermLoading.value = false;
  }
}
</script>

<template>
  <div class="mx-3">
    <el-divider>
      <div class="font-bold text-xl">
        <!--<el-icon style="top: 3px">-->
        <!--  <DataAnalysis />-->
        <!--</el-icon>-->
        {{ searchRoot }}
      </div>
    </el-divider>
  </div>
  <div class="py-2 px-2.5">
    <el-card body-class="flex justify-between" shadow="hover" style="border: none">
      <div class="flex flex-wrap gap-7">
        <div>
          <span class="font-medium mr-0.5">搜索词类型 </span>
          <el-select v-model="searchType" placeholder="请选择" style="width: 130px">
            <el-option label="自动匹配" value="AUTO"></el-option>
            <el-option label="宽泛匹配" value="BROAD"></el-option>
            <el-option label="短语匹配" value="PHRASE"></el-option>
            <el-option label="精准匹配" value="EXACT"></el-option>
          </el-select>
        </div>
        <div>
          <span class="font-medium mr-0.5">日期 </span>
          <el-date-picker
              v-model="date"
              :clearable="false"
              :disabled-date="(time: Date) => time > new Date()"
              :popper-options="{ placement: 'bottom-end' }"
              range-separator="To"
              type="daterange"
              value-format="YYYY-MM-DD"/>
        </div>
      </div>
      <el-button icon="search" plain type="primary" @click="fetchTableData">查 询</el-button>
    </el-card>
    <el-card body-style="padding-top: 10px" class="mt-3" shadow="hover" style="border: none">
      <div v-loading="TargetingLoading" class="w-full overflow-hidden" style="height: 950px">
        <vxe-grid v-bind="targetingOptions">
          <template #toolbar_buttons>
            <span class="font-medium text-xl" style="color: #000000"> Targeting-关联关键词 </span>
            <el-input v-model="targetingSearchRoot" class="ml-5" placeholder="请输入关键词回车搜索" style="width: 200px;"
                      @change="fetchTargetingData"></el-input>
          </template>
          <template v-for="col in targetingColumns" #[`${col.field}_default`]="{ row }">
            <div v-if="col.field === 'targeting'">
              <el-tooltip :content="row.targeting" :show-after="300" effect="dark" placement="top">
                <div class="font-medium overflow-hidden whitespace-nowrap text-ellipsis">
                  {{ row.targeting }}
                </div>
              </el-tooltip>
            </div>
            <div v-else-if="col.field === 'ctr_1d'">
              <span class="font-medium"> {{ row.ctr_1d }}% </span>
            </div>
            <div v-else-if="col.field === 'cr_1d'">
              <span class="font-medium"> {{ row.cr_1d }}% </span>
            </div>
            <div v-else class="font-medium">
              {{ row[col.field] ? row[col.field] : '--' }}
            </div>
          </template>
          <template #pager>
            <vxe-pager
                v-model:current-page="targetingPage.currentPage"
                v-model:page-size="targetingPage.pageSize"
                :total="targetingPage.total"
                @page-change="targetingPageChange">
            </vxe-pager>
          </template>
        </vxe-grid>
      </div>
    </el-card>
    <el-card body-style="padding-top: 10px" class="mt-3" shadow="hover" style="border: none">
      <div v-loading="searchTermLoading" class="w-full overflow-hidden" style="height: 950px">
        <vxe-grid v-bind="searchTermOptions">
          <template #toolbar_buttons>
            <span class="font-medium text-xl" style="color: #000000"> SearchTerm-相关搜索结果 </span>
            <el-input v-model="searchTermSearchRoot" class="ml-5" placeholder="请输入搜索词回车搜索" style="width: 200px;"
                      @change="fetchTargetingData"></el-input>
          </template>
          <template v-for="col in searchTermColumns" #[`${col.field}_default`]="{ row }">
            <div v-if="col.field === 'searchTerm'">
              <el-tooltip :content="row.searchTerm" :show-after="300" effect="dark" placement="top">
                <div class="font-medium overflow-hidden whitespace-nowrap text-ellipsis">
                  {{ row.searchTerm }}
                </div>
              </el-tooltip>
            </div>
            <div v-else-if="col.field === 'ctr_1d'">
              <span class="font-medium"> {{ row.ctr_1d }}% </span>
            </div>
            <div v-else-if="col.field === 'cr_1d'">
              <span class="font-medium"> {{ row.cr_1d }}% </span>
            </div>
            <div v-else class="font-medium">
              {{ row[col.field] ? row[col.field] : '--' }}
            </div>
          </template>
          <template #pager>
            <vxe-pager
                v-model:current-page="searchTermPage.currentPage"
                v-model:page-size="searchTermPage.pageSize"
                :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
                :total="searchTermPage.total"
                @page-change="searchTermPageChange">
            </vxe-pager>
          </template>
        </vxe-grid>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
/* 修改 el-divider 的背景颜色 */
:deep(.el-divider__text.is-center.el-divider__text) {
  background-color: #f8f8f8;
}
</style>
