<template>
  <div class="home">
    <!--网站概况-->
    <a-row class="top-title">
      <a-col :span="24">
        <div style="display: flex; margin-top: 20px">
          <span class="t1"> 站点： </span>
          <select-site @set-site-info="changeUser" selectWidth="300px" />
        </div>
      </a-col>
    </a-row>

    <!--基础信息-->
    <a-card title="网站概况">
      <a-row :gutter="[16, 16]" class="r2">
        <a-col :span="6" class="c1">
          <a-spin :spinning="baseInfoLoading">
            <div class="wrap">
              <p class="mb"
              >交付状态：<span class="big">{{ filter_Null_format(baseInfo.deliveryProgress) }}</span>
              </p>
              <p
              >运行状态：<span v-if="baseInfo.runStatus == 0">创建失败</span><span
                v-if="baseInfo.runStatus == 1">正常运行</span
              ><span v-if="baseInfo.runStatus == 2">运行异常</span>
                <span v-if="baseInfo.runStatus == 3">站点停止</span>
              </p>
              <p>网站运行：{{ filter_Null_format(baseInfo.runDays) }}天</p>
            </div>
          </a-spin>
        </a-col>
        <a-col :span="6" class="c2">
          <a-spin :spinning="baseInfoLoading">
            <div class="wrap">
              <p class="big mb">{{ filter_Null_format(baseInfo.planName) }}</p>
              <p>提单时间：{{ filter_Null_format(baseInfo.createTime) }}</p>
              <p>预计服务到期时间：{{ filter_Null_format(baseInfo.endTime) }}</p>
            </div>
          </a-spin>
        </a-col>
      </a-row>
    </a-card>

    <a-row class="r3" v-if="siteStatus == 1">
      <a-col :span="24">
        <a-card title="核心数据">
          <a-row class="r5" :gutter="[20, 20]">
            <a-col :span="4">
              <div class="wrap effect">
                <a-spin :spinning="coreInfoLoading">
                  <router-link :to="{ path: '/inquiry/list', query: { timeType: 'thisWeek' } }">
                    <img src="../../../../assets/home/weekEnquiry.svg" />
                    <div class="fr">
                      <p>本周询盘数</p>
                      <p class="theme-color">{{ filter_Null_format(currentWeekEnquiryCount) }}</p>
                    </div>
                  </router-link>
                </a-spin>
              </div>
            </a-col>
            <a-col :span="4">
              <div class="wrap effect">
                <a-spin :spinning="coreInfoLoading">
                  <router-link :to="{ path: '/inquiry/list', query: { timeType: 'thisMonth' } }">
                    <img src="../../../../assets/home/monthEnquiry.svg" />
                    <div class="fr">
                      <p>本月询盘数</p>
                      <p class="theme-color">{{ filter_Null_format(currentMonthEnquiryCount) }}</p>
                    </div>
                  </router-link>
                </a-spin>
              </div>
            </a-col>
            <a-col :span="4">
              <router-link :to="{ path: '/inquiry/list' }">
                <div class="wrap effect">
                  <a-spin :spinning="coreInfoLoading">
                    <img src="../../../../assets/home/totalEnquiry.svg" />
                    <div class="fr">
                      <p>累计询盘数</p>
                      <p class="theme-color">{{ filter_Null_format(totalEnquiryCount) }}</p>
                    </div>
                  </a-spin>
                </div>
              </router-link>
            </a-col>
            <a-col :span="4">
              <div class="wrap blue">
                <a-spin :spinning="coreInfoLoading">
                  <img src="../../../../assets/home/seoReach.svg" />
                  <div class="fr">
                    <p>本周流量</p>
                    <p>{{ filter_Null_format(thisWeekData.totalUsers) }}</p>
                  </div>
                </a-spin>
              </div>
            </a-col>
            <a-col :span="4">
              <div class="wrap blue">
                <a-spin :spinning="coreInfoLoading">
                  <img src="../../../../assets/home/nowReach.svg" />
                  <div class="fr">
                    <p>本月流量</p>
                    <p>{{ filter_Null_format(thisMonthData.totalUsers) }}</p>
                  </div>
                </a-spin>
              </div>
            </a-col>
            <a-col :span="4">
              <div class="wrap blue">
                <a-spin :spinning="coreInfoLoading">
                  <img src="../../../../assets/home/seoReachRate.svg" />
                  <div class="fr">
                    <p>累计流量</p>
                    <p>{{ filter_Null_format(allTimeData.totalUsers) }}</p>
                  </div>
                </a-spin>
              </div>
            </a-col>
            <a-col :span="24" style="margin-top: 10px">
              <a-table
                :loading="coreDetailLoading"
                :columns="columns"
                :rowKey="(record, index) => index"
                :pagination="false"
                :data-source="coreDataTable"
              >
                <!--          <template slot="b" slot-scope="text,record">-->
                <!--            {{text}}<a-icon type="arrow-up" style="color:red" />-->
                <!--          </template>-->
                <!--          <template slot="c" slot-scope="text,record">-->
                <!--            {{text}}<a-icon type="arrow-down" style="color:#58CBA8" />-->
                <!--          </template>-->
              </a-table>
              <p style="color: #999; font-size: 13px">注：今日数据每小时更新一次。</p>
            </a-col>

            <a-row class="r5-1">
              <div class="fl">
                <a-button :type="timeChooseIndex == 7 ? 'primary' : ''" @click="changeTime(7)">
                  最近7天
                </a-button>
                <a-button :type="timeChooseIndex == 30 ? 'primary' : ''" @click="changeTime(30)">
                  最近30天
                </a-button>
                <a-button :type="timeChooseIndex == 180 ? 'primary' : ''" @click="changeTime(180)">
                  最近六个月
                </a-button>
              </div>
              <a-col :span="24">
                <div class="fr" v-if="coreDataChart.x.length > 0">
                  <span><i style="background: #544beb"></i>访客数（UV）</span>
                  <span><i style="background: #f0b358"></i>浏览量（PV）</span>
                  <span><i style="background: #58cca8"></i>询盘数</span>
                </div>
                <a-spin :spinning="chartsLoading" style="float: left; width: 100%">
                  <area-chart v-if="coreDataChart.x.length > 0" :dataSource="coreDataChart" />
                  <a-empty v-else style="float: right; width: 100%; margin-top: 110px" />
                </a-spin>
              </a-col>
            </a-row>
            <a-row class="r5-1" :gutter="[20, 20]">
              <a-col style="width: 20%">
                <div class="wrap">
                  <img src="@/assets/trafficAnalysis/dailyVisitCount.svg" />
                  <div class="fr">
                    <p>日均访问量</p>
                    <p style="font-size: 25px">{{ averageVisit }}</p>
                  </div>
                </div>
              </a-col>
              <a-col style="width: 20%">
                <div class="wrap">
                  <img src="@/assets/trafficAnalysis/avgVisitTime.svg" />
                  <div class="fr">
                    <p>平均访问时长</p>
                    <p style="font-size: 25px">{{ averageVisitDuration }}</p>
                  </div>
                </div>
              </a-col>
              <a-col style="width: 20%">
                <div class="wrap">
                  <img src="@/assets/trafficAnalysis/avgVisitPage.svg" />
                  <div class="fr">
                    <p>访客平均访问页面数</p>
                    <p style="font-size: 25px">{{ averageVisitPage }}</p>
                  </div>
                </div>
              </a-col>
              <a-col style="width: 20%">
                <div class="wrap">
                  <img src="@/assets/trafficAnalysis/tiaochu.svg" />
                  <div class="fr">
                    <p>跳出率</p>
                    <p style="font-size: 25px">{{ bounceRate }}</p>
                  </div>
                </div>
              </a-col>
              <a-col style="width: 20%">
                <div class="wrap">
                  <img src="@/assets/trafficAnalysis/uvTransfer.svg" />
                  <div class="fr">
                    <p>UV到询盘转化率</p>
                    <p style="font-size: 25px">{{ conversionRate }}</p>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup name="Adweb3Home">
