<template>
  <div>
    <!--  <el-button v-if="!isLogin" @click="goLogin" style="border-radius: 20px;" class="loginBtn">-->
    <!--    {{ language == 0 ? '登录' : 'LOGIN' }}-->
    <!--  </el-button>-->
    <!--  <div @click="logout()">{{ language == 0 ? '退出' : 'Exit' }}</div>-->
    <LoginDialog ref="pcloginDialog" @submitForm="reFlash"/>
    <!--    <img alt="" src="@/assets/image/top.png" style="width: 100%">-->
    <h1 class="text-top pd20">
      数据统计截至{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}
    </h1>
    <div class="date">
      <svg :height="`calc(100*100vw/1920)`" :width="`calc(300*100vw/1920)`" xmlns="http://www.w3.org/2000/svg">
        <!-- 定义渐变色 -->
        <defs>
          <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">
            <stop offset="0%" stop-color="#fff"/>
            <!--          <stop offset="70%" stop-color="#fff" />-->
            <stop offset="100%" stop-color="#529DFF"/>
          </linearGradient>
        </defs>
        <!-- 应用渐变色到文本 -->
        <text fill="url(#gradient)" x="0" y="0">{{ date }}</text>
      </svg>
    </div>
  </div>
</template>

<script setup>
import {computed, ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import useUserStore from '@/store/modules/user'
import {getCurrentInstance, onMounted} from '@vue/runtime-core'
import _ from 'lodash'
import LoginDialog from '@/viewsPc/login'

import Captcha from './captcha'
import CaptchaSms from './captchaSms'
import cache from '@/plugins/cache'
import {useStorage} from "@vueuse/core";
import {dayjs} from 'element-plus'

const router = useRouter()
const route = useRoute()
const {proxy} = getCurrentInstance()
const isLogin = ref(false)
const activeIndex = ref('/')
const registerVisible = ref(false)
const loginForm = ref({})
const drawer = ref(false)
const date = ref()
const language = useStorage('language', 0)
const user = useUserStore().user

onMounted(() => {
  date.value = dayjs().format('YYYY-MM-DD ddd HH:mm:ss ')
})
const logout = () => {
  proxy.$modal.confirm(language.value == 0 ? '确定退出？' : 'Are you sure to exit?').then(function () {
    return useUserStore().logOut()
  }).then(() => {
    isLogin.value = true
    router.push('/')
    location.reload()
  })
}

const goLogin = (query) => {
  let param = {}
  proxy.$refs['pcloginDialog'].open(query)
}

const reFlash = () => {
  // 刷新
  location.reload()
}
watch(() => useUserStore().reLogin, (val) => {
  if (val.show) {
    console.log(val)
    goLogin(val.query)
  }
})
watch(() => useUserStore().visitor, (val) => {
  if (val) {
    console.log(val)
    proxy.$refs['visitorDialog'].open()
  }
})
</script>

<style lang="scss" scoped>
h1 {
  font-family: 'YouSheBiaoTiHei', serif;
  position: relative;
  top: calc(15 * 100vw / 1920);
  font-size: calc(32 * 100vw / 1920);
  //-webkit-background-clip: text;
  //-webkit-text-fill-color: transparent;
}

.text-center {
  color: #fff;
}

.text-top {
  height: calc(63 * 100vw / 1920);
  margin: 0;
  font-size: calc(17 * 100vw / 1920);
  font-weight: 400;
  line-height: calc(40 * 100vw / 1920);
  padding-left: calc(30 * 100vw / 1920)

}

.date {
  color: #fff;
  position: absolute;
  right: calc(30 * 100vw / 1920);
}

.dark {
  .text-top {
    background: url('@/assets/image/top@3x.png') no-repeat top center;
    background-size: 100%;
    color: #12BFFF;
  }
}

.light {
  .text-top {
    background: url('@/assets/image/top-light@2x.png') no-repeat top center;
    background-size: 100%;
    color: #0060AA;
  }
}
</style>