<template>
  <div class="page" :class="{'en': language != 'zh-CN' && language != 'zh-TW'}">
    <header class="header flex">
      <div class="left">
        <div class="logo-box flex">
          <img class="logo" src="/img/landing/logo1.png" alt="JDNX">
          <div>
            <!-- 极度证券 -->
            {{ $t('common.l63') }}
          </div>
        </div>
        <div>
          <!-- 美股、A股、港股首选交易平台 -->
          {{ $t('landing.l') }}
        </div>
      </div>
      <div class="right flex">
        <van-popover
          v-model="showPopover"
          placement="bottom"
          trigger="click"
        >
          <div class="popover-body">
            <div class="item" :class="{active: language == 'zh-CN'}" @click="selectLang('zh-CN')">
              简体中文
            </div>
            <div class="item" :class="{active: language == 'zh-TW'}" @click="selectLang('zh-TW')">
              繁体中文
            </div>
            <div class="item" :class="{active: language == 'en'}" @click="selectLang('en')">
              English
            </div>
            <!-- <div class="item" :class="{active: language == 'th'}" @click="selectLang('th')">
              แบบไทย
            </div> -->
            <div class="item" :class="{active: language == 'vi'}" @click="selectLang('vi')">
              Tiếng Việt
            </div>
            <!-- <div class="item" :class="{active: language == 'ru'}" @click="selectLang('ru')">
              Русский
            </div> -->
          </div>
          <template #reference>
            <div class="lan-box flex">
              <img class="icon" src="/img/icon/language.png" alt="JDNX">
              <div>
                {{ languageText[language] }}
              </div>
            </div>
          </template>
        </van-popover>
        <div class="href" @click="$router.push('/download')">
          <!-- 下载 -->
          {{ $t('home.l1') }}
        </div>
      </div>
    </header>
    <section class="top">
      <div class="title">
        <!-- 注册开户送大礼包 -->
        {{ $t('landing.l1') }}
      </div>
      <div class="box">
        <div class="number">
          1800
        </div>
        <div>
          USD
        </div>
      </div>
      <div class="sub">
        <!-- 火热股市 极速开户 -->
        {{ $t('landing.l2') }}
      </div>
      <div class="box1">
        <div class="left flex">
          <div>
            <!-- A股 -->
            {{ $t('common.l61') }}
          </div>
          <div class="line"></div>
          <div>
            <!-- 美股 -->
            {{ $t('common.l41') }}
          </div>
          <div class="line"></div>
          <div>
            <!-- 港股 -->
            {{ $t('common.l42') }}
          </div>
        </div>
          <!-- 多空双开，最高 <span class="span">20</span> 倍杠杆 -->
        <div class="right" v-html="$t('landing.l3')">
        </div>
      </div>
    </section>
    <section class="section">
      <div class="tabs">
        <div class="tab flex" :class="{'active': type == 1}" @click="type = 1">
          <div>
            <!-- 手机号 -->
            {{ $t('login.l21') }}
          </div>
        </div>
        <div class="tab flex" :class="{'active': type == 2}" @click="type = 2">
          <div>
            <!-- 邮箱 -->
            {{ $t('setting.l11') }}
          </div>
        </div>
      </div>
      <el-form autocomplete="off" class="login-land" :rules="rules" :model="form" ref="form">
        <el-form-item prop="account" v-if="type == 1" :class="{focus: accountFocus}">
          <!-- 请输入手机号码 -->
          <el-input autocomplete="off" ref="accout" @focus="accountFocus = true" @blur="accountFocus = false" :placeholder="$t('setting.l37')" type="number" v-model="form.account">
            <template slot="prepend">
              <div class="area-box flex" @click="countryShow">
                <div>+{{ phoneCountry.area_code }}</div>
                <van-icon color="#616161" name="arrow-down" size="12px" />
              </div>
            </template>
            <div slot="suffix" class="suffix">
              <van-icon name="clear" @click="form.account = ''" v-if="form.account" />
            </div>
          </el-input>
        </el-form-item>
        <!-- 请输入邮箱地址 -->
        <el-autocomplete
          popper-class="email-autocomplete"
          :class="{focus: accountFocus}"
          @focus="accountFocus = true"
          @blur="accountFocus = false"
          autocomplete="off"
          :debounce="0"
          ref="email"
          v-if="type == 2"
          v-model="form.account"
          :fetch-suggestions="querySearch"
          :placeholder="$t('login.l2')">
          <template slot-scope="{ item }">
            <div class="email-li flex" @click.stop="handleSelect(item)">
              <div class="query">{{ getAccoutName() }}</div>
              <div>@</div>
              <div>{{ item }}</div>
            </div>
          </template>
          <div slot="suffix" class="suffix">
            <van-icon name="clear" @click="clearEmail" v-if="form.account" />
          </div>
        </el-autocomplete>
        <el-form-item prop="verifyCode" :class="{focus: codeFocus}">
          <div class="code-box flex">
            <!-- 请输入手机验证码 请输入邮箱验证码 -->
            <el-input autocomplete="off" type="number" @focus="codeFocus = true" @blur="codeFocus = false" :placeholder="type == 1 ? $t('register.l') : $t('register.l1')" v-model="form.verifyCode">
            </el-input>
            <div class="send" @click="getVerifyCode">{{ sendText }}{{ isNaN(Number(sendText)) ? '' : 's' }}</div>
          </div>
        </el-form-item>
        <!-- 请设置密码 -->
        <el-autocomplete
          popper-class="password-autocomplete"
          :readonly="readonly"
          :class="{focus: passwordFocus}"
          @focus="passwordFocus = true"
          @blur="passwordFocus = false"
          autocomplete="off"
          placement="top-start"
          :debounce="0"
          :type="showPassword"
          ref="password"
          v-model="form.password"
          :fetch-suggestions="querySearch1"
          :placeholder="$t('login.l3')">
          <template>
            <div class="rule-box" @click.stop="">
              <div class="rule flex" :class="{active: rule1}">
                <img class="check" v-show="!rule1" src="/img/login/check.png" alt="极度证券">
                <img class="check" v-show="rule1" src="/img/login/checked.png" alt="极度证券">
                <div>
                  <!-- 8-20个字符 -->
                  {{ $t('register.l17') }}
                </div>
              </div>
              <div class="rule flex" :class="{active: rule2}">
                <img class="check" v-show="!rule2" src="/img/login/check.png" alt="极度证券">
                <img class="check" v-show="rule2" src="/img/login/checked.png" alt="极度证券">
                <div>
                  <!-- 至少1个数字 -->
                  {{ $t('register.l18') }}
                </div>
              </div>
              <div class="rule flex" :class="{active: rule3}">
                <img class="check" v-show="!rule3" src="/img/login/check.png" alt="极度证券">
                <img class="check" v-show="rule3" src="/img/login/checked.png" alt="极度证券">
                <div>
                  <!-- 至少1个字母 -->
                  {{ $t('register.l19') }}
                </div>
              </div>
            </div>
          </template>
          <div slot="suffix" class="suffix">
            <img class="eye" @click="showPassword = 'text'" v-show="showPassword == 'password'" src="/img/icon/eye.png?1" alt="极度证券">
            <img class="eye" @click="showPassword = 'password'" v-show="showPassword == 'text'" src="/img/icon/eye_no.png?1" alt="极度证券">
          </div>
        </el-autocomplete>
        <div class="href1" @click="checked = !checked">
          <img v-show="!checked" class="check" src="/img/icon/check.png?1" alt="极度证券">
          <img v-show="checked" class="check" src="/img/icon/check1.png?1" alt="极度证券">
          <div>
            <!-- 我已阅读并同意极度证券<span class="active" @click="$router.push('/statement/user')">用户协议</span>与<span class="active" @click="$router.push('/statement/privacy')">个人隐私条款</span> -->
            {{ $t('landing.l4') }}<span class="active" @click.stop="$router.push('/statement/user')">{{ $t('auth.l28') }}</span>{{ $t('landing.l5') }}<span class="active" @click.stop="$router.push('/statement/privacy')">{{ $t('landing.l6') }}</span>
          </div>
        </div>
        <div class="btn-box flex" @click="submit">
          <div>
            <!-- 立即领取1800USD大礼包 -->
            {{ $t('landing.l7') }}
          </div>
          <img class="icon" src="/img/landing/icon.png" alt="JDNX">
        </div>
      </el-form>
    </section>
    <section class="section1">
      <div class="title">
        <!-- 注册即享现金福利 拒绝活动套路 -->
        {{ $t('landing.l8') }}
      </div>
      <div class="tip">
        <!-- 特惠福利 1800USD 大礼包 -->
        {{ $t('landing.l9') }}
      </div>
      <table>
        <tr class="tr">
          <td class="left">
            <img class="icon" src="/img/landing/icon1.png" alt="JDNX">
            <div>
              <!-- 注册 -->
              {{ $t('login.l9') }}
            </div>
          </td>
          <td style="padding: 2px;"></td>
          <td class="right">
            <div class="flex">
              <!-- 送 <span class="span">100USD</span> 抵扣券 -->
              <div class="text" v-html="$t('landing.l10')">
              </div>
              <img class="icon" src="/img/landing/icon4.png" alt="JDNX">
            </div>
            <!-- A股、美股、港股的交易手续费、资金利息均<br/>可部分抵扣 -->
            <div v-html="$t('landing.l11')">
            </div>
          </td>
        </tr>
        <tr style="height: 4px;"></tr>
        <tr class="tr">
          <td class="left">
            <img class="icon" src="/img/landing/icon2.png" alt="JDNX">
            <div>
              <!-- 认证 -->
              {{ $t('landing.l12') }}
            </div>
          </td>
          <td style="padding: 2px;"></td>
          <td class="right">
            <div class="flex">
              <!-- 送 <span class="span">200USD</span> 赠金 -->
              <div class="text" v-html="$t('landing.l13')">
              </div>
              <img class="icon" src="/img/landing/icon5.png" alt="JDNX">
            </div>
            <!-- 完成身份认证获得，等同现金可直接用于交易，<br/>赚到的收益可直接取款 -->
            <div v-html="$t('landing.l14')">
            </div>
          </td>
        </tr>
        <tr style="height: 4px;"></tr>
        <tr class="tr">
          <td class="left">
            <img class="icon" src="/img/landing/icon3.png" alt="JDNX">
            <div>
              <!-- 交易 -->
              {{ $t('tab.tab3') }}
            </div>
          </td>
          <td style="padding: 2px;"></td>
          <td class="right">
            <div class="flex">
              <!-- 送 <span class="span">600USD</span> 现金券 -->
              <div class="text" v-html="$t('landing.l15')">
              </div>
              <img class="icon" src="/img/landing/icon4.png" alt="JDNX">
            </div>
            <!-- 达成指定交易额，即可获得最高600USD的现<br/>金 -->
            <div v-html="$t('landing.l16')">
            </div>
          </td>
        </tr>
      </table>
      <div class="btn" @click="formFocus">
        <!-- 立即注册 -->
        {{ $t('download.l47') }}
      </div>
    </section>
    <section class="section2">
      <div class="title">
        <!-- 股票交易平台千千万 为什么选择极度证券 -->
        {{ $t('landing.l17') }}
      </div>
      <van-row type="flex" gutter="9">
        <van-col span="12">
          <div class="col col1">
            <div class="sub">
              <!-- 最高20倍杠杆 -->
              {{ $t('landing.l18') }}
            </div>
            <div>
              <!-- 交易门槛低，一杯咖啡的钱即可开启美股、港股、A股交易 -->
              {{ $t('landing.l19') }}
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="col col2">
            <div class="sub">
              <!-- 双向交易 -->
              {{ $t('landing.l20') }}
            </div>
            <div>
              <!-- 买涨买跌皆可，A股也能实现T+0和做空 -->
              {{ $t('landing.l21') }}
            </div>
          </div>
        </van-col>
      </van-row>
      <van-row type="flex" gutter="9">
        <van-col span="12">
          <div class="col col3">
            <div class="sub">
              <!-- 交易灵活 -->
              {{ $t('landing.l22') }}
            </div>
            <div>
              <!-- 电脑、手机多端交易，不错过每一次行情 -->
              {{ $t('landing.l23') }}
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="col col4">
            <div class="sub">
              <!-- 实时的在线服务 -->
              {{ $t('landing.l24') }}
            </div>
            <div>
              <!-- 7*24小时在线客服，及时解决您的问题和需求 -->
              {{ $t('landing.l25') }}
            </div>
          </div>
        </van-col>
      </van-row>
      <van-row type="flex" gutter="9">
        <van-col span="12">
          <div class="col col5">
            <div class="sub">
              <!-- 交易成本更低 -->
              {{ $t('landing.l26') }}
            </div>
            <div>
              <!-- 不涉及实际资产的交割，不需要支付印花税或其他交割费用 -->
              {{ $t('landing.l27') }}
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="col col6">
            <div class="sub">
              <!-- 全面的投资产品 -->
              {{ $t('landing.l28') }}
            </div>
            <div>
              <!-- 除股票外，还有外汇、贵金属、加密货币等，轻松实现多样化投资 -->
              {{ $t('landing.l29') }}
            </div>
          </div>
        </van-col>
      </van-row>
      <div class="btn" @click="formFocus">
        <!-- 立即注册 -->
        {{ $t('download.l47') }}
      </div>
    </section>
    <footer class="footer">
      <div class="logo-box">
        <img class="logo" src="/img/landing/logo.png" alt="JDNX">
        <div>
          <!-- 极度证券简介 -->
          {{ $t('landing.l30') }}
        </div>
      </div>
      <div class="des">
        <div>
          <!-- 极度证券是一家总部位于新西兰，并在马来西亚设有全球运营中心，拥有美国和新西兰双金融牌照的股票交易券商 -->
          {{ $t('landing.l31') }}
        </div>
        <div>
          <!-- 我们为全球客户提供美股、A股、港股在线交易服务，可多空双向交易，最高20倍杠杆 -->
          {{ $t('landing.l32') }}
        </div>
      </div>
      <div class="icon-box flex">
        <a class="href" href="https://t.me/JDNXgroup" target="_blank">
          <img class="app" src="/img/landing/app1.png" alt="JDNX">
        </a>
        <a class="href" href="https://twitter.com/jdtrader_cn" target="_blank">
          <img class="app" src="/img/landing/app2.png" alt="JDNX">
        </a>
        <a class="href" href="https://www.tiktok.com/@jdtrader_cn" target="_blank">
          <img class="app" src="/img/landing/app3.png" alt="JDNX">
        </a>
        <a class="href" href="https://chat.whatsapp.com/LTy0KK74YySDwHXlF30AJn" target="_blank">
          <img class="app" src="/img/landing/app4.png" alt="JDNX">
        </a>
        <a class="href" href="https://www.facebook.com/jdtradercn/" target="_blank">
          <img class="app" src="/img/landing/app5.png" alt="JDNX">
        </a>
        <a class="href" href="https://www.youtube.com/@jdtraderofficial" target="_blank">
          <img class="app" src="/img/landing/app6.png" alt="JDNX">
        </a>
        <a class="href" href="https://www.linkedin.com/company/jdnx/" target="_blank">
          <img class="app" src="/img/landing/app7.png" alt="JDNX">
        </a>
      </div>
      <div class="router-box flex">
        <div class="item" @click="toStatement('1')">
          <!-- AML/KYC 政策 -->
          {{ $t('auth.l35') }}
        </div>
        <div class="item" @click="toStatement('privacy')">
          <!-- 隐私政策 -->
          {{ $t('about.l8') }}
        </div>
        <div class="item" @click="toStatement('user')">
          <!-- 用户协议 -->
          {{ $t('auth.l28') }}
        </div>
        <div class="item" @click="toStatement('tradeconfirm')">
          <!-- 交易确认书 -->
          {{ $t('statement.l12') }}
        </div>
        <div class="item" @click="toStatement('legal')">
          <!-- 法律声明 -->
          {{ $t('auth.l25') }}
        </div>
        <div class="item" @click="toStatement('risk')">
          <!-- 风险披露 -->
          {{ $t('auth.l26') }}
        </div>
      </div>
      <div class="text">
        <div class="bold">
          <!-- 合规声明 -->
          {{ $t('landing.l33') }}
        </div>
        <div>
          <!-- 这个网站由  JDTRADER PRIME LIMITED, 运营，注册地址位于 Level 3, 74 Taharoto Road, Takapuna, Auckland, 0622, New Zealand, FSP Number:  FSP1001348,  NZBN: 9429049502770 -->
          {{ $t('landing.l34') }}
        </div>
      </div>
      <div class="text">
        <div class="bold">
          <!-- 限制区域 -->
          {{ $t('landing.l35') }}
        </div>
        <div>
          <!-- 极度证券品牌不向美国、加拿大、海地、伊朗、苏里南、朝鲜民主主义人民共和国、波多黎各、巴西、塞浦路斯占领地区、叙利亚、朝鲜和古巴的居民提供服务 -->
          {{ $t('landing.l36') }}
        </div>
      </div>
      <div class="text">
        <div class="bold">
          <!-- 风险声明 -->
          {{ $t('landing.l37') }}
        </div>
        <div>
          <!-- 融资融券等金融衍生品属于复杂交易产品，由于杠杆作用，存在高风险导致损失资金的可能性。绝大多数零售投资者在进行衍生品交易时会亏损。重要的是仔细考虑自己是否了解金融衍生品交易的运作方式，并且能够承担高风险导致资金损失的可能性。在开始投资之前，请务必仔细阅读和理解我们的风险免责声明 -->
          {{ $t('landing.l38') }}
        </div>
      </div>
      <div class="text">
        <div class="bold">
          <!-- 风险提醒 -->
          {{ $t('landing.l39') }}
        </div>
        <div>
          <!-- 金融衍生品产品存在市场风险，杠杆商品可能不适合所有客户。请详细阅读我们的风险声明 -->
          {{ $t('landing.l40') }}
        </div>
      </div>
    </footer>
    <selectCountry :val="phoneCountry" ref="country" @back="selectCountryBack"/>
  </div>