import areaChart from "/@/views/adweb/data/chart/areaChart.vue";
import { getAction } from "/@/api/manage/manage";
import { useUserStore } from "/@/store/modules/user";
import selectSite from "/@/components/Adweb/selectSite.vue";
import "/@/assets/less/home.less";
import { useMessage } from "/@/hooks/web/useMessage";
import { onMounted, reactive, ref } from "vue";

const { createMessage } = useMessage();

const columns = [
  {
    title: "指标",
    dataIndex: "targetName"
  },
  {
    title: "今日",
    dataIndex: "todayCount"
  },
  {
    title: "昨日",
    dataIndex: "yesterdayCount",
    scopedSlots: { customRender: "yesterdayCount" }
  },
  {
    title: "本周",
    dataIndex: "currentWeekCount",
    scopedSlots: { customRender: "currentWeekCount" }
  },
  {
    title: "上周",
    dataIndex: "lastWeekCount"
  },
  {
    title: "本月",
    dataIndex: "currentMonthCount"
  },
  {
    title: "上月",
    dataIndex: "lastMonthCount"
  },
  {
    title: "全部",
    dataIndex: "totalCount"
  }
];

const userRole = ref("");
const timeChooseIndex = ref(7);
//网站概况

let selectSiteInfo = reactive<any>({});
const siteCode = ref("");
const siteStatus = ref(0);
let baseInfo = reactive<any>({});
const baseInfoLoading = ref(false);

