<template>
  <div class="page">
    <van-sticky>
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 下载 -->
        {{ $t('home.l1') }}
      </div>
    </van-sticky>
    <div class="container">
      <img  v-if="language == 'zh-CN' || language == 'zh-TW'" class="logo" src="/img/icon/logo.png" alt="极度证券">
      <img  v-else class="logo" src="/img/icon/logo_en.png" alt="极度证券">
      <van-swipe :autoplay="2000" indicator-color="#FF6F30" @change="onchange">
        <van-swipe-item>
          <div class="item flex">
            <div class="box">
              <!-- 千万奖池&nbsp;&nbsp;豪礼不停 -->
              {{ $t('download.l7') }}&nbsp;&nbsp;{{ $t('download.l8') }}
              <div class="border"></div>
            </div>
            <div class="box2">
              <!-- 新用户注册开户即送 -->
              {{ $t('download.l9') }}
            </div>
            <div class="title">
              <!-- 价值1000USD豪礼！ -->
              {{ $t('download.l10') }}
            </div>
            <div class="box3 flex">
              <div class="li">
                <!-- 融资免息 -->
                {{ $t('download.l11') }}
              </div>
              <div class="li">
                <!-- 费率优惠 -->
                {{ $t('download.l12') }}
              </div>
              <div class="li">
                <!-- 情报免费 -->
                {{ $t('download.l13') }}
              </div>
              <div class="li">
                <!-- 惊喜大奖 -->
                {{ $t('download.l14') }}
              </div>
            </div>
            <img class="img" src="/img/download/img1.png" alt="极度证券">
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="item flex">
            <div class="box">
              <!-- 全球股市&nbsp;&nbsp;一键连通 -->
              {{ $t('download.l15') }}&nbsp;&nbsp;{{ $t('download.l16') }}
              <div class="border"></div>
            </div>
            <div class="box2">
              <!-- 全球股票一站交易 -->
              {{ $t('download.l17') }}
            </div>
            <div class="title1">
              <!-- 三大市场10000+股票全覆盖 -->
              {{ $t('download.l18') }}
            </div>
            <div class="box3 flex">
              <div class="li">
                <!-- A股 -->
                {{ $t('download.l19') }}
              </div>
              <div class="li">
                <!-- 美股 -->
                {{ $t('download.l20') }}
              </div>
              <div class="li">
                <!-- 港股 -->
                {{ $t('download.l21') }}
              </div>
            </div>
            <img class="img" src="/img/download/img2.png" alt="极度证券">
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="item flex">
            <div class="box">
              <!-- 全球市场&nbsp;&nbsp;一触即达 -->
              {{ $t('download.l22') }}&nbsp;&nbsp;{{ $t('download.l23') }}
              <div class="border"></div>
            </div>
            <div class="box2">
              <!-- 金融交易一站通 -->
              {{ $t('download.l24') }}
            </div>
            <div class="title">
              <!-- 全球热门资产尽在其中 -->
              {{ $t('download.l25') }}
            </div>
            <div class="box3 flex">
              <div class="li li1">
                <!-- 股票 -->
                {{ $t('download.l26') }}
              </div>
              <div class="li li1">
                <!-- 指数 -->
                {{ $t('download.l27') }}
              </div>
              <div class="li li2">
                <!-- 期权 -->
                {{ $t('download.l28') }}
              </div>
              <div class="li li2">
                <!-- 数字资产 -->
                {{ $t('download.l29') }}
              </div>
              <div class="li li2">
                <!-- 大宗商品 -->
                {{ $t('download.l30') }}
              </div>
            </div>
            <img class="img" src="/img/download/img3.png" alt="极度证券">
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="item flex">
            <div class="box">
              <!-- 高倍杠杆&nbsp;&nbsp;高效投资 -->
              {{ $t('download.l31') }}&nbsp;&nbsp;{{ $t('download.l32') }}
              <div class="border"></div>
            </div>
            <div class="box2">
              <!-- 高效融资新体验 -->
              {{ $t('download.l33') }}
            </div>
            <div class="title">
              <!-- 最高100倍杠杆！ -->
              {{ $t('download.l34') }}
            </div>
            <div class="box3 flex">
              <div class="li">
                <!-- 10倍 -->
                {{ $t('download.l35') }}
              </div>
              <div class="li">
                <!-- 20倍 -->
                {{ $t('download.l36') }}
              </div>
              <div class="li">
                <!-- 30倍 -->
                {{ $t('download.l37') }}
              </div>
              <div class="li">
                <!-- 40倍 -->
                {{ $t('download.l38') }}
              </div>
            </div>
            <img class="img" src="/img/download/img4.png" alt="极度证券">
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="item flex">
            <div class="box">
              <!-- 期权&nbsp;&nbsp;最大最全 -->
              {{ $t('download.l28') }}&nbsp;&nbsp;{{ $t('download.l39') }}
              <div class="border"></div>
            </div>
            <div class="box2">
              <!-- 小金额驱动大资金 -->
              {{ $t('download.l40') }}
            </div>
            <div class="title1">
              <!-- A股、港美股8000+期权 -->
              {{ $t('download.l41') }}
            </div>
            <div class="box3 flex">
              <div class="li">
                <!-- 平值 -->
                {{ $t('download.l42') }}
              </div>
              <div class="li">
                <!-- 虚值105 -->
                {{ $t('download.l43') }}
              </div>
              <div class="li">
                <!-- 低费率 -->
                {{ $t('download.l44') }}
              </div>
              <div class="li">
                <!-- 可询价 -->
                {{ $t('download.l45') }}
              </div>
            </div>
            <img class="img" src="/img/download/img5.png" alt="极度证券">
          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="btn-box flex">
        <div class="btn ltn" @click="$router.push('/')">
          <!-- 在线交易 -->
          {{ $t('download.l46') }}
        </div>
        <div class="btn rtn" @click="$router.push('/register')">
          <!-- 立即注册 -->
          {{ $t('download.l47') }}
        </div>
      </div>
      <div class="sticky">
        <iosView v-show="isiOS" :ios="ios"/>
        <apkView v-show="!isiOS" :apk="apk" />
        <div class="flex target" @click="downloadShow = !downloadShow">
          <div v-if="isiOS">
            <!-- 安卓设备 -->
            {{ $t('download.l5') }}
          </div>
          <div v-else>
            <!-- 苹果设备 -->
            {{ $t('download.l6') }}
          </div>
          <img class="icon4" v-show="downloadShow" src="/img/download/icon5.png">
          <img class="icon4" v-show="!downloadShow" src="/img/download/icon4.png">
        </div>
        <div class="more" v-if="downloadShow">
          <apkView v-if="isiOS" :apk="apk" />
          <iosView v-else :ios="ios"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAPKList } from "@/api/app";
