<template>
  <div class="competitor-item">
    <div class="competitor-item-head">
      <span class="competitor-item-head__label">竞品网站：</span>
      <span class="competitor-item-head__value">{{ siteName }}</span>
    </div>
    <div class="empty-wrap" v-if="loading">
      <Empty :autoFinish="autoFinish" :fail="fail"></Empty>
    </div>
    <div class="competitor-item-show" v-else>
      <div class="competitor-item-show__chart">
        <TrafficChart
          :dates="trafficBOData.x_axis"
          :natural="trafficBOData.organic"
          :paid="trafficBOData.paids"
          centerText="自然流量"
        />
      </div>
      <div class="competitor-item-show__line"></div>
      <div class="competitor-item-show__sort">
        <RankTable :tableData="rankBOList"></RankTable>
      </div>
      <div class="competitor-item-show__suggestion">
        <RecommendTable :tableData="recommendationBOList"></RecommendTable>
      </div>
      <div class="competitor-item-show__bottom" v-show="!expanded" @click="download">立即下载报告，查看更多</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useMainStore } from '@/store';
import { computed, reactive, ref } from 'vue';
import TrafficChart from './TrafficChart.vue';
import Empty from '@/components/CommonEmpty.vue';
import RankTable from '@/components/competitor/RankTable.vue';
import RecommendTable from '@/components/competitor/RecommendTable.vue';
import { handlePDF } from '@/utils/pdf';


import type { TrafficBO, TrafficBOItem } from '@/types';

const props = defineProps<{
  siteName: string;
}>();

const trafficBOData = reactive<TrafficBO>({
  x_axis: [],
  organic: [],
  paids: []
} as TrafficBO);
const rankBOList = ref<any[]>([]);
const recommendationBOList = ref<any[]>([]);
const loading = ref<boolean>(false);
const autoFinish = ref<boolean>(false);
const fail = ref<boolean>(false);

const mainStore = useMainStore();
const download = () => {
  handlePDF(undefined, 'manual');
};

const expanded = computed(() => mainStore.getExpanded);
const getRivalData = () => {
  loading.value = true;
  return mainStore
    .getRival(props.siteName)
    .then((result) => {
      const res = result.data;
      const trafficBOList: TrafficBOItem[] = res.competitorBOS[0]?.trafficBOList ?? [];
      trafficBOList.forEach((item) => {
        trafficBOData.x_axis.push(item.x_axis);
        trafficBOData.organic.push(item.organic);
        trafficBOData.paids.push(item.paid);
      });
      rankBOList.value = res.competitorBOS[0]?.rankBOList ?? [];
      recommendationBOList.value = res.competitorBOS[0]?.recommendationBOList ?? [];
      autoFinish.value = true;
      setTimeout(() => {
        loading.value = false;
      }, 300);
    })
    .catch((err) => {
      fail.value = true;
    });
};

getRivalData();
</script>

<style lang="scss" scoped>
.competitor-item {
  margin-bottom: 40px;
  &-head {
    display: flex;
    align-items: center;
    width: 100%;
    height: 110px;
    font-weight: 400;
    font-size: 24px;
    font-weight: bold;
    color: var(--promotion--color-primary);
    padding-left: 80px;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(3, 110, 184, 0.1) 0%, rgba(126, 206, 244, 0.1) 100%);
  }

  &-show {
    width: 100%;
    background-color: #fff;
    padding: 40px;
    box-sizing: border-box;

    &__chart {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1256px;
      height: 548px;
      background-color: #fff;
    }

    &__line {
      width: 100%;
      height: 1px;
      background: #dde1e6;
      margin: 20px 0;
    }

    &__sort {
      width: 100%;
      min-height: 376px;
      margin-top: 20px;
      background-color: #fff;
    }

    &__suggestion {
      width: 100%;
      min-height: 376px;
      margin-top: 20px;
      background-color: #fff;
    }

    &__bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 66px;
      margin-top: 20px;
      font-weight: bold;
      font-size: 20px;
      color: var(--promotion--color-primary);
      cursor: pointer;
    }
  }

  .empty-wrap {
    width: 100%;
    height: 376px;
  }
}
</style>
