<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-sticky class="sticky">
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 关于 -->
        {{ $t('about.l') }}
      </div>
    </van-sticky>
    <div class="page">
      <img class="logo" src="/logo.png" alt="极度证券">
      <!-- 极度证券 -->
      <div class="version">{{ $t('common.l63') }}(V{{ info.version }})</div>
      <div class="ul">
        <a class="li flex" :href="info.store || info.playurl">
          <div>
            <!-- 版本更新 -->
            {{ $t('about.l1') }}
          </div>
          <div class="right flex">
            <div class="lab">
              <!-- 去应用市场查看 -->
              {{ $t('about.l2') }}
            </div>
            <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
          </div>
        </a>
        <div class="li flex" @click="shareLink">
          <div>
            <!-- 推荐给朋友 -->
            {{ $t('about.l3') }}
          </div>
          <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
        </div>
        <div class="li flex" @click="$router.push('/about/home')">
          <div>
            <!-- 关于极度 -->
            {{ $t('about.l4') }}
          </div>
          <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
        </div>
        <a class="li flex" :href="info.store || info.playurl">
          <div>
            <!-- 给极度评分 -->
            {{ $t('about.l5') }}
          </div>
          <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import { getAPKList } from "@/api/app";
import NativeShare from 'nativeshare'
import { copyText } from '@/utils/index'
export default {
  data () {
    return {
      info: {},
      isiOS: false
    }
  },
  created () {
    var u = navigator.userAgent;
    this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    this.getAPKList()
  },
  methods: {
    getAPKList() {
      this.fullscreenLoading = true
      getAPKList().then(res => {
        var list = res || []
        list.forEach(item => {
          var info = JSON.parse(item)
          if (info.os.toLowerCase() == 'android' && !this.isiOS) {
            this.info = info
          }
          if (info.os.toLowerCase() == 'ios' && this.isiOS) {
            this.info = info
          }
        })
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false
      })
    },
    shareLink() {
      try {
        this.nativeShare = new NativeShare()
        var shareData = {
          title: this.$t('about.l'),
          // desc: '极度证券',
          // img: '',
          // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
          link: window.location.href,
          icon: window.location.origin + '/logo.png',
        }
        this.nativeShare.setShareData(shareData)
        this.nativeShare.call()
      } catch (err) {
        copyText(window.location.href)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.sticky {
  background-color: var(--bg-);
}
.header {
  position: relative;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 17px;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--bg-);
  .back {
    position: absolute;
    left: 9px;
    top: 11px;
  }
}
.page {
  padding: 30px 17px;
  .logo {
    display: block;
    margin: 0 auto 10px;
    width: 99px;
  }
  .version {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 30px;
  }
}
.ul {
  .li {
    cursor: pointer;
    margin-top: 10px;
    border-radius: 8px;
    border: 1px solid #F1F1F1;
    height: 50px;
    justify-content: space-between;
    font-size: 16px;
    padding: 0 13px;
    color: #000000;
  }
  .arrow-right {
    width: 6px;
  }
  .lab {
    font-size: 14px;
    color: #7B7B7B;
    padding-right: 9px;
  }
}
</style>