<template>
  <div class="wrap container" id="pdf-content">
    <!-- 页头 -->
    <div class="top row">
      <p id="companyName">{{ customerName }} - SEO月度报告</p>
      <p class="time" style="color: #fff!important;">日期：<span id="startTime"
                                                                style="color: #fff!important;">{{ dayjs(monthStr).startOf("month").format("YYYY-MM-DD")
        }}</span>-<span id="endTime" style="color: #fff!important;">{{ dayjs(monthStr).endOf("month").format("YYYY-MM-DD") }}</span></p>
    </div>
    <!-- 数据模块 -->
    <section style="padding: 0 30px">
      <section class="row top-info">
        <p class="mb-5">尊敬的【{{ customerName }}】：</p>
        <p>我非常高兴向您呈上{{ monthStr }}
          的SEO月报，为您提供网站在SEO中的详尽数据和分析。作为您的SEO团队，我们一直努力追求卓越的结果，以确保您的在线业务能够获得更大的曝光度和持续增长。</p>
        <p>
          在过去的一个月里，我们积极地致力于提升您的网站的可见性和排名，并进行了一系列优化策略的实施。具体细节请参考以下报告细节。</p>
      </section>

      <!-- 当月优化总结 -->
      <section class="row title-row">
        <img class="left-bg" src="@/assets/pdfExport/img/title-left-bg.png" />
        <p class="title"><img src="@/assets/pdfExport/img/title-dot.png" />当月优化总结</p>
        <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
      </section>
      <section class="row r6">
        <div class="tip">
          在过去的1个月里，我们致力于为您的网站进行全面的SEO优化工作。通过对关键词排名、网站结构、内容优化以及用户体验等方面的深入分析和优化，以下是我们的SEO优化总结：
        </div>
        <div class="content" id="dangyue">
          <div>{{ detailInfo.thisMonth }}</div>
        </div>
      </section>

      <!-- 下月优化计划 -->
      <section class="row title-row">
        <img class="left-bg" src="@/assets/pdfExport/img/title-left-bg.png" />
        <p class="title"><img src="@/assets/pdfExport/img/title-dot.png" />下月优化计划</p>
        <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
      </section>
      <section class="row r6">
        <div class="tip">
          感谢您对我们的SEO优化工作的信任。在下个月，我们计划继续改进和优化您的网站，以进一步提升其在搜索引擎中的表现。以下是我们的下月优化计划：
        </div>
        <div class="content" id="xiayue">
          <div>{{ detailInfo.nextMonth }}</div>
        </div>
        <div class="tip" style="margin-top: 10px;">
          我们将按照以上优化计划，不断努力提升您的网站在搜索引擎中的表现。如果您有任何疑问或需要进一步讨论，请随时与我们联系。感谢您的合作，我们期待着实现更大的SEO成功！
        </div>
      </section>

      <!-- 网站流量 -->
      <section class="row title-row">
        <img class="left-bg" src="@/assets/pdfExport/img/title-left-bg.png" />
        <p class="title"><img src="@/assets/pdfExport/img/title-dot.png" />网站流量</p>
        <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
      </section>
      <section class="row chart-wrap-row">
        <div class="chart-wrap">
          <p class="tip">
            在本月的SEO月报中，我们会向您展示关于网站流量数据及其他相关的数据，如页面浏览量、跳出率、平均访问时长等，以帮助您更全面地了解网站流量情况和用户行为。这些数据将以图表、表格或其他可视化方式呈现，以便您更直观地理解和分析。
          </p>
          <p class="tip">
            以下是一些关键的流量指标和相应的数据展示：
          </p>
          <a-row class="r5-1">
              <a-col :span="24">
                <area-chart v-if="coreDataChart.x.length > 0"
                            :dataSource="coreDataChart"></area-chart>
                <a-empty v-else style="float: right;width: 100%;margin-top: 110px;"></a-empty>
              </a-col>
            </a-row>
        </div>
      </section>
      <section class="row r2">
        <div class="item impressionsNum" style="border-color: #E3EDFE">
          <img src="@/assets/pdfExport/img/uvicon.png"/>
          <div>
            <p class="date"><span class="fb theme-color font-size-24"
                                  style="color: #4385F4!important;">{{ statistics.uv }}</span></p>
            <p class="title"> 访客数(UV)</p>
          </div>
        </div>
        <div class="item" style="border-color: #C6DAFB">
          <img src="@/assets/pdfExport/img/pvicon.png"/>
          <div>
            <p class="date"><span class="fb theme-color font-size-24"
                                  style="color: #4385F4!important;">{{ statistics.pv }}</span></p>
            <p class="title"> 浏览量(PV)</p>
          </div>
        </div>
        <div class="item" style="border-color: #AAC8FA">
          <img src="@/assets/pdfExport/img/unReadEnquiryNum.png"/>
          <div>
            <p class="date"><span class="fb theme-color font-size-24"
                                  style="color: #4385F4!important;">{{ statistics.averageVisit }}</span></p>
            <p class="title"> 日均访问量</p>
          </div>
        </div>
        <div class="item" style="border-color: #98BCF9">
          <img src="@/assets/pdfExport/img/pingjun.png"/>
          <div>
            <p class="date"><span class="fb theme-color font-size-24"
                                  style="color: #4385F4!important;">{{ statistics.averageVisitDuration }}</span>
            </p>
            <p class="title"> 平均访问时长</p>
          </div>
        </div>
        <div class="item" style="border: none">
          <img src="@/assets/pdfExport/img/conversionRate.png"/>
          <div>
            <p class="date"><span class="fb theme-color font-size-24"
                                  style="color: #4385F4!important;">{{ statistics.averageVisitPage }}</span>
            </p>
            <p class="title"> 平均访问页面数</p>
          </div>
        </div>
        <img class="right_bg_img" src="@/assets/pdfExport/img/shang.png" />
      </section>
      <!--最多访问-->
      <section class="row title-row">
        <img class="left-bg" src="@/assets/pdfExport/img/title-left-bg.png" />
        <p class="title"><img src="@/assets/pdfExport/img/title-dot.png" />最多访问TOP10</p>
        <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
      </section>
      <section class="row table-row">
        <a-row>
              <a-col :span="24">
                <a-table
                  :columns="mostAccessColumns"
                  :data-source="mostAccessDatasource"
                  size="middle"
                  :pagination="false">
                  <template #bodyCell="{ column, text }">
                    <template v-if="column.key ==='pagePathSlot' ">
                      <a-popover>
                        <template slot="content">
                          {{ text }}
                        </template>
                        <a :href="text" target="_blank">
                          <div
                            style="width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                            {{ text }}
                          </div>
                        </a>
                      </a-popover>
                    </template>
                    <template v-if="column.key ==='centerSlot' ">
                      <span style="margin-left: 20px;">{{ text }}</span>
                    </template>
                    <template v-if="column.key ==='avgTimeOnPageSlot' ">
                      <span style="margin-left: 30px;">{{ text }} s</span>
                    </template>
                  </template>
                </a-table>
              </a-col>
            </a-row>
      </section>
      <!--网站排名-->
      <div class="bg-advich">
        <section class="row title-row">
          <img class="left-bg" src="@/assets/pdfExport/img/title-left-bg.png" />
          <p class="title"><img src="@/assets/pdfExport/img/title-dot.png" />网站排名</p>
          <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
        </section>
        <section class="row s3">
          <div class="col-sm-12">
            <p class="tip">
              在本月的SEO月报中，我们向您展示关于您网站排名的部分数据。因关键词排名数据量较大且实时变化，这边仅展示前50个关键词排名细节，您可登录后台查看全部数据。以下是一些的排名指标和相应的数据展示：</p>
              <a-row
              v-if="appointKeywordNum == null && longTailKeywordNum == null">
              <a-col>
                <a-empty style="padding-top: 50px" />
              </a-col>
            </a-row>
            <a-row type="flex">
              <a-col :span="3" v-if="appointKeywordNum">
                <div class="item">
                  <img src="@/assets/pdfExport/img/zhidingci.png" />
                  <p>指定词</p>
                  <p>{{ appointKeywordNum }}</p>
                </div>
              </a-col>
              <a-col :span="longTailKeywordNum ? 9 : 21"
                     v-if="appointKeywordNum">
                <div class="wrap">
                  <p class="t1">指定词排名</p>
                  <div class="content">
                    <div class="d1"><img src="@/assets/pdfExport/img/NO1.png" />1-10位</div>
                    <div class="d2">{{ rankInfo.appointKeyword.firstNum }}个
                    </div>
                  </div>
                  <div class="content">
                    <div class="d1"><img src="@/assets/pdfExport/img/NO2.png" />11-30位</div>
                    <div class="d2">{{ rankInfo.appointKeyword.secondNum }}个
                    </div>
                  </div>
                  <div class="content">
                    <div class="d1"><img src="@/assets/pdfExport/img/NO3.png" />31-100位</div>
                    <div class="d2">{{ rankInfo.appointKeyword.thirdType }}个
                    </div>
                  </div>
                </div>
              </a-col>
              <a-col :span="3" v-if="longTailKeywordNum">
                <div class="item">
                  <img src="@/assets/pdfExport/img/changweici.png" />
                  <p>关键词</p>
                  <p>{{ longTailKeywordNum }}</p>
                </div>
              </a-col>
              <a-col :span="appointKeywordNum ? 9 : 21" v-if="longTailKeywordNum">
                <div class="wrap">
                  <p class="t1">关键词排名</p>
                  <div class="content">
                    <div class="d1"><img src="@/assets/pdfExport/img/NO1.png" />1-10位</div>
                    <div class="d2">{{ rankInfo.longTailKeyword.firstNum }}个
                    </div>
                  </div>
                  <div class="content">
                    <div class="d1"><img src="@/assets/pdfExport/img/NO2.png" />11-30位</div>
                    <div class="d2">{{ rankInfo.longTailKeyword.secondNum }}个
                    </div>
                  </div>
                  <div class="content">
                    <div class="d1"><img src="@/assets/pdfExport/img/NO3.png" />31-100位</div>
                    <div class="d2">{{ rankInfo.longTailKeyword.thirdType }}个
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
            </div>
        </section>
        <section class="row title-row">
      <img class="left-bg" src="@/assets/pdfExport/img/title-left-bg.png" />
      <p class="title"><img src="@/assets/pdfExport/img/title-dot.png" />指定词排名列表</p>
      <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
    </section>
    <section class="row table-row">
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        :columns="appointKeywordPageListColumns"
        :pagination="ipagination"
        :dataSource="appointKeywordsList"
      >
        <template #bodyCell="{ column, record, index, text }">
          <template v-if="column.key === 'rowIndex'">
            {{ index + 1 }}
          </template>

          <template class="tag" v-if="column.key === 'lastRank'">
            {{ record.lastRank }}
          </template>

          <template v-if="column.key === 'positionUrl'">
            <a :href="text" target="_blank">{{ text }}</a>
          </template>
        </template>
      </a-table>
    </section>

    <section class="row title-row">
      <img class="left-bg" src="@/assets/pdfExport/img/title-left-bg.png" />
      <p class="title"><img src="@/assets/pdfExport/img/title-dot.png" />关键词排名列表</p>
      <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
    </section>
    <section class="row table-row">
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        :columns="longTailPageListColumns"
        :pagination="ipagination"
        :dataSource="longTailKeywordsList"
      >
        <template #bodyCell="{ column, record, index, text }">
          <template v-if="column.key ==='rowIndex'">
            {{ index + 1 }}
          </template>
          <template class="tag" v-if="column.key ==='lastRank'">
            {{ record.lastRank }}
          </template>
          <template v-if="column.key ==='positionUrl'">
            <a :href="text" target="_blank">{{ text }}</a>
          </template>
        </template>
      </a-table>
    </section>
      </div>
      <!--网站外链-->
    <div class="bg-advich">
      <section class="row title-row">
        <img class="left-bg" src="@/assets/pdfExport/img/title-left-bg.png" />
        <p class="title"><img src="@/assets/pdfExport/img/title-dot.png" />网站外链</p>
        <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
      </section>
      <section class="row table-row">
        <p>
          在本月的SEO月报中，我们向您展示关于您网站外链的数据。这有助于您直观地了解外链的增长和变化情况，并评估外链优化策略的效果。以下是一些关键的外链指标和相应的数据展示：</p>
      </section>
      <section class="row r2">
        <div class="item" style="border-color: #e3edfe">
          <img src="@/assets/pdfExport/img/outlink1.png" />
          <div>
            <p class="date"><span class="fb theme-color font-size-24"
                                  style="color: #4385F4!important;">{{ detailInfo.outlink1 ? detailInfo.outlink1 : '-' }}</span>
            </p>
            <p class="title">外链总数</p>
          </div>
        </div>
        <div class="item" style="border-color: #C6DAFB">
          <img src="@/assets/pdfExport/img/outlink2.png" />
          <div>
            <p class="date"><span class="fb theme-color font-size-24"
                                  style="color: #4385F4!important;">{{ detailInfo.outlink2 ? detailInfo.outlink2 : '-' }}</span>
            </p>
            <p class="title">外链域</p>
          </div>
        </div>
        <div class="item" style="border:none">
          <img src="@/assets/pdfExport/img/outlink3.png" />
          <div>
            <p class="date"><span class="fb theme-color font-size-24"
                                  style="color: #4385F4!important;">{{ detailInfo.outlink3 ? detailInfo.outlink3 : '-' }}</span>
            </p>
            <p class="title">外链发布数</p>
          </div>
        </div>

      </section>
      <section class="row outlink-row">
        <div class="col-sm-6" v-if="detailInfo?.outLinkImg?.length > 0">
          <p class="img-title">外链总数趋势</p>
          <div class="img-wrap-outlink">
            <img :src="detailInfo.outLinkImg[0].url" />
          </div>

          <div class="content" id="miaoshu1">
            <p>
              {{ detailInfo.outLinkImgDetail1 }}
            </p>
          </div>
        </div>
        <div class="col-sm-6" v-if="detailInfo?.outLinkImg2?.length > 0">
          <p class="img-title">外链变化趋势</p>
          <div class="img-wrap-outlink">
            <img :src="detailInfo.outLinkImg2[0].url" />
          </div>
          <div class="content" id="miaoshu2">
            <p>
              {{ detailInfo.outLinkImgDetail2 }}
            </p>
          </div>
        </div>
      </section>
    </div>
    <div class="bg-advich">
      <section class="row title-row">
        <img class="left-bg" src="@/assets/pdfExport/img/title-left-bg.png" />
        <p class="title"><img src="@/assets/pdfExport/img/title-dot.png" />网站外链</p>
        <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
      </section>
      <section class="row table-row">
        <p>
          目前，我们还未开始进行外链优化，通常情况下，外链优化的最佳时间是在关键词优化后的4-6个月。这段时间内，我们专注于确保网站在关键词排名方面取得显著的进展。</p>
        <p>
          在外链优化开始后，我们将在未来的报告中提供更多关于外链优化工作的详细信息和结果。我们期待着与您共同努力，以实现网站在搜索引擎中的最佳表现。如有任何疑问或需要进一步的解释，请随时向我们提问。</p>
      </section>
    </div>
    <!--结语-->
    <div class="bg-advich">
      <section class="row title-row">
        <img class="left-bg" src="@/assets/pdfExport/img/title-left-bg.png"/>
        <p class="title"><img src="@/assets/pdfExport/img/title-dot.png"/>结语</p>
        <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png"/>
      </section>
      <section class="row table-row">
        <p>我们深知SEO是一个持续的过程，需要不断地监测、调整和改进。通过本月报告，我们与您分享我们的工作成果，并提供专业的建议和策略，以进一步提升您的网站在搜索引擎中的表现。</p>
        <p>我们期待帮助您更好地理解和利用SEO对您的业务带来的巨大潜力。如果您对报告中的任何内容有疑问或需要进一步的解释，我们将随时为您提供支持和指导。</p>
        <p>感谢您对我们的信任和合作。我们将继续竭尽全力，为您的网站取得更大的成功。</p>
        <p>祝您生意兴隆！</p>
        <p style="text-align: right;">诚挚的问候</p>
        <p style="text-align: right">SEO团队</p>
      </section>
      <section class="row remark">
        <p><span style="font-weight:bold">注：</span>本次报告的SEO数据仅反映一段时间内的网站表现，但要注意数据的可变性和动态性，建议结合长期趋势和综合指标来评估网站SEO的整体表现。
        </p>
      </section>
    </div>
    </section>

   
    
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import "@/assets/pdfExport/style/index.less";
import "@/assets/pdfExport/style/reset.less";
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
import dayjs from 'dayjs';
import AreaChart from "@/views/adweb/data/chart/areaChart.vue";

