<template>
  <view class="main">
    <!-- <view class="login-top">
      <image src="../../static/img/back.png" @click="$request.backGo()" mode=""></image>
    </view> -->
    <view class="login-top">
      <image
        v-if="locale == 'en'"
        src="../../static/img/zh.png"
        mode=""
        @click="changeLang('zh')"
      ></image>
      <image
        v-if="locale == 'zh'"
        src="../../static/img/en.png"
        mode=""
        @click="changeLang('en')"
      ></image>
    </view>
    <view class="logo">
      <image src="../../static/img/logo.png" mode=""></image>
      <text>{{ $lang.lang.login.title }}</text>
    </view>
    <view class="login-item">
      <view class="login-v">
        <view class="login-vs">
          <image src="../../static/img/phone.png" mode=""></image>
        </view>
        <view class="login-vp login-phone">
          <view class="login-area">
            <picker :value="areaIndex" :range="areaName" @change="areaChange">
              <view class="uni-input">{{ $request.checkAddIcon(areaData[areaIndex]) }}</view>
            </picker>
            <image src="../../static/img/more.png" mode=""></image>
          </view>
          <input
            class="vp-input"
            v-model="mobile"
            type="number"
            placeholder-style="color: #ffffff"
            :placeholder="$lang.lang.notices.phone"
          />
        </view>
      </view>
      <view class="login-v">
        <view class="login-vs">
          <image src="../../static/img/code.png" mode=""></image>
        </view>
        <view class="login-vp">
          <input
            class="vp-input"
            v-model="code"
            type="number"
            placeholder-style="color: #ffffff"
            :placeholder="$lang.lang.notices.code"
          />
          <view class="login-code" v-if="leftTime < 60">{{ leftTime }}S</view>
          <view class="login-code" v-else @click="sendCode">{{ $lang.lang.login.code }}</view>
        </view>
      </view>
      <view class="login-v">
        <view class="login-vs">
          <image src="../../static/img/pass.png" mode=""></image>
        </view>
        <view class="login-vp">
          <input
            class="vp-input"
            v-model="password"
            type="password"
            placeholder-style="color: #ffffff"
            :placeholder="$lang.lang.notices.numPsd"
          />
        </view>
      </view>
      <view class="login-v">
        <view class="login-vs">
          <image src="../../static/img/safe.png" mode=""></image>
        </view>
        <view class="login-vp">
          <input
            class="vp-input"
            v-model="passworded"
            type="password"
            placeholder-style="color: #ffffff"
            :placeholder="$lang.lang.notices.nextPsd"
          />
        </view>
      </view>
      <view class="login-v">
        <view class="login-vs">
          <image src="../../static/img/recommend.png" mode=""></image>
        </view>
        <view class="login-vp">
          <input
            class="vp-input"
            v-model="referralCode"
            type="text"
            placeholder-style="color: #ffffff"
            :placeholder="$lang.lang.notices.recommend"
          />
        </view>
      </view>
    </view>
    <view class="login-btns">
      <view class="" @click="register">{{ $lang.lang.login.register }}</view>
    </view>
    <view class="agree" @click="agree = !agree">
      <image
        :src="agree ? '../../static/img/check_true.png' : '../../static/img/check_false.png'"
        mode=""
      ></image>
      <view
        >{{ $lang.lang.notices.read
        }}<text @click="showUser">《{{ $lang.lang.notices.service }}》</text></view
      >
    </view>
    <user-agreement ref="userment" />
  </view>
</template>

