<template>
  <view class="profile-container">
    <view class="profile-card">
      <view class="info-item" v-for="(item, index) in infoList" :key="index">
        <view class="item-left">
          <view class="info-icon" :style="{ background: item.gradient }">
            <uni-icons :type="item.icon" size="20" color="#ffffff"></uni-icons>
          </view>
          <text class="item-label">{{ item.label }}</text>
        </view>
        <text class="item-value">{{ item.value }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getUserProfile } from "@/api/system/user"
import { ref, computed } from "vue";
import modal from "@/plugins/modal"

const user = ref({})
const roleGroup = ref("")
const postGroup = ref("")

const infoList = computed(() => [
  {
    icon: 'person',
    label: '昵称',
    value: user.value.nickName || '未设置',
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  {
    icon: 'phone',
    label: '手机号码',
    value: user.value.phonenumber || '未绑定',
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
  },
  {
    icon: 'email',
    label: '邮箱',
    value: user.value.email || '未绑定',
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
  },
  {
    icon: 'calendar',
    label: '创建日期',
    value: user.value.createTime || '-',
    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
  }
])

function getUser() {
  getUserProfile().then(response => {
    user.value = response.data
    roleGroup.value = response.roleGroup
    postGroup.value = response.postGroup
  })
}
getUser()

import { wxRegister } from "@/api/oauth"
import { getWxCode } from "@/utils/geek"
function register(){
  modal.loading('绑定微信中...')
  getWxCode().then(res=>{
    wxRegister('miniapp',res).then(res=>{
      modal.closeLoading()
    })
  })

}

</script>

<style lang="scss" scoped>
page {
  background-color: #f5f7fa;
}

.profile-container {
  padding: 32rpx;
}

.profile-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
  border-radius: 24rpx;
  padding: 8rpx 0;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 24rpx;
  transition: background-color 0.3s ease;
  
  &:not(:last-child) {
    border-bottom: 1rpx solid #e8edf3;
  }
  
  .item-left {
    display: flex;
    align-items: center;
    flex: 1;
    
    .info-icon {
      width: 64rpx;
      height: 64rpx;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
    }
    
    .item-label {
      color: #606266;
      font-size: 28rpx;
      font-weight: 500;
    }
  }
  
  .item-value {
    color: #303133;
    font-size: 28rpx;
    max-width: 400rpx;
    text-align: right;
    word-break: break-all;
  }
}
</style>