//物料完成情况
// TODO

//核心数据
const coreInfoLoading = ref(false);
const coreDetailLoading = ref(false);
const chartsLoading = ref(false);
const achievePercent = ref(0);
const appointWordCount = ref(0);
const currentAchieveCount = ref(0);
const currentMonthEnquiryCount = ref(0);
const currentWeekEnquiryCount = ref(0);
const totalEnquiryCount = ref(0);
let flowIndicator = ref({});
let coreDataTable = ref([]);
const coreDataChart = ref({
  x: [],
  uv: [],
  pv: [],
  enquiry: []
});
const averageVisit = ref(0);
const averageVisitDuration = ref(0);
const averageVisitPage = ref(0);
const bounceRate = ref(0);
const conversionRate = ref(0);

const isShow = ref(false);

onMounted(() => {
  userRole.value = useUserStore().roleList;
});

//改变站点
function changeUser(selectedParamSiteInfo: any) {
  siteCode.value = selectedParamSiteInfo.code;

  siteStatus.value = selectedParamSiteInfo.status;

  getAllInfo();
}

function filter_Null_format(value) {
  if (value === "" || value === null || value === undefined) {
    return "--";
  } else {
    return value;
  }
}

//保证先获取到站点列表，获取到siteCode及siteId后再进行此方法
function getAllInfo() {
  getBaseInfo();
  getCoreData();
  getCoreDataChart();
}

//获取基础信息
function getBaseInfo() {
  let d = {
    siteCode: siteCode.value
  };
  baseInfoLoading.value = true;
  getAction("/adweb/adwebSiteManage/siteBasicInfo", d).then(function(res) {
    baseInfoLoading.value = false;
    if (res.code == 200) {
      baseInfo = res.result;
      isShow.value = true;
    } else {
      createMessage.error("获取站点基础信息失败，请刷新重试");
    }
  });
}

const yesterdayData = ref({});
const todayData = ref({});
const thisWeekData = ref({});
const lastWeekData = ref({});
const thisMonthData = ref({});
const lastMonthData = ref({});
const allTimeData = ref({});