<script>
import userAgreement from '../../components/userAgreement/index.vue'
export default {
  components: {
    userAgreement
  },
  data() {
    return {
      closePopup: true,
      areaIndex: 0,
      locale: this.$request.getLocale(),
      mobile: '',
      password: '',
      passworded: '',
      code: '',
      agree: false,
      areaData: [],
      areaName: [],
      leftTime: 60,
      referralCode: ''
    }
  },
  onLoad() {
    this.Country()
    this.referralCode = this.$route.query.code
  },
  methods: {
    changeLang(data) {
      this.locale = data
      // this.getLeviteData()
      uni.setStorageSync('locale', data)
      this.$lang.setLang(data)
      // #ifdef H5
      window.location.reload();
      // #endif
    },
    handleDownload() {
      if (uni.getSystemInfoSync().platform === 'android') {
        console.log('运行Android上')
        window.open('https://www.pgyer.com/qHcSOD1F', '_blank')
      } else {
        window.open('https://apps.apple.com/cn/app/e-c-logistics/id6466407990', '_blank')
        console.log('运行iOS上')
      }
    },
    showUser() {
      this.$refs.userment.open()
    },
    Country() {
      this.$request.get('/app-api/ecw/country/list-all').then((res) => {
        if (res.code == 0 && res.data.length > 0) {
          for (let i in res.data) {
            this.areaData.push(res.data[i].tel)
            if (this.$lang.locale == 'zh') {
              this.areaName.push('+' + res.data[i].tel + ' ' + res.data[i].nameZh)
            } else if (this.$lang.locale == 'en'){
              this.areaName.push('+' + res.data[i].tel + ' ' + res.data[i].nameEn)
            } else {
				this.areaName.push('+' + res.data[i].tel + ' ' + res.data[i].nameFr)
			}
          }
        }
      })
    },
    areaChange(e) {
      this.areaIndex = e.detail.value
    },
    ismobile(code, mobile) {
      this.$request
        .get('/app-api/param/validator/mobile', { code: code, mobile: mobile })
        .then((res) => {
          if (res.code == 0) {
            this.$request
              .post('/app-api/member/send-sms-code', {
                areaCode: this.areaData[this.areaIndex],
                mobile: this.mobile,
                scene: 0
              })
              .then((res) => {
                if (res.code == 0) {
                  this.countDown()
                } else {
                  uni.showToast({
                    title: res.msg || 'error',
                    icon: 'none'
                  })
                }
              })
          } else {
            uni.showToast({
              title: this.$lang.lang.notices.nophone,
              icon: 'none'
            })
          }
        })
    },
    sendCode() {
      if (this.mobile == '') {
        return uni.showToast({
          title: this.$lang.lang.notices.phone,
          icon: 'none'
        })
      }
      if (this.leftTime < 60) {
        return false
      }
      this.ismobile(this.areaData[this.areaIndex], this.mobile)
    },
    countDown() {
      this.leftTime--
      if (this.leftTime > 0) {
        setTimeout(this.countDown, 1000)
      } else {
        this.leftTime = 60
      }
    },
    register() {
      let params = {
        areaCode: this.areaData[this.areaIndex],
        code: this.code,
        englishName: '',
        mobile: this.mobile,
        password: this.password,
        referralCode: this.referralCode,
        registerPlatform: '2'
      }
      if (this.mobile == '') {
        return uni.showToast({
          title: this.$lang.lang.notices.phone,
          icon: 'none'
        })
      }
      if (this.code == '') {
        return uni.showToast({
          title: this.$lang.lang.notices.code,
          icon: 'none'
        })
      }
      if (this.password == '') {
        return uni.showToast({
          title: this.$lang.lang.notices.password,
          icon: 'none'
        })
      }
      if (this.passworded == '') {
        return uni.showToast({
          title: this.$lang.lang.notices.nextPsd,
          icon: 'none'
        })
      } else {
        var reg1 = new RegExp('^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,32})$')
        if (!reg1.test(this.passworded)) {
          return uni.showToast({
            title: this.$lang.lang.notices.numPsd,
            icon: 'none'
          })
        }
      }
      if (this.password != this.passworded) {
        return uni.showToast({
          title: this.$lang.lang.notices.different,
          icon: 'none'
        })
      }
      if (!this.agree) {
        return uni.showToast({
          title: this.$lang.lang.notices.chooseService,
          icon: 'none'
        })
      }

      this.$request.post('/app-api/member/share-page/reg', params).then((res) => {
        if (res.code == 0 && res.data) {
          // uni.setStorageSync('Authorization', res.data.token)
          uni.reLaunch({
            url: '/pages/register/downloadTips'
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>
<style>
@import url(../../static/css/register.css);
.downloadBox {
  height: 100upx;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #373333c7;
  padding: 10upx 54upx;
  display: flex;
  z-index: 10;
  align-items: center;
}
.textAlert {
  padding: 0 40upx;
  color: #fff;
}
.logoImg {
  height: 60upx;
  width: 60upx;
}
.downloadBtn {
  background: #5ba8dc;
  padding: 4upx 20upx;
  color: #fff;
  font-size: 36upx;
  border-radius: 100px;
}
.closeBtn-l {
  color: #fff;
  font-size: 24upx;
  padding: 8px;
  top: 0px;
  position: absolute;
  right: 70px;
}
</style>
