<template>
  <div class="full-width flex flex-center flex-col">
    <el-dialog
      v-model="showLogin"
      width="300px"
      append-to-body
      class="radius"
      @close="close"
    >
      <div class="flex flex-center flex-col">
        <vue-qr
          :currentLevel="3"
          :logoCornerRadius="4"
          :logoScale="0.25"
          :logoSrc="logoSrc"
          :text="qrCodeText"
          size="260"
        />
        <span>请使用微信扫码登录</span>
        <el-button @click="submit">登录</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<route>
{
path: '/login',
name: 'login',
}
</route>
<script>
import { userStore } from '@/store/user.js'
import { setToken } from '@/utils/auth.js'
import md5 from 'js-md5'
import VueQr from 'vue-qr/src/packages/vue-qr.vue'

export default {
  name: 'login',
  components: { VueQr },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show: {
      handler(val) {
        this.showLogin = val
        if (val) {
          this.qrCode()
          this.checkLogin()
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      showLogin: false,
      qrCodeText: '333',
      logoSrc: new URL('@/assets/img/logo.png', import.meta.url).href,
      redirect: '/',
      username: '',
      password: '',
      time: null,
      qrCodeLogin: true
    }
  },
  setup() {
    const user = userStore()
    return { user }
  },
  methods: {
    submit() {
      const params = {
        tenantId: '000000',
        username: '13908866201',
        password: md5('123456'),
        grant_type: 'password',
        scope: 'all',
        type: 'account'
      }
      this.$api.login.login(params).then(res => {
        if (res.error_description) {
          console.log(res.error_description)
        } else {
          setToken(res.access_token)
          this.getInfo()
          this.showLogin = false
          this.$emit('close')
        }
      })
    },
    qrCode() {
      this.$api.login.qrCode().then(res => {
        if (res.code === 200) {
          this.sessionId = res.data
          this.qrCodeText =
            'https://dev.wutongresearch.club/login?id=' + this.sessionId
        }
      })
    },
    checkLogin() {
      let count = 0
      this.time = setInterval(() => {
        count = count + 1
        if (this.qrCodeLogin === false) {
          clearInterval(this.time)
        }
        if (count === 60) {
          this.qrCode()
          count = 0
        }
        if (this.sessionId) {
          this.codeLogin()
        } else {
          console.log('未登录')
        }
      }, 1000)
    },
    getInfo() {
      this.$api.login.getUserInfo().then(res => {
        if (res.code === 200) {
          // 保存信息
          if (res.data.type === 3) {
            res.data.typeName = '机构'
          } else {
            res.data.typeName = '服务商'
          }
          this.user.setUserInfo(res.data)
        }
      })
    },
    codeLogin() {
      this.$api.login.qrCodeLogin({ sessionId: this.sessionId }).then(res => {
        if (res.code === 200) {
          const tmp = res.data
          if (Object.prototype.hasOwnProperty.call(tmp, 'phone')) {
            const params = {
              tenantId: '000000',
              phone: res.data.phone,
              openId: res.data.openId,
              grant_type: 'qrcode',
              scope: 'all',
              type: 'account'
            }
            this.$api.login.loginByCode(params).then(res => {
              if (res.error_description) {
                this.$message.error(res.error_description)
              } else {
                clearInterval(this.time)
                setToken(res.access_token)
                this.getInfo()
              }
            })
          }
        }
      })
    },
    close() {
      clearInterval(this.time)
    }
  }
}
</script>
