<template>
  <view class="fly-login" v-if="modelValue">
    <view class="fly-login-mask" />
    <view class="fly-login-content px-4">
      <view class="font-bold h-16 leading-16">获取您的昵称、头像</view>
      <view
        class="rounded-full bg-light-600 w-6 h-6 text-center absolute top-4 right-4"
        @click="onClose"
      >
        <view class="i-carbon-close text-gray-700" />
      </view>

      <view
        class="flex items-center h-16 leading-16 border-b-gray-400 border-b-solid border-[1rpx]"
      >
        <text class="mr-4 flex-shrink-0">头像</text>
        <button
          class="bg-transparent flex items-center after:b-none w-full h-12 leading-12"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <image class="w-8 h-8 rounded-full" :src="avatarUrl"></image>
          <text class="ml-auto i-carbon-chevron-right"></text>
        </button>
      </view>

      <view
        class="flex items-center h-16 leading-16 border-b-gray-400 border-b-solid border-1 mt-4"
      >
        <text class="mr-4 flex-shrink-0">昵称</text>
        <input type="nickname" placeholder="请输入昵称" @change="onChange" @blur="onChange" />
      </view>

      <button
        size="default"
        type="default"
        style="color: #fff; background-color: #1aad19; border-color: #1aad19"
        class="text-center leading-12 w-40 my-4"
        @click="onSubmit"
      >
        确定
      </button>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store'
import defaultAvatarUrl from './defaultAvatar.png'

const emit = defineEmits(['update:modelValue'])
defineProps<{ modelValue: boolean }>()

const userStore = useUserStore()

const avatarUrl = ref(defaultAvatarUrl)
const nickname = ref('')

const onClose = () => {
  emit('update:modelValue', false)
}

const onChooseAvatar = (e) => {
  const { avatarUrl: url } = e.detail
  avatarUrl.value = url
  // 这里就要上传，加快速度，提升体验（用户多次选择头像就多次上传吧，总有取舍）
  console.log(url)
}

const onChange = (e) => {
  const { value } = e.detail
  nickname.value = value
  console.log(value)
}

const onSubmit = () => {
  // 1、上传刚刚的图片，并返回网络地址
  // 2、把用户信息存起来
  if (avatarUrl.value === defaultAvatarUrl) {
    uni.showToast({
      title: '请选择头像',
      icon: 'none',
    })
    return
  }
  if (!nickname.value) {
    uni.showToast({
      title: '请填写昵称',
      icon: 'none',
    })
    return
  }

  emit('update:modelValue', false)
  console.log('保存用户信息')
  userStore.setUserInfo({ nickname: nickname.value, avatar: avatarUrl.value })
}
</script>

<style lang="scss" scoped>
.fly-login {
  position: fixed;
  inset: 0;

  .fly-login-mask {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 30%);
  }

  .fly-login-content {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
}
</style>
