<template>
  <div class="components flex">
    <div class="box flex" v-if="apk.url || apk.url2" @click="downloadApk(getUrl((apk.url || apk.url2) + '?' + getRandomInt(1, 100000)))">
      <img class="img" src="/img/download/apk.png" alt="极度证券">
      <div class="right">
        <div>Android APK</div>
        <div class="des">
          <!-- 安装包下载 -->
          {{ $t('download.l') }}
        </div>
      </div>
    </div>
    <div class="box flex" v-if="apk.playurl" @click="downloadApk(apk.playurl)">
      <img class="img" src="/img/download/google.png" alt="极度证券">
      <div class="right">
        <div>Google play</div>
        <div class="des">
          <!-- 商店下载 -->
          {{ $t('download.l1') }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['apk'],
  methods: {
    downloadApk(url) {
      location.href = url
    },
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    getUrl(url) {
      if (window.location.hostname == 'localhost' || window.location.hostname == 'm.jdnx.com') {
        return url
      }
      var hostname = ''
      if (window.location.hostname.indexOf('m.') !== -1) {
        hostname = window.location.hostname.replace('m.', 'www.')
      }
      return url.replace('dc.jdnx.com', hostname)
    }
  }
}
</script>
<style lang="less" scoped>
.components {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 17px;
  .box {
    flex: 1;
    max-width: calc(50% - 7px);
    border-radius: 6px;
    border: 1px solid #DFDFDF;
    padding: 6px 4px;
    font-size: 16px;
    color: #000000;
    &+.box {
      margin-left: 14px;
    }
  }
  .img {
    width: 44px;
  }
  .right {
    padding-left: 4px;
  }
  .des {
    font-size: 12px;
    color: #A6A6A6;
    margin-top: 7px;
  }
}
</style>