//获取核心数据
function getCoreData() {
  let d = {
    siteCode: siteCode.value
  };
  coreInfoLoading.value = true;
  getAction("/dmp-data/site-periodic/stats", d).then(function(res) {
    coreInfoLoading.value = false;
    if (res.code == 200) {
      yesterdayData.value = res.result.yesterday;
      todayData.value = res.result.today;
      thisWeekData.value = res.result.thisWeek;
      lastWeekData.value = res.result.lastWeek;
      thisMonthData.value = res.result.thisMonth;
      lastMonthData.value = res.result.lastMonth;
      allTimeData.value = res.result.allTime;
      // achievePercent.value = res.data.achievePercent;
      // appointWordCount.value = res.data.appointWordCount;
      // currentAchieveCount.value = res.data.currentAchieveCount;
      // currentMonthEnquiryCount.value = res.data.currentMonthEnquiryCount;
      // currentWeekEnquiryCount.value = res.data.currentWeekEnquiryCount;
      // totalEnquiryCount.value = res.data.totalEnquiryCount;
      // flowIndicator = res.data.flowIndicator;
      currentWeekEnquiryCount.value = thisWeekData.value.enquires;
      currentMonthEnquiryCount.value = thisMonthData.value.enquires;
      totalEnquiryCount.value = allTimeData.value.enquires;
      coreDataTable.value = [];
      coreDataTable.value.push(
        {
          targetName: "访客数(UV)",
          todayCount: todayData.value.totalUsers,
          yesterdayCount: yesterdayData.value.totalUsers,
          currentWeekCount: thisWeekData.value.totalUsers,
          lastWeekCount: lastWeekData.value.totalUsers,
          currentMonthCount: thisMonthData.value.totalUsers,
          lastMonthCount: lastMonthData.value.totalUsers,
          totalCount: allTimeData.value.totalUsers
        },
        {
          targetName: "访问量(PV)",
          todayCount: todayData.value.pageViews,
          yesterdayCount: yesterdayData.value.pageViews,
          currentWeekCount: thisWeekData.value.pageViews,
          lastWeekCount: lastWeekData.value.pageViews,
          currentMonthCount: thisMonthData.value.pageViews,
          lastMonthCount: lastMonthData.value.pageViews,
          totalCount: allTimeData.value.pageViews
        },
        {
          targetName: "询盘数",
          todayCount: todayData.value.enquires,
          yesterdayCount: yesterdayData.value.enquires,
          currentWeekCount: thisWeekData.value.enquires,
          lastWeekCount: lastWeekData.value.enquires,
          currentMonthCount: thisMonthData.value.enquires,
          lastMonthCount: lastMonthData.value.enquires,
          totalCount: allTimeData.value.enquires
        },
        {
          targetName: "询盘转化率",
          todayCount: todayData.value.enquiryConversionRate,
          yesterdayCount: yesterdayData.value.enquiryConversionRate,
          currentWeekCount: thisWeekData.value.enquiryConversionRate,
          lastWeekCount: lastWeekData.value.enquiryConversionRate,
          currentMonthCount: thisMonthData.value.enquiryConversionRate,
          lastMonthCount: lastMonthData.value.enquiryConversionRate,
          totalCount: allTimeData.value.enquiryConversionRate
        }
      );
    } else {
      createMessage.error("获取核心数据信息失败，请刷新重试");
    }
  });
}

//改变图表的时间维度
function changeTime(time) {
  console.log(time);
  timeChooseIndex.value = time;
  getCoreDataChart();
}

