<template>
  <router-view />
</template>

<script lang="ts">
import { defineComponent, onBeforeUnmount } from 'vue';
import { useQuasar, QSpinnerFacebook } from 'quasar'
import { useI18n } from 'vue-i18n'
import axios from 'axios';
import { DirtionmaryHelper } from './config/dictionary';
export default defineComponent({
  name: 'App',
  setup(props, context) {
    const { t } = useI18n()
    const $q = useQuasar()
    let timer = null as any
    if (localStorage.vuex) {
      localStorage.clear()
    }
    onBeforeUnmount(() => {
      if (timer !== void 0) {
        clearTimeout(timer)
        $q.loading.hide()
      }
    })
    const methods = {
      showLoading() {
        $q.loading.show({
          spinner: QSpinnerFacebook,
          spinnerColor: 'yellow',
          spinnerSize: 140,
          backgroundColor: 'grey',
          message: t('loading2'),
          messageColor: 'black'
        })
        // hiding in 3s
        timer = setTimeout(() => {
          $q.loading.hide()
          timer = void 0
        }, 500)
      },
      getIp() {
        if (localStorage.getItem(DirtionmaryHelper.USER_IN_COUNTRY)) return
        localStorage.setItem(DirtionmaryHelper.USER_IN_COUNTRY, $q.lang.getLocale() == 'zh-CN' ? 'CN' : 'WG')
        // axios.get('https://ipv4.icanhazip.com/').then(async res => {
        //   let ip = res.data
        //   if (ip) {
        //     let url = `https://api.map.baidu.com/location/ip?ak=OBd2bhrqKUSbQGpniCZ996suti9YG7Bc&ip=${ip}&coor=bd09ll`
        //     if(process.env.NODE_ENV=='development'){
        //       url = `/getCountry/location/ip?ak=OBd2bhrqKUSbQGpniCZ996suti9YG7Bc&ip=${ip}&coor=bd09ll`
        //     }

        //     axios.get(url).then(async r => {
        //       localStorage.setItem(DirtionmaryHelper.USER_IN_COUNTRY,r.data.status==0 && r.data.address.indexOf('台湾')==-1?'CN':'WG')
        //     })
        //   }
        // })
      }
    }
    if (window.performance.navigation.type != 1) {
      methods.showLoading()
    }
    methods.getIp()
    return { ...methods }
  }
});
</script>
<style lang="sass">
@import url('//at.alicdn.com/t/c/font_3734871_9agx0gqqibi.css')
.fix-height-subpage
  position: absolute
  left: 0
  right: 0
  top: 0
  bottom: 0
.light-shadow
  box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important
@font-face
    // 苹方字体
    font-family: 'pf'
    src: url('./assets/fonts/PingFangMedium.ttf') format('truetype')
    font-weight: normal
    font-style: normal
@font-face
    // 苹方加粗字体
    font-family: 'pfb'
    src: url('./assets/fonts/PingFangBold.ttf') format('truetype')
    font-weight: normal
    font-style: normal
@font-face
    // 微软雅黑极细字体
    font-family: 'msl'
    src: url('./assets/fonts/mls.ttf') format('truetype')
    font-weight: normal
    font-style: normal
@font-face
    // 加粗数字字体
    font-family: 'din'
    src: url('./assets/fonts/DIN-Bold.otf') format('opentype')
    font-weight: normal
    font-style: normal
@font-face
    // 正常英文字体
    font-family: 'Poppins'
    src: url('./assets/fonts/Poppins-Regular.ttf') format('truetype')
    font-weight: normal
    font-style: normal
.pf
    font-family: 'pf'
.pfb
    font-family: 'pfb'
.msl
    font-family: 'msl'
.din
    font-family: 'din' !important
.Poppins
    font-family: 'Poppins'

.no-underline
    text-decoration: none !important
.change-a-primary
    color: var(--q-dark)
.change-a-primary:hover
    color: var(--q-primary)
.f12
    font-family: 'msl' !important
    font-size: 13px
.fz12
    font-size: 12px
.fz10
    font-size: 10px
.fz14
    font-size: 14px
.fz15
    font-size: 15px
.fz16
    font-size: 16px
.fz17
    font-size: 17px
.fz18
    font-size: 18px
.fz19
    font-size: 19px
.fz20
    font-size: 20px
.fz22
    font-size: 22px
.fz26
    font-size: 26px
.fz28
    font-size: 28px
.fz32
    font-size: 32px
.fz36
    font-size: 36px
.fz38
    font-size: 38px
.fz40
    font-size: 40px
.mycard
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important
    border-radius: 0.475rem !important

body
    font-family: 'microsoft yahei','-apple-system','BlinkMacSystemFont','Segoe UI','Roboto','Helvetica Neue','Arial','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji','MicrosoftJhengHeiBoldFix','Microsoft JhengHei' !important
    color: #181c32
.n-base-selection .n-base-selection-label,
.n-base-selection .n-base-selection-tags
    background: #f1f1f1 !important
    border-radius: 5px
.n-base-selection .n-base-selection-label:active,
.n-base-selection .n-base-selection-label:focus,
.n-base-selection .n-base-selection-tags:active,
.n-base-selection .n-base-selection-tags:focus
  background: var(--q-dark) !important
.n-base-selection .n-base-selection-label:active .n-base-selection-input__content,
.n-base-selection .n-base-selection-label:focus .n-base-selection-input__content,
.n-base-selection .n-base-selection-tags:active .n-base-selection-input__content,
.n-base-selection .n-base-selection-tags:focus .n-base-selection-input__content
  color:#FFF !important
.n-base-selection .n-base-selection-tags:active .n-tag,
.n-base-selection .n-base-selection-tags:focus .n-tag
  background: #333
  color:#FFF !important
  border: none !important
