<template>
  <view class="mine-container">
    <view class="mine-bg">
      <image class="mine-bg-img" src="https://api.ccttiot.com/mine-bg-1745765736909.png" mode="widthFix" />
    </view>
    <HeaderBar title="我的" text-align="center"/>
    <!-- 用户信息区 -->
    <view class="user-info">
      <image class="avatar" :src="user.avatar || defaultAvatar" mode="aspectFill" />
      <view class="user-meta">
        <view class="nickname">{{ user.nickName || '未登录' }}</view>
        <view class="user-tag" v-if="user.shareLevelName">{{user.shareLevelName}}</view>
        <view class="user-tag" v-if="user.orderLevelName">{{user.orderLevelName}}</view>
      </view>
      <button class="share-btn" open-type="share">
        <image src="https://api.ccttiot.com/share-icon-1748442777724.png" class="share-icon" />
        <text>分享</text>
      </button>
    </view>
    <!-- 积分与奖励入口 -->
    <view class="score-reward-row">
      <view class="score-box" @click="goScore">
        <image class="score-icon" src="https://api.ccttiot.com/Frame%2013-1745765238186.png" />
        <view class="score-content">
          <view class="score">{{ user.balance || 0 }}</view>
          <view class="score-label">我的积分</view>
        </view>
      </view>
      <view class="reward-box" @click="goReward">
        <image class="reward-icon" src="https://api.ccttiot.com/Frame%2014-1745765058888.png" />
        <view class="reward-content">
          <view class="reward-label">立即提现</view>
        </view>
      </view>
    </view>
    <!-- 历史任务 -->
    <view class="history-task">
      <view class="task-title-row">
        <view class="title">历史任务</view>
      </view>
      <view class="task-status-row">
        <view class="task-status-item" v-for="item in taskStatusList" :key="item.key" @click="goTaskStatus(item.key)">
          <image :src="item.icon" class="status-icon" />
          <view class="status-label">{{ item.label }}</view>
        </view>
      </view>
    </view>
    <!-- 其他菜单入口 -->
    <view class="menu-list">
      <view class="menu-item" v-for="item in menuList" :key="item.key" @click="onMenuClick(item)">
        <image :src="item.icon" class="menu-icon" />
        <view class="menu-label">{{ item.label }}</view>
      </view>
    </view>
    <FooterTabBar :active="'/pages/mine/index'"/>
  </view>
</template>

