<template>
  <div class="ai-login">
    <u-modal v-model="userPhoneShow" showCancelButton :showTitle="true" :title="'手机号码授权'"
             :content="'本次操作需要获取您的手机号码，请同意授权'" @cancel="hide">
      <template slot="confirm-button">
        <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="confirm-button">同意</button>
      </template>
    </u-modal>
  </div>
</template>

<script>
import tools from '../utils/util'
import {mapActions} from "vuex"

export default {
  name: 'AiLogin',
  data() {
    return {
      userPhoneShow: false,
      userData: {},
      code: ''
    }
  },
  methods: {
    ...mapActions(['autoLogin']),
    show() {
      tools.$getLoginCode().then(res => {
        this.code = res.code;
        this.userPhoneShow = true;
      })
    },
    hide() {
      this.userPhoneShow = false
    },
    getPhoneNumber(arg) {
      const {encryptedData, errMsg, iv} = arg.detail
      if (errMsg == 'getPhoneNumber:ok') {
        tools.$getLoginCode().then(() => {
          console.log(iv, this.code)
          this.$instance.post(`/app/appwechatuser/getWechatUserPhone`, {
            encryptedData, iv,
            code: this.code
          }, {withoutToken: true}).then(d => {
            if (d.data) {
              let data = {...this.userData, phone: d.data};
              this.autoLogin(data).then(res => {
                this.$emit("success", res);
              });
            }
          })
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.confirm-button {
  background-color: #fff !important;
}

.confirm-button::after {
  border: none !important;
}
</style>
