<template>
  <div class="home-box">
    <el-row :gutter="20" class="top-div">
      <el-col :span="17">
      <div class="chat-hub">  
        <p @click="onClickToChatHub" >点击前往-最新上线<span>《聊天室》 </span>，探索更多可能，结交更多朋友，闭上眼睛，聆听名刀破碎的声音</p>
        </div>
        <div class="scrollbar">
          <ScrollbarInfo />
        </div>
     
        <el-row class="left-div">
          <el-col :span="8" v-for="i in plateList" :key="i.id" class="plate" :style="{
            'padding-left': i % 3 == 1 ? 0 : 0.2 + 'rem',
            'padding-right': i % 3 == 0 ? 0 : 0.2 + 'rem',
          }">
            <PlateCard :name="i.name" :introduction="i.introduction" :id="i.id" :isPublish="i.isDisableCreateDiscuss" />
          </el-col>
          <template v-if="isDiscussFinished">
            <el-col :span="24" v-for="i in discussList" :key="i.id">
              <DisscussCard :discuss="i" />
            </el-col>
          </template>
          <template v-else>
            <Skeleton :isBorder="true" />
          </template>
          <template v-if="isAllDiscussFinished">
            <el-col :span="24" v-for="i in allDiscussList" :key="i.id">
              <DisscussCard :discuss="i" />
            </el-col>
          </template>
          <template v-else>
            <Skeleton :isBorder="true" />
          </template>
        </el-row>
      </el-col>
      <el-col :span="7">
        <el-row class="right-div">
          <el-col :span="24">
            <el-carousel trigger="click" height="150px">
              <el-carousel-item v-for="item in bannerList" :key="item.id">
                <div class="carousel-font" :style="{ color: item.color }">
                  {{ item.name }}
                </div>
                <el-image style="width: 100%; height: 100%" :src="item.logo" fit="cover" />
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <div class="analyse">
            <div class="item">
              <div class="text">在线人数</div>
              <div class="content">
                <div class="name"></div>
                <div class="content-box top">
                  <div class="count">{{ onlineNumber }}</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="text">注册人数</div>
              <div class="content">
                <div class="content-box top">
                  <div class="count">{{ userAnalyseInfo.registerNumber }}</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="text">昨日新增</div>
              <div class="content">
                <div class="content-box">
                  <div class="count">
                    {{ userAnalyseInfo.yesterdayNewUser }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 签到 -->
          <el-col :span="24">
            <InfoCard header="每日签到">
              <template #content>
                <div class="signIn">
                  <div class="left">你好，很高兴今天又遇到你！</div>
                  <div class="right">
                    <div class="signIn-btn" @click="handleToSign">去签到</div>
                  </div>
                </div>
              </template>
            </InfoCard>
          </el-col>

          <el-col :span="24">
            <InfoCard header="访问统计" class="VisitsLineChart" text="(New)全站历史统计" @onClickText="onClickAccessLog">
              <template #content>
                <VisitsLineChart :option="statisOptions" class="statisChart" />
              </template>
            </InfoCard>

            <el-dialog v-model="accessLogDialogVisible" title="全站历史统计" width="1200px" center>
              <AccessLogChart :option="accessLogOptins" class="accessLogChart" />
            </el-dialog>
          </el-col>

          <el-col :span="24">
            <InfoCard header="简介" text="">
              <template #content>
                <div class="introduce">
                  没有什么能够阻挡，人类对代码<span style="color: #1890ff">优雅</span>的追求
                </div>
              </template>
            </InfoCard>
          </el-col>

          <el-col :span="24">
            <template v-if="isPointFinished">
              <InfoCard :items="pointList" header="财富排行榜" text="关于钱钱" height="400">
                <template #item="temp">
                  <PointsRanking :pointsData="temp" />
                </template>
              </InfoCard>
            </template>
            <template v-else>
              <InfoCard header="本月排行" text="更多">
                <template #content>
                  <Skeleton />
                </template>
              </InfoCard>
            </template>
          </el-col>

          <el-col :span="24">
            <template v-if="isFriendFinished">
              <InfoCard :items="friendList" header="推荐好友" text="更多" height="400">
                <template #item="temp">
                  <RecommendFriend :friendData="temp" />
                </template>
              </InfoCard>
            </template>
            <template v-else>
              <InfoCard header="推荐好友" text="更多">
                <template #content>
                  <Skeleton />
                </template>
              </InfoCard>
            </template>
          </el-col>
          <el-col :span="24">
            <template v-if="isThemeFinished">
              <InfoCard :items="themeList" header="推荐主题" text="更多" height="400">
                <template #item="temp">
                  <ThemeData :themeData="temp" />
                </template>
              </InfoCard>
            </template>
            <template v-else>
              <InfoCard header="推荐主题" text="更多">
                <template #content>
                  <Skeleton />
                </template>
              </InfoCard>
            </template>
          </el-col>

          <el-col :span="24" style="background: transparent">
            <BottomInfo />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed, nextTick, watch } from "vue";
