<template>
  <s-layout class="set-wrap" title="已获奖品" :bgStyle="{ color: '#FFF' }">
    <view>
      <view class="_thWrap" v-for="(item, index) in list" :key="item.id">
        <view class="_cont">
          <view class="_left">
            <image class="_img" :src="item.imgUrl"></image>
          </view>
          <view class="_right">
            <view class="_h4">
              <text>奖品名称：{{ item.name }}</text>
            </view>
            <view class="_h4">
              <text>获得时间：{{ formattedDateTime(item.createTime) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </s-layout>

</template>

<script setup>
import { ref, } from 'vue'
import MineApi from '@/sheep/api/prize/index'
// import layOut from '@/components/layout.vue'
import { onLoad, onReachBottom, onShow, onUnload, onHide } from '@dcloudio/uni-app';
const list = ref()
//已获奖品
const getPrizesWon = async () => {


  const r = await MineApi.ActivityRules()
  let HDid = r.data?.id

  const res = await MineApi.PrizesWon(HDid)
  list.value = res.data
}
const formattedDateTime = (timestampInMilliseconds) => {
  const date = new Date(timestampInMilliseconds);
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  const hours = ('0' + date.getHours()).slice(-2);
  const minutes = ('0' + date.getMinutes()).slice(-2);
  const seconds = ('0' + date.getSeconds()).slice(-2);
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
onShow(async () => {
  await getPrizesWon()
})
</script>

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

.tabs {
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  z-index: 9;

  .text {
    margin: 0 20rpx;
    position: relative;
    font-size: 32rpx;
  }

  .active {
    &::after {
      content: '';
      width: 70rpx;
      height: 5rpx;
      transform: translate(-50%);
      background-color: #4376f5;
      position: absolute;
      left: 50%;
      bottom: 24rpx;
    }
  }
}

._thWrap {
  width: 100%;
  border-bottom: 2rpx solid rgba(242, 242, 242, 1);
  padding: 20rpx 0;
}

._cont {
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 10rpx 5rpx rgba(200, 200, 200, 0.3);
  padding: 10px;
  flex: 1;

  ._left {
    width: 266rpx;
    height: 260rpx;
    border: 2rpx solid rgba(242, 242, 242, 1);
    text-align: center;

    ._img {
      width: 265rpx;
      height: 250rpx;
    }
  }

  ._right {
    margin-left: 30rpx;
    padding-top: 10rpx;

    ._h4 {
      padding-top: 50rpx;

      ._h5 {
        margin-bottom: 10rpx;
      }

      ._h5Two {
        font-size: 35rpx;
        margin-bottom: 10rpx;
      }

      ._tips {
        color: #aaaaaa;
        font-size: 22rpx;
      }

      ._tipsTwo {
        color: #565353;
        font-size: 30rpx;
      }
    }

    .danjia {
      display: block;
      color: red;
      font-size: 25rpx;
      // font-weight: bolder;
      margin-top: 60rpx;

      text {
        font-size: 15rpx;
      }
    }
  }

  // ._bo {
  //   margin-top: 20rpx;
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   ._money {
  //     color: red($color: #a9a8a8);
  //     // font-weight: bold;
  //     font-size: 20rpx;
  //     margin-right: 16rpx;

  //     text {
  //       font-size: 28rpx;
  //     }
  //   }
  //   ._btn {
  //     width: 192rpx;
  //     height: 62rpx;
  //     line-height: 62rpx;
  //     text-align: center;
  //     border-radius: 100rpx;
  //     color: white;
  //     font-weight: bold;
  //     background-color: $color-gray-Main;
  //   }
  // }
}
</style>