<template>
  <scroll-view>
    <view class="bg-img  flex align-center justify-center bg-img-mine"
          :style="{ backgroundImage:'url(' +  bgImgsSrc + ')' }">
      <view class="padding-xl" v-if="user">
        <view class="padding">
          <image class="cu-avatar round xl logo-xxl" :src="user.avatar"></image>
        </view>
        <view class="text-xl text-center text-white">
          {{ user.name }}
        </view>
      </view>
    </view>
    <view class="cu-list menu menu-margin ">
      <view class="cu-item" @tap="userinfo">
        <view class="content">
          <text class="cuIcon-edit text-cyan"></text>
          <text class="text-grey">个人信息</text>
        </view>
        <view class="action">
          <text class="cuIcon-right text-gray"></text>
        </view>
      </view>
      <view class="cu-item" @tap="handlePassword">
        <view class="content">
          <text class="cuIcon-medal text-orange"></text>
          <text class="text-grey">修改密码</text>
        </view>
        <view class="action">
          <text class="cuIcon-right text-gray"></text>
        </view>
      </view>
      <view class="cu-item" @tap="handleCollect">
        <view class="content">
          <text class="cuIcon-activity text-orange"></text>
          <text class="text-grey">收藏夹</text>
        </view>
        <view class="action">
          <text class="cuIcon-right text-gray"></text>
        </view>
      </view>
      <view class="cu-item" @tap="setting">
        <view class="content">
          <text class="cuIcon-settings text-cyan"></text>
          <text class="text-grey">聊天设置</text>
        </view>
        <view class="action">
          <text class="cuIcon-right text-gray"></text>
        </view>
      </view>
      <view class="cu-item" @tap="systemInfo">
        <view class="content">
          <text class="cuIcon-info text-cyan"></text>
          <text class="text-grey">系统信息</text>
        </view>
        <view class="action">
          <text class="cuIcon-right text-gray"></text>
        </view>
      </view>
      <view class="cu-item">
        <view class="content" @tap="Auth.logout()">
          <text class="cuIcon-close text-orange"></text>
          <text class="text-grey">退出登录</text>
        </view>
        <view class="action">
          <text class="cuIcon-right text-gray"></text>
        </view>
      </view>
    </view>
	<view style="height: 50upx;"></view>
  </scroll-view>
</template>

<script setup lang="ts">
import {getCurrentInstance, ref} from "vue";
import Auth from "@/api/Auth";
import UserApi from "@/api/UserApi";
import type User from "@/mode/User";

const bgImgsSrc = ref('/static/mine/mine.jpg');
const user = ref<User>();
const {proxy} = getCurrentInstance();
UserApi.currentUser()
    .then((res) => {
      user.value = res.data
    })

const handlePassword = () => {
  uni.navigateTo({
    url: '/pages/mine/password'
  })
}

const handleCollect = () => {
  uni.navigateTo({
    url: '/pages/collect/index'
  })
}

const systemInfo = () => {
  uni.navigateTo({
    url: '/pages/mine/system'
  })
}


if (!user) {
  uni.reLaunch({
    url: '/pages/login/login'
  })
}

const userinfo = () => {
  uni.navigateTo({
    url: '/pages/mine/info'
  })
}

const setting = () => {
  uni.navigateTo({
    url: '/pages/mine/setting'
  })
}
</script>

<style scoped>
.logo-xxl {
  width: 170upx;
  height: 170upx;
  margin-top: 50upx;
}

.gif-wave {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;
  height: 100upx;
}

.bg-img-mine {
  height: 400upx;
  position: relative;
}

.menu-margin {
  margin-bottom: 51px;
}
</style>