<script>
import FooterTabBar from '@/components/FooterTabBar.vue'
import HeaderBar from '@/components/HeaderBar.vue'
import { getUserProfile } from '@/api/system/user'
import { BalanceLogType } from '@/utils/enums'
export default {
  components: {
    FooterTabBar,
    HeaderBar
  },
  data() {
    return {
      BalanceLogType,
      user: {},
      defaultAvatar: '/static/images/profile.jpg',
      taskStatusList: [
        { key: '1', label: '已下单', icon: 'https://api.ccttiot.com/Frame%2015-1745765427533.png' },
        { key: '5', label: '已完成', icon: 'https://api.ccttiot.com/Frame%2017%20(1)-1745765427569.png' },
        { key: '3', label: '已取消', icon: 'https://api.ccttiot.com/Frame%2016-1745765427552.png' },
        { key: '4', label: '售后', icon: 'https://api.ccttiot.com/Frame%2017-1745765427585.png' },
      ],
      menuList: [
        // { key: 'info', label: '基本信息', icon: 'https://api.ccttiot.com/Frame%2023-1748442074389.png', path: '/pages/mine/info/index' },
        { key: 'car', label: '车辆管理', icon: 'https://api.ccttiot.com/Frame%20(1)-1748442074317.png', path: '/pages/car/index' },
        // { key: 'address', label: '地址管理', icon: 'https://api.ccttiot.com/%E5%9C%B0%E5%9D%80%20(1)-1748442325178.png', path: '/pages/address/index' },
        { key: 'help', label: '帮助中心', icon: 'https://api.ccttiot.com/Frame-1748442074654.png', path: '/pages/article/index?type=2' },
        { key: 'feedback', label: '意见反馈', icon: 'https://api.ccttiot.com/Frame%20(2)-1748442074341.png', path: '/pages/complaint/edit' },
        { key: 'privacy', label: '隐私协议', icon: 'https://api.ccttiot.com/Frame%20(3)-1748442074366.png', path: '/pages/article/detail?type=4' },
        { key: 'mch', label: '商家后台', icon: 'https://api.ccttiot.com/%E5%95%86%E5%AE%B6%20(3)-1748442480183.png', path: '/pages/mch/check' },
      ]
    }
  },
  onShow() {
    this.fetchUserProfile();
  },
  methods: {
    goScore() {
      uni.navigateTo({ url: `/pages/score/index?type=${BalanceLogType.USER_SCORE}` })
    },
    goReward() {
      // 跳转奖励页面
      uni.navigateTo({ url: '/pages/withdraw/index' })
    },
    goAllTasks() {
      // 跳转全部任务页面
      uni.navigateTo({ url: '/pages/mine/task/index' })
    },
    goTaskStatus(key) {
      // 跳转任务状态页面
      uni.navigateTo({ url: `/pages/task/index?status=${key}` })
    },
    onMenuClick(item) {
      if (item.path) {
        uni.navigateTo({ url: item.path })
      }
    },
    onShareAppMessage() {
      return {
        title: `驰捷修-派单快速度快安全倒计时阶段`,
        path: `/pages/index/index?invitorId=${this.user.userId}`,
        imageUrl: 'https://api.ccttiot.com/64024b0ec02392312a95d75c369308143f64f6cd15b0e9-1KT9Qi_fw1200%201-1747228539523.png'
      }
    },
    fetchUserProfile() {
      getUserProfile().then(res => {
        this.user = res.data || {}
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.mine-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #eaf2ff 0%, #f7faff 100%);
  padding-bottom: 80rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.mine-bg {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  .mine-bg-img {
    width: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
  }
}

.user-info {
  display: flex;
  align-items: center;
  padding: 40rpx 32rpx 24rpx 32rpx;
  background: transparent;
  position: relative;
  .avatar {
    width: 104rpx;
    height: 104rpx;
    border-radius: 50%;
    border: 4rpx solid #fff;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    margin-right: 24rpx;
    background: #f5f5f5;
  }
  .user-meta {
    flex: 1;
    .nickname {
      font-size: 36rpx;
      font-weight: 600;
      color: #222;
      margin-bottom: 8rpx;
    }
    .user-tag {
      display: inline-block;
      font-size: 22rpx;
      color: #6a8cff;
      background: #f0f5ff;
      border-radius: 20rpx;
      padding: 4rpx 18rpx;
    }
  }
  .share-btn {
    display: flex;
    align-items: center;
    color: #6a8cff;
    font-size: 24rpx;
    cursor: pointer;
    margin-left: 16rpx;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    &::after {
      border: none;
    }
    .share-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 4rpx;
    }
    text {
      margin-left: 4rpx;
    }
  }
}

.score-reward-row {
  display: flex;
  justify-content: space-between;
  margin: 0 32rpx 32rpx 32rpx;
  .score-box, .reward-box {
    flex: 1;
    background: #fff;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 24rpx rgba(106, 140, 255, 0.08);
    padding: 24rpx 0;
    display: flex;
    align-items: center;
    margin-right: 24rpx;
    &:last-child {
      margin-right: 0;
    }
    .score-icon, .reward-icon {
      width: 80rpx;
      height: 80rpx;
      margin-left: 24rpx;
      margin-right: 18rpx;
      flex-shrink: 0;
    }
    .score-content, .reward-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .score {
      font-size: 40rpx;
      font-weight: bold;
      color: #ff7e3f;
      margin-bottom: 8rpx;
    }
    .score-label, .reward-label {
      font-size: 28rpx;
      color: #3a3a3a;
    }
  }
  .score-box {
    background: linear-gradient(183.25deg, #FDA25B -161.91%, #FFFFFF 97.31%);
    border: 1rpx solid #fff3e0;
  }
  .reward-box {
    background: linear-gradient(180deg, rgba(112, 170, 255, 0.5) -158.75%, #FFFFFF 100%);
    border: 1rpx solid #e0eaff;
  }
}

.history-task {
  background: #fff;
  border-radius: 24rpx;
  margin: 0 32rpx 32rpx 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(106, 140, 255, 0.06);
  padding: 24rpx 0 0 0;
  .task-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32rpx 16rpx 32rpx;
    .title {
      font-size: 28rpx;
      font-weight: 600;
      color: #222;
    }
    .view-all {
      font-size: 24rpx;
      color: #6a8cff;
      cursor: pointer;
    }
  }
  .task-status-row {
    display: flex;
    justify-content: space-around;
    padding: 16rpx 0 24rpx 0;
    .task-status-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .status-icon {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 8rpx;
      }
      .status-label {
        font-size: 22rpx;
        color: #666;
      }
    }
  }
}

.menu-list {
  background: #fff;
  border-radius: 24rpx;
  margin: 0 32rpx 32rpx 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(106, 140, 255, 0.06);
  padding: 8rpx 0;
  .menu-item {
    display: flex;
    align-items: center;
    padding: 28rpx 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    &:last-child {
      border-bottom: none;
    }
    .menu-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 24rpx;
    }
    .menu-label {
      font-size: 28rpx;
      color: #222;
    }
  }
}

/* 底部TabBar适配 */
::v-deep .footer-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
</style>
