<script>
import Vue from 'vue'
import VueQr from 'vue-qr'
import countryCode from '@/lib/countryCode.json'
import { getWechatLogin, getWechatStatus, getGoogleLogin, getLinkedinLogin, bindPhone, sendSmsCode } from '@/api/user'
export default Vue.extend({
  name: 'ThirdLogin',
  components: {
    VueQr
  },
  props: {
    login_type: {
      type: String,
      default: ''
    },
    third_token: {
      type: String,
      default: ''
    },
    is_back: {
      type: Boolean,
      default: false
    },
    need_bind: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      countryCode,
      country_code: '86',
      phone: '',
      code: '',
      code_timer: null,
      count: 0,
      loading: false,

      timer: null,
      wechat_info: ''
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    clearInterval(this.code_timer)
    clearInterval(this.timer)
  },
  methods: {
    init() {
      if (!this.is_back) {
        if (this.login_type === 'wechat') {
          this.initWechatLogin()
        }
        if (this.login_type === 'google') {
          this.initGoogleLogin()
        }
        if (this.login_type === 'linkin') {
          this.initLinkinLogin()
        }
      }
    },
    bind() {
      if (this.loading) {
        return
      }
      bindPhone(this.phone, this.code, this.country_code, 1, this.third_token).then(res => {
        if (res.data.api_token) {
          this.$emit('tokenLogin', res.data.api_token)
          this.$notify({
            title: '提示',
            message: '绑定成功',
            type: 'success'
          })
        } else {
          this.$notify({
            title: '提示',
            message: '令牌获取失败',
            type: 'warning'
          })
        }
      }).catch(err => {
        this.$notify({
          title: '提示',
          message: '绑定失败',
          type: 'warning'
        })
      })
    },
    sentSMSCode() {
      if (this.loading || this.code_timer) {
        return
      }
      if (!this.phone) {
        this.$notify({
          title: '提示',
          message: '请填写手机号码',
          type: 'warning'
        })
        return
      }
      this.loading = true
      sendSmsCode(this.phone, this.country_code).then(res => {
        this.$notify({
          title: '发送成功',
          message: '短信验证码已发送，请注意查收',
          type: 'success'
        })
        this.count = 60
        this.code_timer = setInterval(() => {
          if (this.count > 0) {
            this.count--
          } else {
            clearInterval(this.code_timer)
            this.code_timer = null
          }
        }, 1000)
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    initGoogleLogin() {
      getGoogleLogin().then(res => {
        const google_info = res.data
        const url = new URL(google_info.url)
        url.searchParams.set('redirect_uri', location.origin + '/login')
        location.href = url
      })
    },
    initLinkinLogin() {
      getLinkedinLogin().then(res => {
        console.log(res)
        const linkedin_info = res.data
        const url = new URL(linkedin_info.url)
        url.searchParams.set('redirect_uri', location.origin + '/login')
        location.href = url
      })
    },
    initWechatLogin() {
      getWechatLogin().then(res => {
        this.wechat_info = res.data
        this.timer = setInterval(() => {
          getWechatStatus(this.wechat_info.wechatcode).then(status => {
            if (status.data.api_token) {
              clearInterval(this.timer)
              this.$emit('tokenLogin', status.data.api_token)
            } else if (status.data.third_token) {
              clearInterval(this.timer)
              this.$emit('update:need_bind', true)
              this.$emit('update:third_token', status.data.third_token)
            } else {}
          })
        }, 3000)
      })
    }
  }
})
</script>

<template>
  <div class="root">
    <div v-if="need_bind" class="bind-box wechat-login">
      <div class="title">
        <span class="text">绑定至会邦账号</span>
      </div>
      <div class="two-logo">
        <div class="mini-logo">
          <img v-if="login_type === 'wechat'" src="/static/image/icon/wechat.png">
          <img v-if="login_type === 'google'" src="/static/image/icon/google.png">
          <img v-if="login_type === 'linkin'" src="/static/image/icon/linkin.png">
        </div>
        <div class="el-icon-link icon" />
        <div class="mini-logo maychexpo">
          <img src="/static/image/icon/matchexpo.png">
        </div>
      </div>
      <div class="bind-form">
        <el-select v-model="country_code" placeholder="请选择国家">
          <el-option v-for="(item,index) in countryCode" :key="item.country_code+index" :label="'+'+item.phone_code+'('+item.chinese_name+')'" :value="item.phone_code" />
        </el-select>
        <el-input v-model="phone" prefix-icon="el-icon-mobile-phone" placeholder="请输入手机号码" class="input" />
        <el-input v-model="code" prefix-icon="el-icon-key" placeholder="请输入验证码" class="input">
          <el-button slot="append" :disabled="!!code_timer" :loading="loading" @click="sentSMSCode()">{{ code_timer?count+'s':'发送验证码' }}</el-button>
        </el-input>
        <el-button :loading="loading" type="primary" class="button" @click="bind()">
          <span>绑 定</span>
        </el-button>
      </div>
    </div>
    <template v-else>
      <div v-if="login_type === 'wechat'" class="wechat-login">
        <div class="title">
          <img class="icon" src="/static/image/icon/wechat.png">
          <span class="text">微信扫码登录</span>
        </div>
        <div class="qr-code">
          <vue-qr v-show="wechat_info.url" class="vue-qr" :margin="0" :text="wechat_info.url" />
        </div>
        <div class="tips">打开微信扫一扫，关注公众号自动登录</div>
      </div>
      <div v-if="login_type === 'google'" class="wechat-login">
        <div class="title">
          <span class="text">Google登录</span>
        </div>
        <img class="icon" src="/static/image/icon/google.png">
        <div class="tips">正在准备登录信息...</div>
      </div>
      <div v-if="login_type === 'linkin'" class="wechat-login">
        <div class="title">
          <span class="text">LinkedIn登录</span>
        </div>
        <img class="icon" src="/static/image/icon/linkin.png">
        <div class="tips">正在准备登录信息...</div>
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
  .root{
    width: 100%;
    height: 100%;
  }
  .wechat-login{
    width: 100%;
    height: 100%;
    display: flex;
    gap: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .bind-form{
      gap: 8px;
      flex-direction: column;
      display: flex;
      padding: 36px;
      width: 100%;
      .button{
        margin-top: 36px;
      }
    }
    .two-logo{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      .icon{
        rotate: 45deg;
        color: grey;
        font-size: 36px;
      }
      .mini-logo{
        border-radius: 20%;
        background-color: #EEEEEE;
        width: 80px;
        height: 80px;
        aspect-ratio: 1;
        padding: 16px;
        &.maychexpo{
          padding: 12px;
        }
        img{
          display: block;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
    .icon{
      width: 30%;
      aspect-ratio: 1;
      object-fit: contain;
    }
    .qr-code{
      background-color: lightgray;
      width: 42%;
      aspect-ratio: 1;
      .vue-qr{
        width: 100%;
        height: 100%;
      }
    }
    .title{
      display: flex;
      gap: 4px;
      align-items: center;
      .text{
        font-size: 24px;
        font-weight: bold;
      }
      .icon{
        object-fit: contain;
        width: 36px;
        height: 36px;
      }
    }
    .tips{
      font-size: 16px;
      color: grey;
    }
  }
  .bind-box{

  }
</style>