// 最多访问TOP10列表
const mostAccessColumns = ref([
  {
    title: "来源",
    dataIndex: "pagePath",
    scopedSlots: {
      customRender: "pagePathSlot"
    }
  },
  {
    title: "浏览量（PV）",
    dataIndex: "pageViews",
    defaultSortOrder: "descend",
    sorter: (a, b) => a.pageViews - b.pageViews,
    width: 160,
    scopedSlots: {
      customRender: "centerSlot"
    }
  },
  {
    title: "浏览量占比",
    dataIndex: "pvProportion",
    width: 160,
    scopedSlots: {
      customRender: "centerSlot"
    }
  }
]);
// 响应式数据
const customerName = ref("");
const monthStr = ref("");
const detailInfo = ref({
  thisMonth: '',
  nextMonth: '',
  outlink1: null,
  outlink2: null,
  outlink3: null,
  outLinkImg: [],
  outLinkImg2: [],
  outLinkImgDetail1: '',
  outLinkImgDetail2: ''
});
const rankInfo = ref({});
const appointKeywordsList = ref([]);
const longTailKeywordsList = ref([]);
const appointKeywordNum = ref();
const longTailKeywordNum = ref();
const coreDataChart = ref({
  x: [],
  pv: [],
  uv: [],
  enquiry: []
});
const statistics = ref({
  uv: 0,
  pv: 0,
  averageVisit: 0,
  averageVisitDuration: 0,
  averageVisitPage: 0,
  bounceRate: "0%",
  conversionRate: "0%"
});
const mostAccessDatasource = ref([]);
const ipagination = ref({
  current: 1,
  pageSize: 50,
});
const appointKeywordPageListColumns = ref([
  {
    title: "序号",
    dataIndex: "rowIndex",
    key: "rowIndex",
    width: 100,
    align: "center",
    fixed: "left",

  },
  {
    title: "关键词",
    dataIndex: "keywords",
    key: "keywords",
    fixed: "left",
    width: 300
  },
  {
    title: "网址",
    dataIndex: "positionUrl",
    key: "positionUrl",
    fixed: "left",
    width: 600
  },
  {
    title: "排名",
    dataIndex: "lastRank",
    key: "lastRank",
    width: 100,
  }
]);
const longTailPageListColumns = ref([
  {
    title: "序号",
    dataIndex: "rowIndex",
    key: "rowIndex",
    width: 100,
    align: "center",
    fixed: "left",
  },
  {
    title: "关键词",
    dataIndex: "keywords",
    key: "keywords",
    fixed: "left",
    width: 300
  },
  {
    title: "网址",
    dataIndex: "positionUrl",
    key: "positionUrl",
    fixed: "left",
    width: 600
  },
  {
    title: "排名",
    dataIndex: "lastRank",
    key: "lastRank",
    width: 100,
  }
]);


