<template>
  <div class="screen-page">
    <ScaleScreen
      :width="1920"
      :height="1080"
      class="scale-wrap"
      :selfAdaption="$store.state.setting.isScale"
    >
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
          <!-- 头部 s -->
          <div class="d-flex jc-center title_wrap">
            <div class="zuojuxing"></div>
            <div class="youjuxing"></div>
            <div class="guang"></div>
            <div class="d-flex jc-center">
              <div class="title">
                <span class="title-text">{{ $route.meta.title }}</span>
              </div>
            </div>
            <div class="timers">
              {{ dateYear }} {{ dateWeek }} {{ dateDay }}
            </div>
          </div>
          <!-- 内容  s-->
          <router-view :key="$route.name"></router-view>
          <!-- 内容 e -->
        </div>
      </div>
    </ScaleScreen>
  </div>
</template>

<script>
import { formatTime } from '../utils/util.js'
import ScaleScreen from '@/bigScreenComponents/scale-screen/scale-screen.vue'
export default {
  components: { ScaleScreen },
  data () {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    }
  },
  filters: {
    numsFilter (msg) {
      return msg || 0
    }
  },
  computed: {},
  created () {},
  mounted () {
    this.timeFn()
    this.cancelLoading()
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    showSetting () {
      this.$refs.setting.init()
    },
    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading () {
      const timer = setTimeout(() => {
        this.loading = false
        clearTimeout(timer)
      }, 500)
    }
  }
}
</script>

<style lang="less">
  .screen-page{
    width: 100vw;
    height: 100vh;
    background-color: #03050C;
  }
  .scale-wrap {
      color: #d3d6dd;
      width: 1920px;
      height: 1080px;
      overflow: hidden;
      // &.pageisScale {
      //     position: absolute;
      //     top: 50%;
      //     left: 50%;
      //     transform: translate(-50%, -50%);
      //     transform-origin: left top;
      // }
      .bg {
          width: 100%;
          height: 100%;
          padding: 16px 16px 10px 16px;
          box-sizing: border-box;
          background-image: url("../assets/img/pageBg.png");
          background-size: cover;
          background-position: center center;
      }

      .host-body {
          height: 100%;

          .title_wrap {
              height: 60px;
              background-image: url("../assets/img/top.png");
              background-size: cover;
              background-position: center center;
              position: relative;
              margin-bottom: 4px;

              .guang {
                  position: absolute;
                  bottom: -26px;
                  background-image: url("../assets/img/guang.png");
                  background-position: 80px center;
                  width: 100%;
                  height: 56px;
              }

              .zuojuxing,
              .youjuxing {
                  position: absolute;
                  top: -2px;
                  width: 140px;
                  height: 6px;
                  background-image: url("../assets/img/headers/juxing1.png");
              }

              .zuojuxing {

                  left: 11%;
              }

              .youjuxing {
                  right: 11%;
                  transform: rotate(180deg);
              }

              .timers {
                  position: absolute;
                  right: 0;
                  top: 30px;
                  font-size: 18px;
                  display: flex;
                  align-items: center;

                  .blq-icon-shezhi02 {
                      cursor: pointer;
                  }
              }
          }

          .title {
              position: relative;
              // width: 500px;
              text-align: center;
              background-size: cover;
              color: transparent;
              height: 60px;
              line-height: 46px;

              .title-text {
                  font-size: 38px;
                  font-weight: 900;
                  letter-spacing: 6px;
                  width: 100%;
                  background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
              }
          }
      }

  }

  .scale-wrap {
      .pagetab {
          position: absolute;
          top: -35px;
          display: flex;
          z-index: 1000;
          .item {
              width: 180px;
              height: 36px;
              border-radius: 18px;
              color: #ffffff;
              text-indent: 20px;
              line-height: 36px;
              font-size: 16px;
              margin-right: 20px;
              background: linear-gradient(to right, rgba(39, 180, 255, 0.5), rgba(76, 245, 255, 0.1));
  			cursor: pointer;
            &:hover,&:active{
              color: #f1f1f1;
              background: linear-gradient(to right, rgba(39, 180, 255, 0.7), rgba(76, 245, 255, 0.3));
            }
            select{
              border:0;
              background:none;
              font-size: 16px;
              option{
                color: #333
              }
            }
          }
  		.focus{
  			transform: scale(1.1);
  			border: 1px solid #00EAFF;
  			box-shadow: 0 0 10px #00EAFF;
  			color: #f1f1f1;
  			background: linear-gradient(to right, rgba(39, 180, 255, 0.7), rgba(76, 245, 255, 0.3));
  		}
      }
  }

  .setting {
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 999;
      top: 0;
      left: 0;

      .left_shu {
          color: #000;
          font-weight: 900;
          position: relative;
          text-indent: 10px;
          padding:16px 0 10px 0 ;
          &::before {
              display: block;
              content: " ";
              height: 16px;
              width: 4px;
              border-radius: 2px;
              background: #0072FF;
              position: absolute;
              left: 0px;
          }
      }
  }

  .settingShow {
      .setting_inner {
          animation: rtl-drawer-in .3s 1ms;
      }

  }

  .yh-setting-fade-enter-active {
      animation: yh-setting-fade-in .3s;
  }

  .yh-setting-fade-leave-active {

      animation: yh-setting-fade-out .3s;

  }

  @keyframes yh-setting-fade-in {
      0% {
          opacity: 0;
      }

      100% {
          opacity: 1;
      }
  }

  @keyframes yh-setting-fade-out {
      0% {
          opacity: 1;
      }

      100% {
          opacity: 0;
      }
  }

  @keyframes rtl-drawer-in {
      0% {
          transform: translate(100%, 0)
      }

      100% {
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0)
      }
  }

  @keyframes rtl-drawer-out {
      0% {
          transform: translate(0, 0)
      }

      100% {
          transform: translate(100%, 0)
      }
  }
</style>