//核心数据的面积图
const getCoreDataChart = async () => {
  let d = {
    siteCode: siteCode.value,
    dateType: timeChooseIndex.value
  };
  chartsLoading.value = true;
  const res = await getAction("/dmp-data/site-overview/stats", d);
  if (res.code == 200) {
    let r = res.result == null ? {} : res.result;
    averageVisit.value = r.dailyTotalUsers == null ? "0" : r.dailyTotalUsers;
    averageVisitDuration.value = r.avgTimeOnPage == null ? "0" : r.avgTimeOnPage;
    averageVisitPage.value = r.pageViewsPerSession == null ? "0" : r.pageViewsPerSession;
    bounceRate.value = r.bounceRate == null ? "0" : r.bounceRate;
    conversionRate.value = r.enquiryConversionRate == null ? "0" : r.enquiryConversionRate;
    let x = [],
      pv = [],
      uv = [],
      enquiry = [];
    if (r.dailyStats != null && r.dailyStats.length > 0) {
      for (let i in r.dailyStats) {
        x.push(r.dailyStats[i].date);
        pv.push(r.dailyStats[i].pageViews);
        uv.push(r.dailyStats[i].totalUsers);
        enquiry.push(r.dailyStats[i].enquires);
      }
    }
    coreDataChart.value.x = x;
    coreDataChart.value.pv = pv;
    coreDataChart.value.uv = uv;
    coreDataChart.value.enquiry = enquiry;
  } else {
    averageVisit.value = 0;
    averageVisitDuration.value = 0;
    averageVisitPage.value = 0;
    bounceRate.value = 0;
    coreDataChart.value.x = [];
    coreDataChart.value.pv = [];
    coreDataChart.value.uv = [];
    coreDataChart.value.enquiry = [];
    createMessage.error("获取核心数据图表信息失败，请刷新重试");
  }
  chartsLoading.value = false;
};
</script>

<style lang="less">
.home {
  .ant-select {
    color: #fff;

    .ant-select-selection {
      background-color: transparent;
    }

    .ant-select-arrow {
      color: #fff;
    }
  }
}
</style>

<style scoped lang="less">
p,
span {
  color: #000;
  margin: 0;
}

.theme-color {
  color: @primary-color;
}

.title {
  font-size: 18px;
  color: #000;
}
</style>

<style lang="less">
.pop-wrap {
  .ant-popover-inner-content {
    padding: 0;
  }

  .wrap {
    width: 400px;
    padding: 20px 20px;
    background: url('../../../../assets/home/pop-bg.svg') no-repeat;
    background-position: bottom right;

    p {
      line-height: 1.8;

      i {
        color: @primary-color;
        margin-right: 10px;
      }
    }

    .name {
      font-size: 18px;
      margin-bottom: 20px;
    }

    .job {
      font-size: 15px;
      color: #9f9f9f;
    }

    .ant-col-8 {
      text-align: right;
    }
  }
}

.faban {
  .ant-modal {
    .ant-modal-content {
      background-color: transparent;
      box-shadow: none;

      .ant-modal-close {
        top: 70px;
        right: -10px;

        .ant-modal-close-x {
          width: auto;
          height: auto;
        }
      }

      .self-close {
        i {
          color: #fff;
          border: 1px solid #fff;
          width: 25px;
          height: 25px;
          display: block;
          line-height: 25px;
        }
      }

      .ant-modal-body {
        .top-bg {
          background: url('../../../../assets/home/faban/topbg.png') no-repeat;
          min-height: 242px;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          font-size: 38px;
          padding-bottom: 60px;

          p {
            color: #fff;
          }
        }

        .info-wrap {
          background: #fff;
          padding: 0 40px;
          overflow: hidden;
          border-bottom-left-radius: 15px;
          border-bottom-right-radius: 15px;
          margin-top: -1px;

          p {
            position: relative;
            padding-left: 30px;
            margin-bottom: 5px;
            letter-spacing: 1px;

            &:before {
              content: '';
              position: absolute;
              left: 0;
              width: 15px;
              height: 15px;
              background: url('../../../../assets/home/faban/dot.svg');
              background-repeat: no-repeat;
              top: 3px;
            }
          }

          img {
            width: 70px;
            float: right;
            padding: 40px 0;
          }
        }
      }
    }
  }
}
</style>