// 处理从 SeoPdfExport 接收的数据
const handleSeoPdfExportData = (data) => {  
  customerName.value = data.customerName;
  monthStr.value = data.monthStr;
  detailInfo.value = data.detailInfo;
  rankInfo.value = data.rankInfo;
  appointKeywordsList.value = data.appointKeywordsList;
  longTailKeywordsList.value = data.longTailKeywordsList;
  appointKeywordNum.value = data.appointKeywordNum;
  longTailKeywordNum.value = data.longTailKeywordNum;
  coreDataChart.value = data.coreDataChart;
  statistics.value = data.statistics;
  mostAccessDatasource.value = data.mostAccessDatasource;
};

// 导出 PDF
const exportPdf = async () => {
  const element = document.querySelector('#pdf-content');
  const canvas = await html2Canvas(element, {
    useCORS: true,
    allowTaint: true,
    scale: 2,
    logging: false, // Disable logging
    imageTimeout: 0 // No timeout for images
  });
  
  const contentWidth = canvas.width;
  const contentHeight = canvas.height;
  
  const pageHeight = (contentWidth / 592.28) * 841.89;
  let leftHeight = contentHeight;
  let position = 0;
  const imgWidth = 592.28;
  const imgHeight = (592.28 / contentWidth) * contentHeight;

  const PDF = new JsPDF('p', 'pt', 'a4');
  
  if (leftHeight < pageHeight) {
    PDF.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, imgWidth, imgHeight);
  } else {
    while (leftHeight > 0) {
      PDF.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 0, position, imgWidth, imgHeight);
      leftHeight -= pageHeight;
      position -= 841.89;
      if (leftHeight > 0) {
        PDF.addPage();
      }
    }
  }

  PDF.save(`${customerName.value}-${monthStr.value}-SEO月度报告.pdf`);
};

// 生命周期钩子
onMounted(async () => {
  const pdfData = JSON.parse(localStorage.getItem('pdfExportData'));
  if (pdfData) {
    handleSeoPdfExportData(pdfData);
    // Wait for the next tick to ensure all data is rendered
    await nextTick();
    // Add a small delay to ensure images are loaded
    setTimeout(() => {
      exportPdf();
    }, 1000);
  }
});

</script>

<style scoped lang="less">

</style>
