<template>
  <view class="main">
     <!-- #ifdef H5 -->
     <view class="downloadBox" v-if="closePopup">
      <image class="logoImg"
        src="/static/img/logo.76c4d986.png"
      ></image>
      <view class="textAlert">{{$lang.lang.integral.downloadTitle}}</view>
      <view class="downloadBtn" @click="handleDownload">{{$lang.lang.integral.downloadBtn}}</view>
      <view class="closeBtn-l" @click="closePopup= false">X</view>
    </view>
   <!-- #endif -->
    <view class="login-top">
      <image
        src="../../static/img/back.png"
        @click="$request.backGo()"
        mode=""
      ></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>
		  <picker class="login-code" :range="smsName" @change="sendCode" v-else>
		    <view class="uni-input">{{ $lang.lang.login.code }}</view>
		  </picker>
        </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,
      mobile: "",
      password: "",
      passworded: "",
      code: "",
      agree: false,
      areaData: [],
      areaName: [],
      leftTime: 60,
      referralCode: "",
	  smsName: ['SMS','WhatsApp'],
	  smsData: [1,2],
	  smsIndex: 0
    };
  },
  onLoad() {
    this.Country();
    this.referralCode= this.$route.query.code
  },
  methods: {
    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;
    },
    sendCode(e) {
      if (this.mobile == "") {
        return uni.showToast({
          title: this.$lang.lang.notices.phone,
          icon: "none",
        });
      }
      if (this.leftTime < 60) {
        return false;
      }
	  var data = {
	    mobile: this.mobile,
	    nodeValue: 'user-sms-reg',
	    areaCode: this.areaData[this.areaIndex],
		code: this.areaData[this.areaIndex],
	    isTransport: 0,
	    transportId: 0,
	    isOrders: 0,
	    messageType: this.smsData[e.detail.value]
	  }

	  this.$request
	    .get("/app-api/param/validator/mobile", data)
	    .then((res) => {
	      if (res.code == 0) {
	        this.$request
	          .post("/app-api/member/send-sms-code", data)
	          .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",
	        });
	      }
	    });
    },
    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/reg", params).then((res) => {
        if (res.code == 0 && res.data) {
          uni.setStorageSync("Authorization", res.data.token);
          uni.reLaunch({
            url: "/pages/my_info/my_info?type=first",
          });
        } 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;
}
.login-area picker{
	width: 100upx;
}
</style>