import apkView from "./components/apk.vue";
import iosView from "./components/ios.vue";
export default {
  components: {
    apkView,
    iosView
  },
  data () {
    return {
      index: 0,
      list: ['领取豪礼', '畅游股市', '畅享交易', '撬动财富', '投资期权'],
      apk: {},
      ios: {},
      downloadShow: false,
      isiOS: false
    }
  },
  created () {
    var u = navigator.userAgent;
    this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    this.getAPKList()
  },
  methods: {
    onchange(index) {
      this.index = index
    },
    getAPKList() {
      getAPKList().then(res => {
        var list = res || []
        list.forEach(item => {
          var info = JSON.parse(item)
          if (info.os.toLowerCase() == 'android') {
            this.apk = info
          }
          if (info.os.toLowerCase() == 'ios') {
            this.ios = info
          }
        })
      }).catch(() => {})
    },
    downloadApk() {
      this.downloadShow = true
      return
      var url = ''
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isiOS) {
        url = this.ios.url
      } else {
        url = this.apk.url
      }
      if (!url) {
        return
      }
      var eleLink = document.createElement('a')
      eleLink.setAttribute('href', url)
      eleLink.setAttribute('download', 'jd')
      eleLink.style.display = 'none'
      // 触发点击
      document.body.appendChild(eleLink)
      eleLink.click()
      // 然后移除
      document.body.removeChild(eleLink)
    },
  }
}
</script>
<style lang="less" scoped>
.page {
  padding-bottom: 23px;
}
.sticky {
  padding-top: 14px;
  position: sticky;
  bottom: 0;
  z-index: 8;
  background-color: #fff;
  .more {
    padding-bottom: 14px;
  }
}
.header {
  position: relative;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 17px;
  font-size: 18px;
  font-weight: 600;
  background-color: #fff;
  .back {
    position: absolute;
    left: 9px;
    top: 11px;
  }
}
.container {
  min-height: calc(100vh - 50px);
  padding-top: 8px;
  .logo {
    display: block;
    height: 27px;
    margin: 0 auto;
  }
  .van-swipe {
    width: 100%;
  }
}
.item {
  justify-content: center;
  flex-direction: column;
  padding-top: 20px;
  text-align: center;
  padding-bottom: 28px;
  .box {
    font-size: 14px;
    font-weight: 500;
    padding: 8px;
    background-color: #FF9D21;
    position: relative;
    color: #fff;
    margin-bottom: 8px;
    border-radius: 15px;
    .border {
      border-top: 8px solid #FF9D21;
      border-left: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .box2 {
    font-size: 19px;
    line-height: 20px;
  }
  .title {
    font-size: 32px;
    font-weight: 600;
    color: #FF6F30;
    line-height: 46px;
    margin-bottom: 9px;
  }
  .title1 {
    font-size: 26px;
    font-weight: 600;
    color: #FF6F30;
    line-height: 46px;
    margin-bottom: 9px;
  }
  .box3 {
    justify-content: center;
    margin-bottom: 7px;
    border: 1px solid #DBDBDB;
    border-radius: 6px;
    .li {
      padding: 8px;
      min-width: 73px;
      &+.li {
        border-left: 1px solid #DBDBDB;
      }
    }
    .li1 {
      min-width: 49px;
    }
    .li2 {
      min-width: 66px;
    }
  }
  .img {
    width: 100%;
    max-width: 500px;
  }
}
.btn-box {
  max-width: 500px;
  margin: 0 auto;
  padding: 14px 17px 0;
  .btn {
    cursor: pointer;
    border-radius: 6px;
    text-align: center;
    line-height: 41px;
    color: #fff;
    font-size: 16px;
    flex: 1;
    &+.btn {
      margin-left: 15px;
    }
  }
  .ltn {
    border: 1px solid #333333;
    color: #000000;
  }
  .rtn {
    font-weight: 600;
    border: 1px solid var(--color-);
    background-color: var(--color-);
    color: #fff;
  }
}
.target {
  justify-content: center;
  font-size: 14px;
  color: var(--color-);
  margin-top: 14px;
  padding-bottom: 14px;
  cursor: pointer;
  .icon4 {
    width: 12px;
    margin-left: 3px;
  }
}
::v-deep {
  .van-sticky--fixed {
    background-color: #fff;
  }
  .van-swipe__indicator {
    width: 22px;
    height: 5px;
    background: #F5DDCC;
    border-radius: 3px;
  }
}
</style>