<template>
  <view class="details-pkrecords">
    <view class="bg">
      <image
        class="bgImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
        mode="scaleToFill"
      />
    </view>
    <view class="Return" @click="onBack">
      <image class="ReturnImg" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png" mode="scaleToFill" />
    </view>
    <view class="title">PK记录详情</view>
    <view class="pkrecords">
      <view class="card">
        <!-- 主播A -->
        <view class="AnchorA">
          <view class="Anchor">
          <view class="AnchorAImg">
            <!-- 头像 -->
            <image class="AnchorAImgcss" :src="item.anchorIconA" mode="scaleToFill" />
          </view>
          <!-- 皇冠 -->
          <image
            class="Crown"
            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Crown.png"
            mode="scaleToFill"
           v-if="item.winnerAnchorId == item.anchorIdA"
          />
        </view>
          <view class="AnchorAinfo">
            <view class="AnchorAname"> {{ item.anchorIdA }} </view>
            <view class="AnchorATime">{{ formatDate(item.pkTime) }}</view>
            <view class="AnchorAICon" v-if="item.userACoins!==null">
              <view class="AnchorAIContext">实际打金币:</view>
              <view class="AnchorAIConNum">{{ item.userACoins }}K</view>
            </view>
          </view>
        </view>
        <!-- 图标 -->
        <view class="vstext">
          <view class="Vtext">V</view>
          <view class="Stext">S</view>
        </view>
        <!-- 主播B -->
        <view class="AnchorB">
          <view class="Anchor">
          <view class="AnchorAImg">
            <!-- 头像 -->
            <image class="AnchorBImgcss" :src="item.anchorIconB" mode="scaleToFill" />
          </view>
          <!-- 皇冠 -->
          <image
            class="Crown"
            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Crown.png"
            mode="scaleToFill"
            v-if="item.winnerAnchorId == item.anchorIdB"
          />
        </view>
          <view class="AnchorBinfo">
            <view class="AnchorAname">{{ item.anchorIdB }} </view>
            <view class="AnchorATime"> {{ formatDate(item.pkTime) }} </view>
            <view class="AnchorAICon" v-if="item.userBCoins!==null">
              <view class="AnchorAIContext">实际打金币:</view>
              <view class="AnchorAIConNum">{{ item.userBCoins }}K</view>
            </view>
          </view>
        </view>
      </view>
      <view class="pkrecords-content">
        <scroll-view
        show-scrollbar="false"
        scroll-y="true"
        class="scroll"
        refresher-enabled="true"
        refresher-threshold="40"
        @refresherrefresh="onRefresherRefresh"
        :refresher-triggered="triggered"
      >
      <uni-card v-for="(items,index) in coinNumlist" :key="index">
        <view class="contentcard">
          <view class="contentcard-titleA":style="{'background-color': items.anchorIdA == items.winnerAnchorId ? '#00fbff21' : '#ff000011'}">
            <view class="ciontext">金币数量</view>
            <view class="cion">{{items.anchorCoinA}}K</view>
          </view>
          <view class="contentcard-titleB" :style="{'background-color': items.anchorIdB == items.winnerAnchorId ? '#00fbff21' : '#ff000011'}">
            <view class="ciontext">金币数量</view>
            <view class="cion">{{items.anchorCoinB}}K</view>
          </view>
        </view>
      </uni-card>
      
      </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../../../components/request.js";
