<template>
<!--  <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"/>

  <h1 class="text-center m0">新吴区档案馆服务大厅</h1>
  <div class="date">
    <svg :width="`calc(300*100vw/1920)`" :height="`calc(100*100vw/1920)`" xmlns="http://www.w3.org/2000/svg">
      <!-- 定义渐变色 -->
      <defs>
        <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#fff" />
<!--          <stop offset="70%" stop-color="#fff" />-->
          <stop offset="100%" stop-color="#529DFF" />
        </linearGradient>
      </defs>
      <!-- 应用渐变色到文本 -->
      <text x="0" y="0" fill="url(#gradient)">{{date}}</text>
    </svg>
  </div>

</template>

<script setup>
import {computed, ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import useUserStore from '@/store/modules/user'
import {Search, UserFilled} from '@element-plus/icons-vue'
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 scoped lang="scss">
h1{font-family: 'YouSheBiaoTiHei';position: relative;top: calc(15*100vw/1920);
  background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);font-size: calc(32*100vw/1920);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
.text-center{color: #fff;}
.date{color: #fff;position: absolute;right:calc(30*100vw/1920);}
</style>