<template>
  <div id="cesiumContainer" class="all"></div>
  <div class="time">
    <img src="/src/image/time.png" style="width: 100%; height: 100%;">
  </div>
  <div>
    <button class="button1" v-on:click="forward">▶</button>
    <button class="button2" v-on:click="start">◼</button>
    <button class="button3" v-on:click="back">◀</button>
    <button class="button4" v-on:click="multiplier">×2</button>
    <button class="button5" v-on:click="divide">×-2</button>
    <button class="button6" v-on:click="reset">⚪</button>
    <p class="bei">{{ bei }}X</p>
    <p class="time-text"> {{ timetext }}</p>
  </div>

</template>

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'

let viewer;
var bei = ref(1)
var timetext = ref()
onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
  viewer = new Cesium.Viewer("cesiumContainer", {
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    vrButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: true,
    navigationHelpButton: false,
  })
  // 格式化时间轴
    viewer.timeline.makeLabel = function (date) {
    const julianDT = new Cesium.JulianDate();
    Cesium.JulianDate.addHours(date, 8, julianDT);
    var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT);
    let hour = gregorianDT.hour + "";
    let minute = gregorianDT.minute + "";
    let second = gregorianDT.second + "";
    timetext = `${gregorianDT.year}年${gregorianDT.month}月${gregorianDT.day}日`;
    return `${gregorianDT.year}年${gregorianDT.month}月${gregorianDT.day}日${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(2,"0")}`;
  };
})

var forward = () => {
  let t = viewer.clockViewModel.multiplier;
  viewer.clockViewModel.multiplier = Math.abs(t);
  viewer.clock.shouldAnimate = true;
}
var flag = false;
var start = () => {
  flag = !(flag);
  if (flag == true)
    viewer.clock.shouldAnimate = true;
  else
    viewer.clock.shouldAnimate = false;
}
var back = () => {
  let t = viewer.clockViewModel.multiplier;
  viewer.clockViewModel.multiplier = Math.abs(t);
  viewer.clock.shouldAnimate = true;
}
var multiplier = () => {
  viewer.clockViewModel.multiplier *= 2;
  bei.value = viewer.clockViewModel.multiplier
}

var divide = () => {
  viewer.clockViewModel.multiplier /= 2;
  bei.value = viewer.clockViewModel.multiplier
}
var reset = () => {
  viewer.clock.currentTime = viewer.clock.startTime;
}



</script>



<style>
.time {
  width: 180px;
  height: 100px;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.button1 {
  position: absolute;
  top: 938px;
  left: 110px;
}

.button2 {
  position: absolute;
  top: 938px;
  left: 75px;
}

.button3 {
  position: absolute;
  top: 938px;
  left: 40px;
}

.button4 {
  position: absolute;
  top: 938px;
  left: 140px;
}

.button5 {
  position: absolute;
  top: 938px;
  left: 0px;
}

.button6 {

  position: absolute;
  top: 850px;
  left: 0px;
}

.bei {
  color: aliceblue;
  font-size: 15px;
  position: absolute;
  top: 877px;
  left: 80px;
}

.time-text {
  color: aliceblue;
  font-size: 15px;
  position: absolute;
  top: 900px;
  left: 40px;
}
</style>