.n-base-selection .n-base-selection-tags:active .n-tag .n-tag__border,
.n-base-selection .n-base-selection-tags:focus .n-tag .n-tag__border
  border: none !important
.n-tag
  border-radius: 4px
.n-base-selection
  border: none !important
  border-radius: 5px !important
.n-base-selection .n-base-selection__border, .n-base-selection .n-base-selection__state-border
  border: 0px solid #333 !important
  box-shadow: none !important
.v-binder-follower-container
  position: absolute
  z-index: 99999999999 !important
.sticky-column-table
  max-width: 100%
  thead
    background: rgb(245, 246, 247)
  thead tr:first-child
    height: 40px
    line-height: 14px
  thead tr:first-child th
    font-size: 12px
    font-weight: 400
    color: rgb(168, 168, 179)
  thead tr:first-child th:first-child
    background-color: rgb(245, 246, 247)
  td:first-child
    background-color: #fff
  th:first-child,
  td:first-child
    position: sticky
    left: 0
    z-index: 1
    box-shadow: rgba(0, 0, 0, 0.05) 2px 0px 0px
  td.none-shadow
    box-shadow: none
.sticky-tow-column-table
  max-width: 100%
  thead
    background: rgb(245, 246, 247)
  thead tr:first-child
    height: 40px
    line-height: 14px
  thead tr:first-child th
    font-size: 12px
    font-weight: 400
    color: rgb(168, 168, 179)
  thead tr:first-child th:nth-child(-n+2)
    background-color: rgb(245, 246, 247)
  td:nth-child(-n+2)
    background-color: #fff
  th:nth-child(1),
  td:nth-child(1)
    position: sticky
    left: 0
    z-index: 1
  th:nth-child(2),
  td:nth-child(2)
    position: sticky
    z-index: 1
    box-shadow: rgba(0, 0, 0, 0.05) 2px 0px 0px
  td.none-shadow
    box-shadow: none
.sticky-right-column-table
  max-width: 100%
  thead
    background: rgb(245, 246, 247)
  thead tr:first-child
    height: 40px
    line-height: 14px
  thead tr:first-child th
    font-size: 12px
    font-weight: 400
    color: rgb(168, 168, 179)
  thead tr:first-child th:last-child
    background-color: rgb(245, 246, 247)
  td:last-child
    background-color: #fff
  th:last-child,
  td:last-child
    position: sticky
    right: 0
    z-index: 1
    box-shadow: rgba(0, 0, 0, 0.05) -2px 0px 0px

.sticky-header-table
  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th
    background-color: #f5f6f7
  thead tr th
    position: sticky
    z-index: 2 !important
  thead tr th:first-child
    z-index: 3 !important
  thead tr:first-child th
    top: 0
  &.q-table--loading thead tr:last-child th
    top: 48px
.no-bottom-table
  .q-table__bottom
    display: none !important

.sticky-header-column-table
  td:first-child
    background-color: #c1f4cd !important
  tr th
    position: sticky
    z-index: 2
    background: #fff
  thead tr:last-child th
    top: 48px
    z-index: 3
  thead tr:first-child th
    top: 0
    z-index: 1
  tr:first-child th:first-child
    z-index: 3
  td:first-child
    z-index: 1
  td:first-child, th:first-child
    position: sticky
    left: 0
.draw-close
  position: fixed
  right: 500px
  top: 200px
  border-bottom-left-radius: 5px
  border-top-left-radius: 5px
  background: var(--q-primary)
  color: white
  cursor: pointer
.sticky-rightrowspan-column-table
  max-width: 100%
  thead
    background: rgb(245, 246, 247)
  thead tr:first-child
    height: 40px
    line-height: 14px
  thead tr:first-child th
    font-size: 12px
    font-weight: 400
    color: rgb(168, 168, 179)
  thead tr:first-child th:last-child
    background-color: rgb(245, 246, 247)
  td:last-child
    background-color: #fff
  th:last-child,
  tbody tr:first-child td:last-child
    position: sticky
    right: 0
    z-index: 1
    box-shadow: rgba(0, 0, 0, 0.05) -2px 0px 0px

.q-dialog__inner--minimized>div
    max-width: unset !important
.full-window
  .q-dialog__inner--minimized
    padding: unset !important
  .q-dialog__inner--minimized>div
    max-width: unset !important
    max-height: unset !important
    width: 100vw !important
    height: 100vh !important
:root
  --q-gray-100: #f5f8fa
  --q-gray-200: #eff2f5
  --q-gray-300: #E4E6EF
  --q-gray-400: #B5B5C3
  --q-gray-500: #A1A5B7
  --q-gray-600: #7E8299
  --q-gray-700: #5E6278
  --q-gray-800: #3F4254
  --q-gray-900: #181C32

.text-grey-100
  color: var(--q-gray-100) !important
.text-grey-200
  color: var(--q-gray-200) !important
.text-grey-300
  color: var(--q-gray-300) !important
.text-grey-400
  color: var(--q-gray-400) !important
.text-grey-500
  color: var(--q-gray-500) !important
.text-grey-600
  color: var(--q-gray-600) !important
.text-grey-700
  color: var(--q-gray-700) !important
.text-grey-800
  color: var(--q-gray-800) !important
.text-grey-900
  color: var(--q-gray-900) !important
.no-padding .q-dialog__inner--minimized
  padding: 0px !important
</style>
<style>
  @import url("//at.alicdn.com/t/c/font_1890699_q162a9wo98a.css");
  .w100{
    width: 100px;
  }
  .w200{
    width: 200px;
  }
  .ellipsis2{
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
</style>
