<template>
  <div class="home-blog">
    <!-- 背景加头像展示 -->
    <!-- <div class="hero" :style="{ ...bgImageStyle }"> -->
    <div class="hero">
      <!-- <div><canvas id="worldwindcvn"></canvas></div> -->
      <div id="cesiumContainer"></div>
      <div id="intro">
        
        <ModuleTransition>
          <img
            class="hero-img"
            v-if="recoShowModule && $frontmatter.heroImage"
            :style="heroImageStyle || {}"
            :src="$withBase($frontmatter.heroImage)"
            alt="hero"
          />
        </ModuleTransition>

        <ModuleTransition delay="0.04">
          <div class="inner">
            <h1 v-if="recoShowModule && $frontmatter.heroText !== null" style="color: white">
              {{ $frontmatter.heroText || $title || 'vuePress-theme-reco' }}
            </h1>
          </div>
        </ModuleTransition>

        <ModuleTransition delay="0.08">
          <p v-if="recoShowModule && $frontmatter.tagline !== null" class="description" style="color: white">
            {{ $frontmatter.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}
          </p>
        </ModuleTransition>
        <ModuleTransition>
          <a id="down" href="#down">
            <canvas id="downCanvas" width="30" height="50">
            </canvas>
          </a>
        </ModuleTransition>
      </div>
    </div>
    <!-- 简介 -->
    <ModuleTransition>
      <IntroContainer>
        <subject-info></subject-info>
      </IntroContainer>
    </ModuleTransition>
    <!-- 推荐文章 -->
    <ModuleTransition>
      <IntroContainer>
        <recommend></recommend>
      </IntroContainer>
    </ModuleTransition>
    <!-- 测试模块 -->
    <ModuleTransition>
        <!-- <canvas id="worldwindcvn"></canvas> -->
    </ModuleTransition>
    <!-- 博客展示 -->
    <ModuleTransition delay="0.16">
      <div v-show="recoShowModule" class="home-blog-wrapper">
        <div class="blog-list">
          <!-- 博客列表 -->
          <note-abstract
            :data="$recoPosts"
            :currentPage="currentPage"></note-abstract>
          <!-- 分页 -->
          <pagation
            class="pagation"
            :total="$recoPosts.length"
            :currentPage="currentPage"
            @getCurrentPage="getCurrentPage" />
        </div>
        <div class="info-wrapper">
          <PersonalInfo/>
          <h4><i class="iconfont reco-category"></i> {{homeBlogCfg.category}}</h4>
          <ul class="category-wrapper">
            <li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
              <router-link :to="item.path">
                <span class="category-name">{{ item.name }}</span>
                <span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
              </router-link>
            </li>
          </ul>
          <hr>
          <h4 v-if="$tags.list.length !== 0"><i class="iconfont reco-tag"></i> {{homeBlogCfg.tag}}</h4>
          <TagList @getCurrentTag="getPagesByTags" />
          <h4 v-if="$themeConfig.friendLink && $themeConfig.friendLink.length !== 0"><i class="iconfont reco-friend"></i> {{homeBlogCfg.friendLink}}</h4>
          <FriendLink />
        </div>
      </div>
    </ModuleTransition>

    <ModuleTransition delay="0.24">
      <Content v-show="recoShowModule" class="home-center" custom/>
    </ModuleTransition>
  </div>
</template>

<script>
import TagList from '@theme/components/TagList'
import FriendLink from '@theme/components/FriendLink'
import NoteAbstract from '@theme/components/NoteAbstract'
import pagination from '@theme/mixins/pagination'
import ModuleTransition from '@theme/components/ModuleTransition'
import PersonalInfo from '@theme/components/PersonalInfo'
import { getOneColor } from '@theme/helpers/other'
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
import IntroContainer from "./Custom/IntroContainer";
import SubjectInfo from './Custom/SubjectInfo';
import Recommend from './Custom/Recommend';



import AOS from 'aos'
// import WorldWind from 'worldwindjs'
export default {
  mixins: [pagination, moduleTransitonMixin],
  components: { NoteAbstract, TagList, FriendLink, ModuleTransition, PersonalInfo,IntroContainer ,SubjectInfo,Recommend},
  data () {
    return {
      recoShow: false,
      currentPage: 1,
      tags: []
    }
  },
  computed: {
    homeBlogCfg () {
      return this.$recoLocales.homeBlog
    },
    actionLink () {
      const {
        actionLink: link,
        actionText: text
      } = this.$frontmatter

      return {
        link,
        text
      }
    },
    heroImageStyle () {
      return this.$frontmatter.heroImageStyle || {}
    },
    bgImageStyle () {
      const initBgImageStyle = {
        textAlign: 'center',
        overflow: 'hidden',
        background: `
          url(${this.$frontmatter.bgImage
    ? this.$withBase(this.$frontmatter.bgImage)
    : require('../images/bg.svg')}) center/cover no-repeat
        `
      }
      const {
        bgImageStyle
      } = this.$frontmatter

      return bgImageStyle ? { ...initBgImageStyle, ...bgImageStyle } : initBgImageStyle
    },
    heroHeight () {
      return document.querySelector('.hero').clientHeight
    }
  },
  mounted () {
    this.recoShow = true
    this._setPage(this._getStoragePage())
    this.drawDown();
    AOS.init({
      duration: 1000,
    });
    // this.initWorldwind();
    this.initCesium();
  },
  methods: {
    initCesium () {
      let Cesium = this.$cesium;
      window.CESIUM_BASE_URL = '/cesium'
      
       Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjI2ZjVjMS0zZTFjLTQ3MDAtYTZlZC02YWFjOWQwNzBjNjIiLCJpZCI6ODM1NTQsImlhdCI6MTY0NTY1NzYzM30.IPqS_sM-s_vzNnK0EAiTy6kpYP5RBYkuMgbqJtKQkPw";

      var viewer = new Cesium.Viewer("cesiumContainer", {
        geocoder:false,//位置查找
        homeButton:false,//视图返回初始位置
        sceneModePicker:false,//视角选择器
        baseLayerPicker:false,//底图选择器
        navigationHelpButton:false,//导航帮助按钮
        animation:false,//动画控制器
        creditContainer:document.createElement("div"),//版权显示
        timeline:false,//时间线
        fullscreenButton:false,//全屏控件
        vrButton:false,
        skyBox:false
      });
      viewer.scene.globe.showGroundAtmosphere = true;// 打开大气层
      viewer.scene.globe.enableLighting = true;// 打开时间光照
      viewer.imageryLayers.removeAll();//清除影像图层集合中的图层
      // 添加白天的影像图层
      const dayLayer = viewer.imageryLayers.addImageryProvider(
        // new Cesium.ArcGisMapServerImageryProvider({
        //   url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
        // })
        new Cesium.SingleTileImageryProvider({
          url: "./images/BMNG_world.topo.bathy.200405.3.2048x1024.jpg",
          rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
        })
      );

      dayLayer.dayAlpha = 1.0;
      dayLayer.nightAlpha = 0.0;
      // 添加夜晚的影像图层
      const nightLayer = viewer.imageryLayers.addImageryProvider(
        // new Cesium.IonImageryProvider({
        //   assetId: 3812,
        // })
        new Cesium.SingleTileImageryProvider({
          url: "./images/dnb_land_ocean_ice_2012.png",
          rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
        })
      );
      // nightLayer.alpha = 0;
      nightLayer.dayAlpha = 0.0;
      nightLayer.nightAlpha = 1.0;
      nightLayer.brightness = 1.5
      viewer.clock.multiplier = 4000;
      viewer.clock.shouldAnimate = true;
      // window.viewer = viewer;
      // 设置相机视角
      viewer.camera.setView({
        destination: new Cesium.Cartesian3(11003440.120415999,  7527767.772270756, 5908317.429410059),
        orientation: {
          heading: 6.132482024698851, // east, default value is 0.0 (north)
          pitch: -1.1287467794211539, // default value (looking down)
          roll: 6.28264515992548, // default value
        },
      });
    },
    //绘制向下剪头
    drawDown() {
      var c = document.getElementById("downCanvas"),
          cxt = c.getContext("2d");
      cxt.beginPath();
      cxt.moveTo(5, 20);
      cxt.lineTo(15, 32.5);
      cxt.lineTo(25, 20);
      cxt.lineWidth = 5;
      cxt.strokeStyle = "white";
      cxt.stroke();
    },
    initWorldwind(){
      let WorldWind = window.WorldWind;
      WorldWind.configuration.baseUrl = "https://files.worldwind.arc.nasa.gov/artifactory/web/0.9.0/";
      //创建一个worldwindow对象
      let wwd = new WorldWind.WorldWindow("worldwindcvn");
      let atmosphereLayer = new WorldWind.AtmosphereLayer();
      let starFieldLayer = new WorldWind.StarFieldLayer();
      wwd.addLayer(new WorldWind.BMNGLayer(null));
      wwd.addLayer(starFieldLayer); //IMPORTANT: add the starFieldLayer before the atmosphereLayer
      wwd.addLayer(atmosphereLayer);
      
      let startCamera = {
          latitude: 89.983,
          longitude: 34.551,
          range: 10000e3,
          heading: 0,
          tilt: 90,
      };
      let dollyCamera = {
          range: 9000e3,
          tilt: 0,
      };
      let navigator = wwd.navigator;
      //设置相机的位置
      navigator.lookAtLocation = new WorldWind.Location(startCamera.latitude, startCamera.longitude);
      //设置相机的距离
      navigator.range = startCamera.range;
      //设置相机的航向（屏幕旋转），从北极顺时针方向开始
      navigator.heading = startCamera.heading;
      //设置相机的倾斜程度
      navigator.tilt = startCamera.tilt;

      // let timeStamp = Date.now();
      let timeStamp = 1516600944119;
      // Update the Sun position in 3 minute steps, every 64 ms in real time. Then redraw the scene.
      setInterval(function () {
          timeStamp += 180 * 1000;
          atmosphereLayer.time = new Date(timeStamp);
          wwd.redraw();
      }, 64);

    },
    // 获取当前页码
    getCurrentPage (page) {
      this._setPage(page)
      setTimeout(() => {
        window.scrollTo(0, this.heroHeight)
      }, 100)
    },
    // 根据分类获取页面数据
    getPages () {
      let pages = this.$site.pages
      pages = pages.filter(item => {
        const { home, date } = item.frontmatter
        return !(home == true || date === undefined)
      })
      // reverse()是为了按时间最近排序排序
      this.pages = pages.length == 0 ? [] : pages
    },
    getPagesByTags (tagInfo) {
      this.$router.push({ path: tagInfo.path })
    },
    _setPage (page) {
      this.currentPage = page
      this.$page.currentPage = page
      this._setStoragePage(page)
    },
    getOneColor
  }
}
</script>

<style lang="stylus">


@-webkit-keyframes h2css {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes h2css {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes h2css {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes h2css {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes h2before {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes h2before {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-o-keyframes h2before {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes h2before {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
#worldwindcvn,#cesiumContainer{
  background-color black
  width 100%
  height 100vh
  position absolute
  top 0
  left 0
}
.hero .inner{
  position: relative;
  z-index: 5;
  width: 175px;
  margin 0 auto 1rem

}
.hero .inner:before{
  left 0
}
.hero .inner:after{
  right 0
}
.hero .inner:before,.inner:after{
  background: #fff;
  content: '';
  display: block;
  height: 2px;
  position: absolute;
  width: 100%;
  -moz-animation: h2before 1.35s ease;
  -webkit-animation: h2before 1.35s ease;
  -ms-animation: h2before 1.35s ease;
  animation: h2before 1.35s ease;
}
.hero .inner h1{
  -moz-animation: h2css 0.85s ease;
  -webkit-animation: h2css 0.85s ease;
  -ms-animation: h2css 0.85s ease;
  animation: h2css 0.85s ease;
  font-size: 24px;
  display: block;
  padding: 10px 30px;
  opacity: 1;
}
//向下动态剪头 start
@-moz-keyframes myMove {
  0% {padding-top:30px;}
  100% {padding-top:50px;}
}
@-webkit-keyframes myMove {
  0% {padding-top:30px;}
  100% {padding-top:50px;}
}
@-o-keyframes myMove {
  0% {padding-top:30px;}
  100% {padding-top:50px;}
}
@keyframes myMove {
  0% {padding-top:30px;}
  100% {padding-top:50px;}
}
#down {
  cursor: pointer;
  position: absolute;
  text-align: center;
  width: 100%
  top: 86vh;
  left: 0;
  // margin-left: -15px;
  -moz-animation: myMove 1s linear infinite alternate;
  -webkit-animation: myMove 1s linear infinite alternate;
  -o-animation: myMove 1s linear infinite alternate;
  animation: myMove 1s linear infinite alternate;
}
// 向下动态剪头 end

.home-blog {
  padding: 0;
  margin: 0px auto;
  .hero {
    //margin $navbarHeight auto 0
    position relative
    box-sizing border-box
    padding 0 20px
    height 100vh
    display flex
    align-items center
    justify-content center
    #intro{
      width 100%
      z-index 2
      user-select none
    }
    .hero-img {
      max-width: 300px;
      margin: 0 auto 1.5rem
    }

    h1 {
      display: block;
      margin:0 auto 0.6rem;
      font-size: 2rem;
    }

    .description {
      margin: 1.8rem auto;
      font-size: 1.6rem;
      line-height: 1.3;
      text-align: center;
    }
    .icon-angle-down {
      font-family: "iconfont" !important;
      font-style: normal;
      -webkit-font-smoothing: antialiased;

      cursor: pointer;
      position: absolute;
      bottom: 10px;
      color: #eee;
      font-size: 2.5rem;
      opacity: .8;
      text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,.15);
      -webkit-animation: arrow 1.3s linear infinite;
      animation: arrow 1.3s linear infinite;
    }
    .icon-angle-down:before {
      content: "\ef19";
    }
  }
  .home-blog-wrapper {
    display flex
    align-items: flex-start;
    margin 20px auto 0
    padding 0 20px
    max-width $homePageWidth
    .blog-list {
      flex auto
      width 0
      .abstract-wrapper {
        .abstract-item:last-child {
          margin-bottom: 0px;
        }
      }
    }
    .info-wrapper {
      position -webkit-sticky;
      position sticky;
      top 70px
      overflow hidden
      transition all .3s
      margin-left 15px
      flex 0 0 300px
      height auto
      box-shadow var(--box-shadow)
      border-radius $borderRadius
      box-sizing border-box
      padding 0 15px
      background var(--background-color)
      &:hover {
        box-shadow var(--box-shadow-hover)
      }
      h4 {
        color var(--text-color)
      }
      .category-wrapper {
        list-style none
        padding-left 0
        .category-item {
          margin-bottom .4rem
          padding: .4rem .8rem;
          transition: all .5s
          border-radius $borderRadius
          box-shadow var(--box-shadow)
          background-color var(--background-color)
          &:hover {
            transform scale(1.04)
            a {
              color $accentColor
            }
          }
          a {
            display flex
            justify-content: space-between
            color var(--text-color)
            .post-num {
              width 1.6rem;
              height 1.6rem
              text-align center
              line-height 1.6rem
              border-radius $borderRadius
              background #eee
              font-size 13px
              color #fff
            }
          }
        }
      }
    }
  }
}

@media (max-width: $MQMobile) {
  .home-blog {
    .hero {
      //height 450px
      height 100vh
      img {
        max-height: 210px;
        margin: 2rem auto 1.2rem;
      }

      h1 {
        margin: 0 auto 1.2rem ;
        font-size: 2rem;
      }

      .description {
        font-size: 1.3rem;
      }

      .action-button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
      }
    }
    .home-blog-wrapper {
      display block!important
      .blog-list {
        width auto
      }
      .info-wrapper {
        // display none!important
        margin-left 0
        .personal-info-wrapper {
          display none
        }
      }
    }
  }
}

@media (max-width: $MQMobileNarrow) {
  .home-blog {
    .hero {
      //height 450px
      height 100vh
      img {
        max-height: 210px;
        margin: 2rem auto 1.2rem;
      }

      h1 {
        margin: 0 auto 1.1rem ;
        font-size: 2rem;
      }

      h1, .description, .action {
        // margin: 1.2rem auto;
      }

      .description {
        font-size: 1.3rem;
      }

      .action-button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
      }
    }

    .home-blog-wrapper {
      display block!important
      .blog-list {
        width auto
      }
      .info-wrapper {
        // display none!important
        margin-left 0
        .personal-info-wrapper {
          display none
        }
      }
    }
  }
}
</style>
