<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="AnchorAICon">
              <view class="AnchorAIContext">实际打金币:</view>
              <view class="AnchorAIConNum">{{ formatCoinNum(iconNumber) }}</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">{{ formatCoinNum(item.userBCoins) }}</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">{{ formatCoinNum(items.anchorCoinA) }}</view>
              </view>
              <view
                class="contentcard-titleB"
                :style="{
                  'background-color':
                    items.anchorIdB == items.winnerAnchorId ? '#00fbff21' : '#ff000011',
                }"
              >
                <view class="ciontext">金币数量</view>
                <view class="cion">{{ formatCoinNum(items.anchorCoinB) }}</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,

      iconNumber: 123457,
    };
  },
  onLoad(options) {
    // 获取源页面的eventChannel对象
    const eventChannel = this.getOpenerEventChannel();
    // 监听itemDetail事件
    eventChannel.on("itemDetail", (data) => {
      this.item = data.item; // 将接收到的数据赋值给item
      this.getCoinNum(this.item);
    });
  },
  methods: {
    //金币数量格式化
    formatCoinNum(coin) {
      if (coin === null || coin === undefined) {
        return "";
      }
      if (coin < 1000) {
        return String(coin);
      }
      if (coin >= 1000000) {
        return "1M+";
      }
      const kValue = coin / 1000;
      const formattedString = kValue.toFixed(2); // 确保至少保留两位小数
      const matchResult = formattedString.match(/^\d+\.\d{0,2}/);
      if (matchResult === null) {
        return kValue.toFixed(2) + "k"; // 确保至少保留两位小数
      }
      const formatted = matchResult[0];
      return `${formatted}k`;
    },

    // 下拉刷新
    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>
