<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getUserInfoApi } from '@/api/login'
import { useGlobal } from '@/composables/index'
const { minioUrl } = useGlobal()

const userInfo = ref<any>({})

onLoad(() => {
  getUserInfoApi().then((res: any) => {
    const _userInfo = res.data || {}
    userInfo.value = _userInfo
  })
})

const toPage = (path: string) => {
  uni.navigateTo({
    url: path
  })
}

const callPhone = (phone: string) => {
  uni.makePhoneCall({
    phoneNumber: phone
  })
}
</script>

<template>
  <view class="my-container" :style="{ backgroundImage: `url(${minioUrl + '/my_bg.png'})` }">
    <view class="my-header-wrapper">
      <image :src="minioUrl + '/icon_default_user.png'" mode="aspectFill" />
      <text class="user-name-text">{{ userInfo.user.mobile || userInfo.user.username }}</text>
    </view>
    <HyCard>
      <view class="my-list-item" @click="toPage('/base/suggest/record')">
        <view class="list-left">
          <image :src="minioUrl + '/icon_feed.png'" mode="aspectFill" style="width: 42rpx; height: 42rpx" />
          <text class="text">我的反馈</text>
        </view>
        <view class="list-right">
          <image :src="minioUrl + '/icon_right.png'" mode="aspectFill" />
        </view>
      </view>
      <view class="my-list-item" @click="callPhone('0532-88886666')">
        <view class="list-left">
          <image :src="minioUrl + '/icon_phone.png'" mode="aspectFill" style="width: 42rpx; height: 42rpx" />
          <text class="text">客服热线:0532-88886666</text>
        </view>
      </view>
      <view class="my-list-item">
        <view class="list-left">
          <image :src="minioUrl + '/icon_time.png'" mode="aspectFill" style="width: 42rpx; height: 42rpx" />
          <text class="text">咨询时间:09:00-22:00</text>
        </view>
      </view>
    </HyCard>
  </view>
</template>

<style lang="scss" scoped>
page {
  background-color: #edf1f5;
}
.my-container {
  width: 100%;
  min-height: 900rpx;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  padding: 100rpx 28rpx 0 28rpx;
  .my-header-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 60rpx;
    image {
      width: 139rpx;
      height: 139rpx;
      margin-right: 36rpx;
    }
    .user-name-text {
      font-size: 35rpx;
      color: #333;
      font-weight: 500;
    }
  }
  :deep(.hy-card-container) {
    padding-bottom: 0;
  }
  .my-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 31rpx 7rpx 31rpx 7rpx;
    border-bottom: 1rpx solid #ebebeb;
    &:first-child {
      padding-top: 7rpx;
    }
    &:last-child {
      border-bottom: none;
    }
    .list-left {
      display: flex;
      align-items: center;
      .text {
        font-size: 28rpx;
        color: #333;
        margin-left: 28rpx;
      }
    }
    .list-right {
      image {
        width: 11rpx;
        height: 19rpx;
      }
    }
  }
}
</style>
