<template>
  <section class="AppAuth">
    <ai-item label="头像">
      <button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="handleAvatar">
        <image class="avatar" :src="form.avatar"/>
      </button>
    </ai-item>
    <ai-item label="昵称">
      <input type="nickname" v-model="form.name" placeholder="设置用户名" class="rtl"/>
    </ai-item>
    <ai-bottom text="登录" @click="handleSignIn"/>
  </section>
</template>

<script>
import {mainStore} from "../../utils/pinia";
import AiItem from "../../components/AiItem";
import AiBottom from "../../components/AiBottom";

export default {
  name: "AppAuth",
  components: {AiBottom, AiItem},
  appName: "用户登录",
  data() {
    return {
      form: {
        avatar: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
        name: ""
      }
    }
  },
  methods: {
    handleAvatar({detail}) {
      this.form.avatar = detail.avatarUrl
    },
    handleSignIn() {
      this.store.getCode().then(code => this.store.getToken({...this.form, code})).then(() => uni.navigateBack())
    }
  },
  setup() {
    const store = mainStore()
    return {store}
  }
}
</script>

<style lang="scss" scoped>
.AppAuth {
  .w100 {
    width: 100%;
  }

  .avatarBtn {
    padding: 0;
    width: initial;
    height: 40px;
    flex-shrink: 0;

  }
}
</style>
