<template>
  <div class="shop-container">
    <NavBar :active="'/shop'"></NavBar>
    
    <!-- 积分余额显示 -->
    <div class="points-balance">
      <el-card>
        <div class="balance-content">
          <i class="el-icon-coin"></i>
          <span class="points">当前积分: {{ userPoints }}</span>
          <el-button type="primary" size="small" @click="showPointsHistory">
            积分明细
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 商品列表 -->
    <div class="goods-list">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in goodsList" :key="item.id">
          <el-card :body-style="{ padding: '0px' }" class="goods-card">
            <img :src="item.image" class="goods-image">
            <div class="goods-info">
              <h3>{{ item.name }}</h3>
              <div class="price-info">
                <span class="points-price">{{ item.points }} 积分</span>
                <el-button type="primary" size="small" @click="handleExchange(item)">
                  立即兑换
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 积分明细对话框 -->
    <el-dialog
      title="积分明细"
      v-model="pointsHistoryVisible"
      width="60%">
      <el-table :data="pointsHistory">
        <el-table-column prop="time" label="时间" width="180"/>
        <el-table-column prop="type" label="类型" width="120"/>
        <el-table-column prop="points" label="积分变动"/>
        <el-table-column prop="description" label="说明"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import NavBar from '@/components/oj/common/NavBar.vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'Shop',
  components: {
    NavBar
  },
  data() {
    return {
      userPoints: 1000, // 用户积分余额
      pointsHistoryVisible: false,
      goodsList: [
        {
          id: 1,
          name: '力扣会员1个月',
          points: 500,
          image: 'https://example.com/leetcode.png',
          description: '力扣会员1个月使用权限'
        },
        {
          id: 2, 
          name: '编程书籍优惠券',
          points: 300,
          image: 'https://example.com/book.png',
          description: '任意编程书籍立减30元'
        },
        {
          id: 3,
          name: 'IDE专业版',
          points: 800,
          image: 'https://example.com/ide.png',
          description: 'JetBrains IDE 1个月使用授权'
        },
        {
          id: 4,
          name: '在线课程优惠券',
          points: 400,
          image: 'https://example.com/course.png',
          description: '指定在线课程优惠50元'
        }
      ],
      pointsHistory: [
        {
          time: '2024-03-20 10:00:00',
          type: '题目通过',
          points: '+10',
          description: '完成题目【两数之和】'
        },
        {
          time: '2024-03-19 15:30:00',
          type: '商品兑换',
          points: '-300',
          description: '兑换【编程书籍优惠券】'
        },
        {
          time: '2024-03-18 09:15:00',
          type: '每日登录',
          points: '+5',
          description: '每日登录奖励'
        }
      ]
    }
  },
  methods: {
    showPointsHistory() {
      this.pointsHistoryVisible = true
    },
    handleExchange(item) {
      if (this.userPoints < item.points) {
        ElMessage.warning('积分不足!')
        return
      }
      
      ElMessage.success('兑换成功!')
      this.userPoints -= item.points
      // TODO: 调用后端API完成兑换
    }
  }
}
</script>

<style scoped>
.shop-container {
  padding: 20px;
  margin-top: 60px;
}

.points-balance {
  margin-bottom: 20px;
}

.balance-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.points {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
}

.goods-list {
  margin-top: 20px;
}

.goods-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.goods-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.goods-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.goods-info {
  padding: 14px;
}

.goods-info h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.price-info {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.points-price {
  color: #F56C6C;
  font-weight: bold;
}

.el-dialog__body {
  padding: 20px;
}
</style> 