<template>
  <view class="main">
    <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>
      <text v-if="loginType == 1" @click="loginChange">{{ $lang.lang.login.textLogin }}</text>
      <text v-if="loginType == 2" @click="loginChange">{{ $lang.lang.login.psdLogin }}</text>
    </view>
    <view class="logo1">
      <text>{{ $lang.lang.deletion.deletion }}</text>
    </view>
    <view class="logo">
      <image src="../../static/img/logo.png" mode=""></image>
      <text>{{ $lang.lang.login.title }}</text>
    </view>
    <view class="login-item" v-if="loginType == 1">
      <view class="login-v">
        <view class="login-vs">
          <image src="../../static/img/phone.png" mode=""></image>
        </view>
        <view class="login-vp">
          <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/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.password"
          />
          <text class="forget" @click="$request.goPage('../forget/forget')"
            >{{ $lang.lang.login.forPsd }}?</text
          >
        </view>
      </view>
    </view>

    <view class="login-item" v-if="loginType == 2">
      <view class="login-v">
        <view class="login-vs">
          <image src="../../static/img/phone.png" mode=""></image>
        </view>
        <view class="login-vp">
          <view class="area">
            <picker :value="areaIndex" :range="areaName" @change="areaChange">
              <view class="uni-input">{{ $request.checkAddIcon(areaData[areaIndex]) }}</view>
            </picker>
            <image src="../../static/img/down.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="code"
            placeholder-style="color: #ffffff"
            :placeholder="$lang.lang.notices.code"
          />
          <text class="code" v-if="leftTime < 60">{{ leftTime }}S</text>
          <text class="code" @click="sendCode" v-else>{{ $lang.lang.login.code }}</text>
        </view>
      </view>
    </view>

    <view class="login-btns">
      <view class="" @click="login">{{ $lang.lang.login.loginBtn }}</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>
    <uni-popup ref="userment" type="center">
      <view class="lending_content">
        <view class="lending_info">
          <rich-text :nodes="leviteInfo"></rich-text>
        </view>
        <view class="lending_btns">
          <view @click="$refs.userment.close()">{{ $lang.lang.login.close }}</view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="vepopup" type="center" :mask-click="false">
      <view class="ad-conten">
        <image
          v-if="!forceUpdate"
          @click="closeVe"
          class="ad-bg"
          src="../../static/img/index_close.png"
        ></image>
        <view class="ad-title">V{{ appVersion }}{{ $lang.lang.notices.newVersion }}</view>
        <view class="ad-info">
          <rich-text :nodes="veData"></rich-text>
        </view>
        <view class="ad-btns">
          <view class="ad-btn" @click="toupdate">
            <view>{{ $lang.lang.notices.update }}</view>
          </view>
          <view v-if="!forceUpdate" class="ad-btn" @click="closeVe">
            <view>{{ $lang.lang.notices.close }}</view>
          </view>
        </view>
        <view class="progress" v-if="showdownLine">
          <progress :percent="downloadNum" show-info stroke-width="3" />
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import userAgreement from '../../components/userAgreement/index.vue'
import deletion from "@/static/lang/en/deletion";