import { useRouter } from "vue-router";
import DisscussCard from "@/components/DisscussCard.vue";
import InfoCard from "@/components/InfoCard.vue";
import PlateCard from "@/components/PlateCard.vue";
import ScrollbarInfo from "@/components/ScrollbarInfo.vue";
import BottomInfo from "@/components/BottomInfo.vue";
import VisitsLineChart from "./components/VisitsLineChart/index.vue";
import AccessLogChart from "./components/AccessLogChart/Index.vue"
import { access, getAccessList } from "@/apis/accessApi.js";
import { getList } from "@/apis/plateApi.js";
import { getList as bannerGetList } from "@/apis/bannerApi.js";
import { getHomeDiscuss } from "@/apis/discussApi.js";
import { getWeek } from "@/apis/accessApi.js";
import {
  getRecommendedTopic,
  getRecommendedFriend,
  getRankingPoints,
  getUserAnalyse,
} from "@/apis/analyseApi.js";
import { getList as getAllDiscussList } from "@/apis/discussApi.js";
import PointsRanking from "./components/PointsRanking/index.vue";
import RecommendFriend from "./components/RecommendFriend/index.vue";
import ThemeData from "./components/RecommendTheme/index.vue";
import Skeleton from "@/components/Skeleton/index.vue";
import useSocketStore from "@/stores/socket";

const accessLogDialogVisible = ref(false)
const router = useRouter();

const accessAllList = ref([]);

const plateList = ref([]);
const discussList = ref([]);
const isDiscussFinished = ref(false);
const bannerList = ref([]);
const weekList = ref([]);
const pointList = ref([]);
const isPointFinished = ref(false);
const friendList = ref([]);
const isFriendFinished = ref(false);
const themeList = ref([]);
const isThemeFinished = ref(false);
const allDiscussList = ref([]);
const isAllDiscussFinished = ref(false);
const userAnalyseInfo = ref({});
const onlineNumber = ref(0);

//主题查询参数
const query = reactive({
  skipCount: 1,
  maxResultCount: 10,
  isTop: true,
});

//初始化
onMounted(async () => {
  access();
  const { data: plateData } = await getList();
  plateList.value = plateData.items;
  const { data: discussData, config: discussConfig } = await getHomeDiscuss();
  discussList.value = discussData;
  isDiscussFinished.value = discussConfig.isFinish;
  const { data: bannerData } = await bannerGetList();
  bannerList.value = bannerData.items;
  const { data: weekData } = await getWeek();
  weekList.value = weekData;
  const { data: pointData, config: pointConfig } = await getRankingPoints();
  pointList.value = pointData;
  isPointFinished.value = pointConfig.isFinish;
  const { data: friendData, config: friendConfig } =
    await getRecommendedFriend();
  friendList.value = friendData;
  isFriendFinished.value = friendConfig.isFinish;
  const { data: themeData, config: themeConfig } = await getRecommendedTopic();
  themeList.value = themeData;
  isThemeFinished.value = themeConfig.isFinish;
  const { data: allDiscussData, config: allDiscussConfig } =
    await getAllDiscussList({
      Type: 0,
      skipCount: 1,
      maxResultCount: 30,
    });
  isAllDiscussFinished.value = allDiscussConfig.isFinish;
  allDiscussList.value = allDiscussData.items;
  const { data: userAnalyseInfoData } = await getUserAnalyse();
  onlineNumber.value = userAnalyseInfoData.onlineNumber;
  userAnalyseInfo.value = userAnalyseInfoData;
});

