<template>
  <div class="components flex">
    <div class="box flex" v-if="ios.testflight || ios.testflight2" @click="downloadApk(ios.testflight || ios.testflight2)">
      <img class="img" src="/img/download/icon2.png" alt="极度证券">
      <div class="right">
        <div>
          <!-- 官方Beta版 -->
          {{ $t('download.l2') }}
        </div>
        <div class="des">
          <!-- 云端下载 -->
          {{ $t('download.l3') }}
        </div>
      </div>
    </div>
    <div class="box flex" v-if="ios.store" @click="downloadApk(ios.store)">
      <img class="img" src="/img/download/app.png" alt="极度证券">
      <div class="right">
        <div>App Store</div>
        <div class="des">
          <!-- 官方商店下载 -->
          {{ $t('download.l4') }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['ios'],
  methods: {
    downloadApk(url) {
      location.href = url
    },
  }
}
</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>