export default {
  computed: {
    deletion() {
      return deletion
    }
  },
  components: {
    userAgreement
  },
  data() {
    return {
      leftTime: 60,
      areaIndex: 0,
      areaData: [],
      areaName: [],
      loginType: 1,
      closePopup:true,
      leviteInfo: '',
      mobile: '',
      password: '',
      code: '',
      agree: false,
      locale: this.$request.getLocale(),
      veData: 0,
      versionCode: 0,
      appVersion: '',
      forceUpdate: 0,
      showdownLine: false,
      downloadNum: 0, //下载百分比
      totalSize: 0 //下载总量
    }
  },
  onLoad() {
    this.watchWork()
    this.Country()
    this.getLeviteData()
    //#ifdef APP-PLUS
    this.getVersion()
    this.getVeData()
    //#endif
  },
  methods: {
    showUser() {
      this.$refs.userment.open()
    },
    Country() {
      let that = this
      that.$request.get('/app-api/ecw/country/list-all').then((res) => {
        console.log(res)
        if (res.code == 0 && res.data.length > 0) {
          for (let i in res.data) {
            that.areaData.push(res.data[i].tel)
            if (that.locale == 'zh') {
              that.areaName.push('+' + res.data[i].tel + ' ' + res.data[i].nameZh)
            } else {
              that.areaName.push('+' + res.data[i].tel + ' ' + res.data[i].nameEn)
            }
          }
        }
      })
    },
    areaChange(e) {
      this.areaIndex = e.detail.value
    },
    changeLang(data) {
      this.locale = data
      this.getLeviteData()
      uni.setStorageSync('locale', data)
      this.$lang.setLang(data)
    },
    getLeviteData() {
      let that = this
      that.$request.get('/app-api/system/need-know/getByKey', { key: '5' }).then((res) => {
        if (res.code == 0 && res.data) {
          if (that.$lang.locale == 'zh') {
            that.leviteInfo = res.data.contentZh
          } else {
            that.leviteInfo = res.data.contentEn
          }
        }
      })
    },
    login() {
      if (this.mobile == '') {
        return uni.showToast({
          title: this.$lang.lang.notices.phone,
          icon: 'error'
        })
      }

      if (this.password == '' && this.loginType == 1) {
        return uni.showToast({
          title: this.$lang.lang.notices.password,
          icon: 'error'
        })
      }

      if (this.code == '' && this.loginType == 2) {
        return uni.showToast({
          title: this.$lang.lang.notices.code,
          icon: 'error'
        })
      }

      if (!this.agree) {
        return uni.showToast({
          title: this.$lang.lang.notices.chooseService,
          icon: 'none'
        })
      }
      let url = ''
      let param = {}
      url = this.loginType == 1 ? '/app-api/member/login' : '/app-api/member/sms-login'
      param =
        this.loginType == 1
          ? { mobile: this.mobile, password: this.password }
          : { areaCode: this.areaData[this.areaIndex], mobile: this.mobile, code: this.code }
      let that = this
      that.$request.post(url, param).then((res) => {
        if (res.code == 0 && res.data) {
          uni.setStorageSync('Authorization', res.data.token)
          that.getUserInfo()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    sendCode() {
      if (this.mobile == '') {
        return uni.showToast({
          title: this.$lang.lang.notices.phone,
          icon: 'error'
        })
      }
      if (this.leftTime < 60) {
        return false
      }
      this.$request
        .post('/app-api/member/send-sms-code', {
          areaCode: this.areaData[this.areaIndex],
          mobile: this.mobile,
          scene: 1
        })
        .then((res) => {
          if (res.code == 0) {
            this.countDown()
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
    },
    countDown() {
      this.leftTime--
      if (this.leftTime > 0) {
        setTimeout(this.countDown, 1000)
      } else {
        this.leftTime = 60
      }
    },
    loginChange() {
      this.loginType = this.loginType == 1 ? 2 : 1
    },
    watchWork() {
      let that = this
      uni.onNetworkStatusChange(function (res) {
        console.log(res.isConnected)
        if (res.isConnected && that.areaName.length == 0) {
          that.Country()
          that.getLeviteData()
        }
      })
    },
    toupdate() {
      let that = this
      if (that.showdownLine) return
      // #ifdef APP-PLUS

      let platform = uni.getSystemInfoSync().platform.toLocaleLowerCase()
      if (platform == 'ios') {
        plus.runtime.openURL('https://apps.apple.com/us/app/e-c-logistics/id6466407990')
      } else {
        uni.showLoading({
          title: this.$lang.lang.notices.startDown
        })
        that.showdownLine = true
        var dtask = plus.downloader.createDownload(that.appUrl, {}, (d, status) => {
          uni.hideLoading()
          if (status == 200) {
            that.closeVe()
            that.showdownLine = false
            console.log('下载成功安装: ' + d.filename)
            plus.runtime.install(d.filename)
          } else {
            that.showdownLine = false
            that.closeVe()
            plus.nativeUI.alert(that.$lang.lang.notices.failDown)
          }
        })

        // uni.navigateTo({
        // 	url:'../updateView/updateView?url='+this.appUrl
        // })
        // 下载进度
        dtask.addEventListener('statechanged', function (download, status) {
          if (that.downloadNum == 100) {
            uni.hideLoading()
          }
          switch (download.state) {
            case 2:
              break
            case 3: //进度条百分比 totalSize为总量，baifen为当前下载的百分比
              if (that.totalSize == 0) {
                that.totalSize = parseInt(download.totalSize)
              }
              if (parseInt((download.downloadedSize / that.totalSize) * 100) != that.downloadNum) {
                that.downloadNum = parseInt((download.downloadedSize / that.totalSize) * 100)
              }
              break
            case 4:
              // mui.toast("下载完成");
              uni.hideLoading()
              break
          }
        })
        dtask.start()
      }
      // #endif
    },
    getVersion() {
      this.version = uni.getStorageSync('appversion')
      this.versionCode = uni.getStorageSync('versionCode')
    },
    getVeData() {
      let that = this
      var addType = uni.getSystemInfoSync().platform == 'ios' ? 'userIos' : 'userAndroid'
      that.$request
        .get('/app-api/system/version/latestVersion', {
          appType: addType,
          versionCode: that.versionCode
        })
        .then((res) => {
          console.log(res)
          if (res.code == 0 && res.data) {
            that.veData = res.data.desp
            that.appUrl = res.data.appUrl
            that.appVersion = res.data.appVersion
            that.forceUpdate = res.data.forceUpdate
            that.openVe()
          }
        })
    },
    openVe() {
      this.$refs.vepopup.open()
    },
    closeVe() {
      this.$refs.vepopup.close()
    },
    // 获取个人信息
    async getUserInfo() {
      try {
        const { code, data } = await this.$request.get('/app-api/member/user/get')
        if (code == 0 && data) {
          const { country } = data
          if (country) {
            uni.reLaunch({
              url: './deletion'
            })
          }
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
<style>
@import url(../../static/css/login.css);
</style>
<style scoped>
.logo1{
  padding: 10px 50px;
  display: flex;
  align-items: center;
}
.logo1 uni-text{
  text-align: center;
  font-size: 20px;
  margin-left: 10px;
  font-weight: 700;
  color: red;
}
</style>