const weekXAxis = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
// 访问统计
const statisOptions = computed(() => {
  return {
    xAxis: {
      data: weekList.value.map((item, index) => {
        return weekXAxis.filter((v, vIndex) => {
          return vIndex === index;
        })[0];
      }),
    },
    series: {
      data: weekList.value.map((item) => item.number),
    },
  };
});
//历史全部访问统计
const accessLogOptins = computed(() => {
  return {
    xAxis: {
      data: accessAllList.value?.map((item,index)=>{
        return item.creationTime.slice(0, 10);

      })
    },
    series: [
      {
        data: accessAllList.value?.map((item,index)=>{
        return item.number;
        })
      }
    ]
  }
});
const onClickToChatHub=()=>{
  router.push("/chat");
};

const handleToSign = () => {
  router.push("/activity/sign");
};

// 推送的实时人数获取
const currentOnlineNum = computed(() => useSocketStore().getOnlineNum());
watch(
  () => currentOnlineNum.value,
  (val) => {
    onlineNumber.value = val;
  },
  { deep: true }
);

const onClickAccessLog = async () => {
  accessLogDialogVisible.value = true;
  const {data} = await getAccessList();

  accessAllList.value = data;
}

</script>
<style scoped lang="scss">
.home-box {
  width: 1300px;
  height: 100%;

  .introduce {
    color: rgba(0, 0, 0, 0.45);
    font-size: small;
  }

  .plate {
    background: transparent !important;
  }

  .left-div .el-col {
    background-color: #ffffff;

    margin-bottom: 1rem;
  }

  .right-div .el-col {
    background-color: #ffffff;
    margin-bottom: 1rem;
  }

  .carousel-font {
    position: absolute;
    z-index: 1;
    top: 10%;
    left: 10%;
  }

  .top-div {
    padding-top: 0.5rem;
  }

  .scrollbar {
    display: block;
    margin-bottom: 0.5rem;
  }

  .analyse {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100px;
    margin-bottom: 10px;

    .item {
      width: 30%;
      height: 100%;
      position: relative;
      background: url("@/assets/box/online_bg.svg") no-repeat;
      background-color: #fff;
      background-position: 0 30px;
      background-size: 150% 100%;
      border: 1px solid #409eff;
      border-radius: 5px;
      color: #409eff;

      .content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;

        &-box {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          justify-content: center;
          margin-bottom: 10px;

          .name {
            font-size: 14px;
          }

          .count {
            font-size: 20px;
            font-weight: bold;
          }
        }
      }

      .text {
        width: 60px;
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        text-align: center;
        border: 1px solid #d9ecff;
        border-radius: 5px;
        color: #409eff;
        background-color: #ecf5ff;
      }
    }
  }

  .signIn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8a919f;

    &-btn {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 74px;
      height: 36px;
      border-radius: 4px;
      border: 1px solid rgba(30, 128, 255, 0.3);
      background-color: rgba(30, 128, 255, 0.1);
      color: #1e80ff;
    }
  }

  .VisitsLineChart>>>.el-card__body {
    padding: 0.5rem;
  }

  .statisChart {
    width: 100%;
    height: 300px;
  }

  .accessLogChart {
    width: 1100px;
    height: 500px;
  }
}
//走马灯，聊天室链接
.chat-hub
{
  background-color: #E6A23C;
  color: #ffffff;
  margin-bottom: 10px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  span{
   color: red;
  }
  p {
    cursor: pointer;
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
}
}
 
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

</style>
