<script setup>
import { ref } from 'vue';

const list = ref([
  { label: '澶?, bgColor: '#BE0012', textColor: '#FFFFFF', hasShadow: true },
  { label: '椤剁骇', bgColor: '#F17415', textColor: '#FFFFFF', hasShadow: true },
  { label: '浜轰笂浜?, bgColor: '#F9E962', textColor: '#FFFFFF', hasShadow: true },
  { label: 'NPC', bgColor: '#FDF5C0', textColor: '#555555', hasShadow: false },
  { label: '鎷夊畬浜?, bgColor: '#FFFFFF', textColor: '#555555', hasShadow: false }
]);

const handleAdd = (index) => {
  console.log('娣诲姞椤?, index);
};
</script>

<template>
  <view class="ranking-container">
    <view class="ranking-table">
      <view v-for="(item, index) in list" :key="index" class="ranking-row">
        <!-- 鏍囩鍒?-->
        <view class="label-col" :style="{ backgroundColor: item.bgColor }">
          <text class="label-text" :class="{ 'with-shadow': item.hasShadow }" :style="{ color: item.textColor }">
            {{ item.label }}
          </text>
        </view>
        
        <!-- 鍐呭鍒?-->
        <view class="content-col">
          <!-- 浠呭湪绗竴琛屽睍绀烘紨绀哄浘鐗?-->
          <template v-if="index === 0">
            <view class="item-box">
              <image src="/static/images/food.jpg" mode="aspectFill" class="item-img" />
            </view>
          </template>
          <!-- 娣诲姞鎸夐挳 -->
          <view class="add-btn" @tap="handleAdd(index)">
            <text class="plus-icon">+</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="less">
.ranking-container {
  padding: 30rpx 20rpx;
  background-color: #F8F8F8;
  min-height: 100vh;
}

.ranking-table {
  border: 2rpx solid #333;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.ranking-row {
  display: flex;
  min-height: 180rpx;
  border-bottom: 2rpx solid #333;
  
  &:last-child {
    border-bottom: none;
  }
}

.label-col {
  width: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 2rpx solid #333;
  padding: 0 10rpx;
  box-sizing: border-box;
}

.label-text {
  font-size: 52rpx;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  
  &.with-shadow {
    /* 寮哄姏榛戣壊鎻忚竟锛屾ā鎷?:1鏁堟灉 */
    text-shadow: 
      2rpx 2rpx 0 #000, 
      -2rpx -2rpx 0 #000, 
      2rpx -2rpx 0 #000, 
      -2rpx 2rpx 0 #000,
      0 2rpx 0 #000,
      0 -2rpx 0 #000,
      2rpx 0 0 #000,
      -2rpx 0 0 #000;
  }
}

.content-col {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 20rpx;
  gap: 20rpx;
}

.item-box {
  width: 140rpx;
  height: 140rpx;
  background-color: #eee;
  border: 1rpx solid #ddd;
}

.item-img {
  width: 100%;
  height: 100%;
}

.add-btn {
  width: 140rpx;
  height: 140rpx;
  background-color: #F2F2F2;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .plus-icon {
    font-size: 70rpx;
    color: #DBDBDB;
    font-weight: 200;
  }
}
</style>