</template>
<script>
import { setVantLang } from "@/lang";
import bus from '@/utils/bus'
import { updateUserLanguage } from "@/api/user";
import { emailList } from "@/utils/config";
import { Register, getVerifyCode, login } from "@/api/login";
import { setSession, delSession } from '@/utils/sessionStorage'
import { setCookie } from "@/utils/cookie";
import selectCountry from "@/components/selectCountry";
export default {
  components: {
    selectCountry
  },
  data () {
    return {
      showPopover: false,
      type: 1,
      form: {
        account: "",
        password: "",
      },
      checked: false,
      codeShow: false,
      type: '1',
      showPassword: 'password',
      showPassword1: 'password',
      loading: false,
      sendText: this.$t('register.l11'),
      sendDisable: false,
      timer: null,
      dialogVisible: false,
      readonly: true,
      recommendCodeDisabled: false,
      accountFocus: false,
      passwordFocus: false,
      codeFocus: false,
      recommendFocus: false,
      emailList: emailList,
      phoneCountry: {
        "name": "China (中国)",
        "code": "cn",
        "area_code": "86"
      },
      rules: {
      },
    }
  },
  computed: {
    languageText() {
      return {
        'zh-CN': '简体中文',
        'zh-TW': '繁体中文',
        'en': 'English',
        'ru': 'English',
        'th': 'English',
        'vi': 'Tiếng Việt',
      }
    },
    rule1() {
      return /^.{8,20}$/.test(this.form.password.trim())
    },
    rule2() {
      return /\d/.test(this.form.password.trim())
    },
    rule3() {
      return /[a-zA-Z]/.test(this.form.password.trim())
    }
  },
  watch: {
    type() {
      this.form.account = ''
      clearInterval(this.timer)
      this.sendText = this.$t('register.l11')
      this.sendDisable = false
      this.readonly = true
      setTimeout(() => {
        this.readonly = false
      }, 200)
    }
  },
  mounted() {
    setTimeout(() => {
      this.readonly = false
    }, 200)
  },
  methods: {
    submit() {
      if (this.loading) {
        return;
      }
      if (!this.checked) {
        // 请阅读并同意用户协议与个人隐私条款
        this.$toast(this.$t('landing.l41'));
        return
      }
      var account = ''
      if (this.type == 1) {
        if (!this.form.account.trim()) {
          // 请输入手机号码
          this.$toast(this.$t('setting.l37'));
          return
        }
        account = this.phoneCountry.area_code + this.form.account.trim()
      }
      if (this.type == 2) {
        if (!this.form.account.trim()) {
          // 请输入邮箱地址
          this.$toast(this.$t('login.l2'));
          return
        }
        var emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!emailReg.test(this.form.account.trim())) {
          // 邮箱格式不正确
          this.$toast(this.$t('login.email-reg'));
          return
        }
        account = this.form.account.trim()
      }
      if (!this.form.verifyCode.trim()) {
        // 请输入验证码
        this.$toast(this.$t('register.l12'));
        return
      }
      if (!this.form.password.trim()) {
        // 请输入密码
        this.$toast(this.$t('login.l3'));
        return
      }
      var passwordReg = /^(?=.*[a-zA-Z])(?=.*\d).{8,20}$/;
      if (!passwordReg.test(this.form.password.trim())) {
        // 8-20位字符, 必须包括数字和字母
        this.$toast(this.$t('login.password-reg'));
        return
      }
      // if (this.form.password1.trim() !== this.form.password.trim()) {
      //   this.$toast('密码输入不一致');
      //   return
      // }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.fullscreenLoading = true
          Register({
            account: account,
            password: this.form.password,
            verifyCode: this.form.verifyCode,
            area_code: this.phoneCountry.area_code
          })
            .then((res) => {
              this.$notify({
                // message: '注册成功',
                message: this.$t('register.l13'),
                type: 'success'
              });
              login({
                account: account,
                password: this.form.password,
                client: this.getClient(),
              }).then((res) => {
                bus.$emit('socketInit')
                this.$store.commit('SET_LOGIN', true)
                this.$store.commit('setToken', res.token)
                setCookie("userToken", res.token)
                this.$store.dispatch('getUserInfo', true)
                this.$store.dispatch('getProductUserList')
                this.$router.replace('/')
              })
              .finally(() => {
                this.fullscreenLoading = false;
                this.loading = false;
              })
              .catch(() => {
                this.$router.replace('/login')
              });
            }).catch(() => {
              this.fullscreenLoading = false;
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    getVerifyCode() {
      if (this.sendDisable) {
        return
      }
      var account = ''
      if (this.type == 1) {
        if (!this.form.account.trim()) {
          // 请输入手机号码
          this.$toast(this.$t('setting.l37'));
          return
        }
        account = this.phoneCountry.area_code + this.form.account.trim()
      }
      if (this.type == 2) {
        if (!this.form.account.trim()) {
          // 请输入邮箱地址
          this.$toast(this.$t('login.l2'));
          return
        }
        var emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!emailReg.test(this.form.account.trim())) {
          // 邮箱格式不正确
          this.$toast(this.$t('login.email-reg'));
          return
        }
        account = this.form.account.trim()
      }
      this.sendDisable = true
      getVerifyCode({
        account,
        type: this.type == 1 ? 'phone' : 'email',
        action: 'Register',
        language: this.language
      })
        .then((res) => {
          this.timerStart()
          setSession('phoneToken', res.token)
        })
        .catch(() => {
          this.sendDisable = false
        })
    },
    timerStart() {
      this.sendText = 60
      this.timer = setInterval(() => {
        if (this.sendText <= 1) {
          this.sendText = this.$t('register.l11')
          this.sendDisable = false
          clearInterval(this.timer)
          this.timer = null
        } else {
          this.sendText--
        }
      }, 1000)
    },
    countryShow() {
      this.$refs['country'].reset()
    },
    selectCountryBack(val) {
      this.phoneCountry = val
    },
    getClient() {
      var webLog = {}
      try {
      var userAgent = navigator.userAgent
      // 获取微信版本
      var m1 = userAgent.match(/MicroMessenger.*?(?= )/)
      if (m1 && m1.length > 0) {
        webLog.wechat = m1[0]
      }
      if (userAgent.includes('Windows')) {
        webLog.device = 'Windows'
      }
      // 苹果手机
      if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
        // 获取设备名
        if (userAgent.includes('iPad')) {
          webLog.device = 'iPad'
        } else {
          webLog.device = 'iPhone'
        }
        // 获取操作系统版本
        m1 = userAgent.match(/iPhone OS .*?(?= )/)
        if (m1 && m1.length > 0) {
          webLog.system = m1[0]
        }
      }
      // 安卓手机
      if (userAgent.includes('Android')) {
        // 获取设备名
        m1 = userAgent.match(/Android.*; ?(.*(?= Build))/)
        if (m1 && m1.length > 1) {
          webLog.device = m1[1]
        }
        // 获取操作系统版本
        m1 = userAgent.match(/Android.*?(?=;)/)
        if (m1 && m1.length > 0) {
          webLog.system = m1[0]
        }
      }
      } catch(err) {
      }
      return webLog.device || 'Mobile'
    },
    querySearch(queryString, cb) {
      if (!queryString.trim()) {
        cb([])
        return
      }
      var restaurants = this.emailList;
      var results = restaurants.filter(item => {
        var str = (this.form.account.split('@')[1]) || '';
        if (item.indexOf(str) !== -1 && str != item) {
          return {value: item}
        }
        return false
      })
      cb(results)
    },
    querySearch1(queryString, cb) {
      cb([{}])
    },
    clearEmail() {
      this.form.account = ''
      this.$nextTick(() => {
        this.$refs['email'].focus()
      })
    },
    handleSelect(item) {
      var str = (this.form.account.split('@')[0]) || '';
      this.form.account = str + '@' + item
      this.$refs['email'].focus()
    },
    getAccoutName() {
      var str = (this.form.account.split('@')[0]) || '';
      return str
    },
    selectLang(lan) {
      this.showPopover = false
      if (this.language == lan) {
        return
      }
      this.$store.commit('setLang', lan)
      bus.$emit('selectLang')
      this.$i18n.locale = lan
      setVantLang(lan)
      this.$store.commit('CHANGE_META_INFO', {
        title: this.$t('html.title'),
        description: this.$t('html.description'),
        keywords: this.$t('html.keywords')
      })
      if (this.isLogin) {
        updateUserLanguage({
          language: lan
        }).then(res => {}).catch(() => {})
      }
    },
    formFocus() {
      this.$refs['accout'] && this.$refs['accout'].focus();
      this.$refs['email'] && this.$refs['email'].focus();
    },
    toStatement(type) {
      if (this.$route.name == 'statement') {
        this.$router.replace('/statement/' + type)
        return
      }
      this.$router.push('/statement/' + type)
    }
  },
}
</script>
<style lang="less" scoped>
@r: 3.75vw;
.header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 11px 16px;
  justify-content: space-between;
  column-gap: 10px;
  background: #202C43;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
  color: #fff;
  font-size: 12px;
  
  .left {
    flex: 1;
    min-width: 0px;
  }
  .right {
    column-gap: 20px;
  }
  .href {
    cursor: pointer;
    background: #FF6301;
    border-radius: 4px;
    padding: 9px 10px;
  }
  .lan-box {
    column-gap: 4px;
    cursor: pointer;
    .icon {
      width: 12px;
    }
  }
  .logo-box {
    margin-bottom: 7px;
    .logo {
      display: block;
      width: 20px;
      margin-right: 4px;
    }
  }
}
.top {
  background-image: url('@/assets/img/landing/bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: (110/@r) (20/@r) (21/@r) (32/@r);
  .title {
    font-weight: 600;
    font-size: (22/@r);
    color: #FF5A00;
    letter-spacing: 2px;
    text-shadow: 2px 2px 2px rgba(255,25,19,0.37);
    text-stroke: 1px #FF5A00;
    padding-bottom: (8/@r);
  }
  .sub {
    font-weight: 600;
    font-size: (16/@r);
    color: #FFF2D4;
    text-shadow: 2px 2px 3px rgba(255,61,3,0.5);
  }
}
.en {
  .top {
    padding: (140/@r) (20/@r) (21/@r) (32/@r);
  }
  .box1 {
    padding-top: 4px;
    row-gap: 6px;
  }
}
.box {
  color: #0037FF;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  text-stroke: 1px #0037FF;
  column-gap: 6px;
  font-size: (14/@r);
  padding-bottom: (38/@r);
  .number {
    font-size: (30/@r);
  }
}
.box1 {
  column-gap: 10px;
  color: #FFF2D4;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  row-gap: 10px;
  .left {
    column-gap: 10px;
    .line {
      width: 1px;
      height: 14px;
      background: linear-gradient( 180deg, rgba(238,238,238,0) 0%, #F5BE52 49%, rgba(216,216,216,0) 100%);
    }
  }
}
.popover-body {
  padding: 10px 0;
  .item {
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    color: #202C43;
    padding: 10px 0;
    width: 96px;
  }
}
.section {
  padding: 30px 46px;
  .tabs {
    border-radius: 4px;
    border: 1px solid #D8D8D8;
    padding: 3px;
    column-gap: 8px;
    display: flex;
  }
  .tab {
    cursor: pointer;
    flex: 1;
    padding: 6px;
    color: #202C43;
    justify-content: center;
    text-align: center;
    &.active {
      background: #202C43;
      border-radius: 2px;
      color: #FFFFFF;
    }
  }
}
.login-land {
  padding-top: 24px;
  .el-form-item {
    margin-bottom: 20px;
  }
  .el-autocomplete {
    display: block;
    border-radius: 4px;
    border: 1px solid #D8D8D8;
    margin-bottom: 16px;
    &.focus {
      border-color: #888888;
    }
  }
}
.area-box {
  width: 64px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  color: #202C43;
  border-right: 1px solid #202C43;
  justify-content: center;
  column-gap: 2px;
}
.code-box {
  .el-input {
    flex: 1;
  }
  .send {
    min-width: 96px;
    line-height: 40px;
    text-align: center;
    background: #202C43;
    border-radius: 0px 4px 4px 0px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    padding: 0 6px;
  }
}
.suffix {
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding-right: 11px;
}
.van-icon {
  color: #000;
  font-size: 16px;
  cursor: pointer;
}
.eye {
  display: block;
  width: 20px;
}
.href {
  cursor: pointer;
}
.label {
  color: #7D8080;
  font-size: 14px;
  padding-top: 2px;
  padding-bottom: 12px;
  cursor: pointer;
  .el-icon-caret-bottom {
    transition: transform 0.4s;
    &.active {
      transform: rotateZ(-180deg);
    }
  }
}
.rule-box {
  padding: 0 16px;
  .rule {
    column-gap: 6px;
    &.active {
      color: #000;
    }
  }
  .check {
    width: 14px;
  }
}
.btn-box {
  padding: 0px 3px;
  margin-top: 20px;
  word-break: break-all;
  height: 40px;
  cursor: pointer;
  font-weight: 600;
  color: #FFFFFF;
  background: linear-gradient( 192deg, #2352FF 0%, #0037FF 100%);
  border-radius: 4px;
  justify-content: center;
  column-gap: 4px;
  .icon {
    min-width: 14px;
    max-width: 14px;
  }
}
.href1 {
  display: flex;
  align-items: flex-start;
  color: #616161;
  font-size: 12px;
  cursor: pointer;
  line-height: 12px;
  .check {
    width: 12px;
    margin-right: 4px;
  }
  .active {
    color: #0037FF;
  }
}
.section1 {
  padding: 20px 16px;
  .title {
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .tip {
    text-align: center;
    color: #888888;
    margin-bottom: 20px;
  }
}
table {
  border-collapse: collapse;
}
.tr {
  &+.tr {
    margin-top: 4px
  }
  .left {
    background: #FFFAEE;
    min-width: 62px;
    font-weight: 600;
    color: #202C43;
    text-align: center;
    padding: 0 2px;
    .icon {
      display: block;
      width: 28px;
      margin: 0 auto 10px;
    }
  }
  .right {
    width: 100%;
    background: #FFFAEE;
    padding: 11px 9px 11px 16px;
    line-height: 22px;
    color: #202C43;
    font-size: 12px;
    .text {
      min-width: 0px;
    }
    .icon {
      height: 12px;
      margin-left: 4px;
    }
  }
}
.btn {
  text-align: center;
  font-weight: 600;
  color: #FFFFFF;
  background: linear-gradient( 156deg, #FF9D2D 0%, #FF6301 100%);
  border-radius: 4px;
  line-height: 40px;
  margin-top: 30px;
  cursor: pointer;
}
.section2 {
  padding: 20px 15px;
  .title {
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 33px;
  }
  .van-row + .van-row {
    margin-top: 9px;
  }
  .col {
    height: 100%;
    padding: 16px 12px;
    font-size: 12px;
    line-height: 18px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .col1 {
    background-image: url('@/assets/img/landing/bg1.png');
  }
  .col2 {
    background-image: url('@/assets/img/landing/bg2.png');
  }
  .col3 {
    background-image: url('@/assets/img/landing/bg3.png');
  }
  .col4 {
    background-image: url('@/assets/img/landing/bg4.png');
  }
  .col5 {
    background-image: url('@/assets/img/landing/bg5.png');
  }
  .col6 {
    background-image: url('@/assets/img/landing/bg6.png');
  }
  .sub {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1;
  }
}
.footer {
  padding: 20px 16px;
  color: #FFFFFF;
  background: linear-gradient( 156deg, #FF9D2D 0%, #FF6301 100%);
  .logo-box {
    justify-content: center;
    column-gap: 6px;
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: end;
    .logo {
      width: 18px;
    }
  }
  .des {
    font-size: 12px;
    line-height: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  .icon-box {
    justify-content: flex-end;
    padding-top: 20px;
    column-gap: 12px;
    .app {
      width: 22px;
      display: block;
    }
  }
  .router-box {
    justify-content: flex-end;
    flex-wrap: wrap;
    white-space: nowrap;
    column-gap: 7px;
    row-gap: 5px;
    font-size: 10px;
    line-height: 12px;
    padding-top: 14px;
    padding-bottom: 6px;
    .item {
      cursor: pointer;
    }
  }
  .text {
    font-size: 10px;
    line-height: 16px;
    padding-top: 14px;
    .bold {
      font-weight: 600;
    }
  }
}
::v-deep{
  .box1 {
    .span {
      font-size: 24px;
      color: #2252FF;
      vertical-align: baseline;
    }
  }
  .cell {
    .right {
      .span {
        color: #0037FF;
        font-weight: 600;
      }
    }
  }
  .login-land {
    .el-form-item__content {
      border-radius: 4px;
      border: 1px solid #D8D8D8;
    }
    .el-form-item,.el-autocomplete {
      &.focus {
        .el-form-item__content {
          border-color: #888888;
        }
      }
      .el-input__inner {
        height: 40px;
        border-radius: 4px;
        line-height: 40px;
        font-size: 12px;
        border: none;
        padding-left: 13px;
        background-color: transparent !important;
      }
      .el-input-group {
        .el-input__inner {
          padding-left: 13px;
        }
      }
      .el-input-group__prepend {
        background-color: transparent;
        border: none;
        padding: 0;
      }
    }
  }
}
</style>
<style lang="less">
.van-popover {
  .van-popover__arrow {
    display: none;
  }
}
</style>