<template>
  <view class="me_page">
    <view class="me_content">
      <hs-cell title="头像" borderTop>
        <button
          class="container-wrapper"
          :open-type="'chooseAvatar'"
          @chooseavatar="method?.handleChooseAvatar"
        >
          <template v-if="useModel?.formData?.value?.avatar">
            <view
              v-for="(i, index) in useModel?.formData?.value?.avatar"
              :key="`avatar_${index}`"
              class="avatar"
            >
              <up-avatar size="50" :src="i?.url" />
            </view>
          </template>
          <view v-else class="avatar">
            <up-avatar size="50" />
          </view>
        </button>
      </hs-cell>
      <hs-cell title="昵称" borderTop>
        <hs-input
          textAlign="right"
          type="nickname"
          v-model:valueModel="useModel.formData.value.name"
        />
      </hs-cell>
      <hs-cell title="手机号" borderTop>
        <view class="user_phone">
          {{ useModel.formData.value?.phone || '' }}
        </view>
      </hs-cell>
    </view>
    <hs-footer
      btnOtherName="退出登录"
      btnParimaryName="保存"
      btnOtherShow
      @handleOtherClick="method?.handleLogout()"
      @handleParmaryClick="method?.handleConfirm()"
    />
  </view>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import method from './method'
import useModel from './model'
onLoad(() => {
  method?.init()
})
</script>
<style lang="scss">
@import './style.scss';
</style>