import formatDate from "../../../../components/formatDate.js";
export default {
  data() {
    return {
      title: "Hello",
      item:{},
      coinNumlist:[],
      triggered: false,
    };
  },
  onLoad(options) {
    // 获取源页面的eventChannel对象
    const eventChannel = this.getOpenerEventChannel();
    // 监听itemDetail事件
    eventChannel.on("itemDetail", (data) => {
      this.item = data.item; // 将接收到的数据赋值给item
      this.getCoinNum(this.item) 
    });
  },
  methods: {
    // 下拉刷新
    onRefresherRefresh(){
      this.triggered = true;
      this.coinNumlist = [];
      this.getCoinNum(this.item)
    },
    // 获取具体金币数量
    getCoinNum(item) {
      const res = request({
        url: "pk/fetchDetailPkDataWithId",
        method: "POST",
        data: {
          id: item.id,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          this.coinNumlist = res.data;
          this.triggered = false;
        }else{
          console.log("获取金币数量失败")
        }
      });
    },

    formatDate: formatDate,
    // 返回上一页
    onBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.bgImg {
  width: 100%;
  height: 100%;
}
.Return {
  position: absolute;
  top: 110rpx;
  left: 35rpx;
  width: 46rpx;
  height: 46rpx;
}
.title {
  position: absolute;
  top: 120rpx;
  left: 280rpx;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: 500;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
.pkrecords {
  position: absolute;
  top: 200rpx;
  left: 0rpx;
  right: 0rpx;
}
/* 卡片 */
.card {
  width: 750rpx;
  height: 300rpx;
  border-radius: 15rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}
.AnchorA {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 30rpx;
}
.AnchorB {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 30rpx;
}
.Anchor{
  display: flex;
  align-items: center;
}
.AnchorAImg {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  background-color: #b1b1b1;
  display: flex;
}
.AnchorAinfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 250rpx;
}
.AnchorBinfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 250rpx;
}
.AnchorAname {
  width: 250rpx;
  font-weight: 500;
  font-size: 31rpx;
  color: #161616;
  text-align: center;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.AnchorATime {
  font-weight: 400;
  font-size: 23rpx;
  color: #a3a3a3;
  margin-top: 12rpx;
  text-align: center;
}
.AnchorAICon {
  display: flex;
  flex-direction: column;
  margin-top: 12rpx;
  align-items: center;
}
.AnchorAIContext {
  font-weight: 400;
  font-size: 23rpx;
  color: #a3a3a3;
}
.AnchorAIConNum {
  font-weight: bold;
  font-size: 23rpx;
  color: #161616;
}
.AnchorAImgcss {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  border-top: #f7da60 solid 2rpx;
  border-left: #ffeeab solid 2rpx;
  border-bottom: #ffeeab solid 2rpx;
  border-right: #f7da60 solid 2rpx;
}
.AnchorBImgcss {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  border-top: #ffc6ba solid 2rpx;
  border-left: #ffc6ba solid 2rpx;
  border-bottom: #5ddadd solid 2rpx;
  border-right: #5ddadd solid 2rpx;
}
.Crown {
  width: 45.8rpx;
  height: 39.12rpx;
  margin-left: -40rpx;
  margin-top: -100rpx;
}
.vstext {
  display: flex;
}
.Vtext {
  font-size: 45.8rpx;
  color: #f0836c;
  font-weight: bold;
  font-style: italic;
}
.Stext {
  font-size: 45.8rpx;
  color: #58d8db;
  font-weight: bold;
  font-style: italic;
}
.pkrecords-content {
  position: absolute;
  top: 300rpx;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scroll{
  width: 750rpx;
  height: 1100rpx;
}
.contentcard{
  width: 694.66rpx;
  height: 161.26rpx;
  border-radius: 15rpx;
  background-color: #ffffff;
  display: flex;
  margin-left:28.55rpx;
  margin-top: 25rpx;
  border: #5ed8db solid 1rpx;
}
.contentcard-titleA{
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: #58d8db solid 3rpx;
  border-top-left-radius: 15rpx;
  border-bottom-left-radius: 15rpx;
}
.contentcard-titleB{
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 15rpx;
  border-bottom-right-radius: 15rpx;
}
.ciontext{
  font-size: 28rpx;
  color: #a2a2a2;
}
.cion{
  font-size: 36rpx;
  color: #100e0f;
  font-weight: bold;
}
</style>
