<template>
  <layout>
    <uv-navbar
      :fixed="false"
      title="账号设置"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <view v-if="user">
      <view class="y-list">
        <uv-list border>
          <uv-list-item
            border
            clickable
            show-arrow
            @click=""
          >
            <view class="y-list-content avatar">
              <view class="y-list-label">头像</view>
              <view class="y-list-avatar">
                <image
                  :src="store.user.avatar"
                  class="img"
                />
              </view>
            </view>
          </uv-list-item>
        </uv-list>
      </view>
      <view class="y-list">
        <uv-list border>
          <uv-list-item
            border
            clickable
            show-arrow
            @click=""
          >
            <view class="y-list-content">
              <view class="y-list-label">ID</view>
              <view class="y-list-select-placeholder">
                {{ store.user.id }}
              </view>
            </view>
          </uv-list-item>
          <uv-list-item
            border
            clickable
            show-arrow
            @click=""
          >
            <view class="y-list-content">
              <view class="y-list-label">昵称</view>
              <view class="y-list-select-placeholder">
                {{ store.user.nickname }}
              </view>
            </view>
          </uv-list-item>
          <!-- <uv-list-item
            border
            clickable
            show-arrow
            @click=""
          >
            <view class="y-list-content">
              <view class="y-list-label">性别</view>
              <view class="y-list-select-placeholder">
                {{ store.user.nickname }}
              </view>
            </view>
          </uv-list-item> -->
          <uv-list-item
            border
            clickable
            show-arrow
            @click=""
          >
            <view class="y-list-content">
              <view class="y-list-label">出生日期</view>
              <view class="y-list-select-placeholder">
                {{ store.user.birthday }}
              </view>
            </view>
          </uv-list-item>
        </uv-list>

      </view>
      <view class="y-list">
        <uv-list border>
          <uv-list-item
            border
            clickable
            show-arrow
            @click=""
          >
            <view class="y-list-content">
              <view class="y-list-label">手机号</view>
              <view class="y-list-select-placeholder">
                {{ store.user.mobile }}
              </view>
            </view>
          </uv-list-item>
        </uv-list>
      </view>
    </view>
    <view class="form-buttons">
      <uv-button
        round
        block
        type="primary"
        @tap="handleLogout"
      >
        退出登录
      </uv-button>
    </view>
  </layout>
</template>

<script setup>

import { ref, watch } from 'vue'
import { orderInfo, applyForAfterSales } from '@/api/order'
import { navigateTo, back } from '@/utils/router'
import { onLoad } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'

import { useMainStore } from '@/store/store'

const store = useMainStore()

const { user, } = storeToRefs(store)
console.log("--> % user:\n", user)


// const user = ref(store.user)
console.log("--> % user:\n", store)
console.log("--> % user:\n", store.value)


const handleLogout = () => {
  store.logout()
}

const onClickLeft = () => {
  back()
}

onLoad((option) => {
  store.getUserInfo()
})


</script>

<style lang="less">
.shopping-checkbox {}

.shopping-action {
  padding-left: 34rpx;
  flex: 1;
  display: flex;
  justify-content: space-between;

  &-checkbox {
    flex: 1
  }

  &-total {
    line-height: 48rpx;
    font-size: 34rpx;
    color: #333333;
    margin-right: 10rpx;
  }

  &-btn {
    width: 224rpx;
  }
}
</style>
