<template>
  <view class="container">
    <view class="bg">
      <image class="bgImg" src="../../static/HomeBackground.png" mode="scaleToFill" />
    </view>

    <view class="PersonalInformation">
      <view class="header">
        <image :src="userinfo.headerIcon" mode="scaleToFill" class="headerIcon" />
      </view>
      <view>
        <view class="name">{{ userinfo.nickName }}</view>
      </view>
      <view class="Settings" @click="goSetting">
        <image class="SettingsIcon" src="../../static/Settings.png" mode="scaleToFill" />
      </view>
    </view>
    <!-- PK信息  -->
    <view class="content">
      <view class="PKInformation" >
        <view class="title">
          <view class="titleText">PK信息</view>
          <view class="titleLine"></view>
          <view class="titleMore"
          @click="pkInformation"
            >更多PK信息<image
              style="width: 10.5rpx; height: 20.04rpx; margin-left: 10rpx"
              src="../../static/More.png"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="card">
          <view class="cardContent" v-for="(item,index) in pkInformationdata" :key="index">
            <view class="cardImg">
              <image :src="item.anchorIcon" mode="scaleToFill" />
            </view>
            <view class="Time">{{ formatDate(item.pkTime) }}</view>
            <view class="gold"> {{item.coin}}K</view>
          </view>
        </view>
      </view>
<!-- PK记录 -->
      <view class="myPkRecord" >
        <view class="title">
          <view class="titleText">我的PK记录</view>
          <view class="titleLine"></view>
          <view class="myPkRecordMore"
          @click="pkRecord">更多PK记录<image
              style="width: 10.5rpx; height: 20.04rpx; margin-left: 10rpx"
              src="../../static/More.png"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="card">
          <view class="cardContent"v-for="(item,index) in myPkRecorddata" :key="index">
            <view class="cardImg">
              <image :src="item.anchorIconA" mode="scaleToFill" />
            </view>
            <view class="Failure"v-if="item.winnerAnchorId !== item.anchorIdA">
                    失败
                  </view>
            <view class="Result" v-else-if="item.winnerAnchorId === item.anchorIdA"> 胜利 </view>
            <view class="Session"> 共{{item.pkNumber}}场 </view>
            <view class="Time">{{TimeFormatting(item.pkTime)}}</view>
          </view>
        </view>
      </view>

      <view class="PKInformation">
        <view class="title">
          <view class="titleText">专属客服</view>
          <view class="titleLine"></view>
        </view>
      </view>
      <view class="card">
        <view class="service" @click="contact">
          <image
            style="width: 48.28rpx; height: 48.09rpx"
            src="../../static/service.png"
            mode="scaleToFill"
          />
          <view class="cardtext">联系客服</view>
        </view>

        <view class="service" @click="serviceProtocol">
          <image
            style="width: 48.28rpx; height: 48.09rpx"
            src="../../static/Agreement.png"
            mode="scaleToFill"
          />
          <view class="cardtext">服务协议</view>
        </view>

        <view class="service" @click="logout">
          <image
            style="width: 48.28rpx; height: 48.09rpx"
            src="../../static/logout.png"
            mode="scaleToFill"
          />
          <view class="cardtext">退出登录</view>
        </view>
      </view>
    </view>
  </view>
  <view class="copyright">版权所有 © 2025 ...................</view> 

  <view class="tabBar">
    <tabBar></tabBar>
  </view>
</template>

<script>
import tabBar from "../../components/tabBar/tabBar";
import request from "../../components/request.js";
import formatDate from "../../components/formatDate.js";
import TimeFormatting from "../../components/TimeFormatting.js";

export default {
  data() {
    return {
      userinfo: {},
      pkInformationdata: [],
      myPkRecorddata: [],
    };
  },
  onShow() {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.userinfo = res.data;
        console.log(this.userinfo);
        this.getpkInformation();
        this.getmyPkRecord();
      },
    });
  },
  methods: {
    formatDate: formatDate,
    TimeFormatting: TimeFormatting,
    //获取pk信息
    getpkInformation(){
      const res = request({
          url: "user/queryMyAllPkData",
          method: "POST",
          data: {
            userId: this.userinfo.id,
            page:0,
            size:4
          },
          userInfo: false,
        }).then((res) => {
         if (res.code == 200) {
          this.pkInformationdata = res.data;
          console.log(this.pkInformationdata);
         }else {
          console.log(res.msg);
         }
        });
    },
    //获取pk记录
    getmyPkRecord(){
      const ress = request({
          url: "user/handlePkInfo",
          method: "POST",
          data: {
            type:1,
            userId: this.userinfo.id,
            page:0,
            size:4
          },
          userInfo: false,
        }).then((res) => {
         if (res.code == 200) {
          this.myPkRecorddata = res.data;
          console.log(this.myPkRecorddata);
         }else {
          console.log(res.msg);
         }
        });
    },
    // 跳转到PK信息页面
    pkInformation() {
      uni.navigateTo({
        url: "/pages/Mine/minecomponents/pkInformation",
      });
    },
    // 跳转到PK记录页面
    pkRecord() {
      uni.navigateTo({
        url: "/pages/Mine/minecomponents/pkRecord",
      });
    },
    // 跳转到联系客服页面
    contact() {
      uni.navigateTo({
        url: "/pages/Mine/minecomponents/contact",
      });
    },
    // 跳转到设置页面
    goSetting() {
      uni.navigateTo({
        url: "/pages/Setting/Setting",
      });
    },
    // 跳转到服务协议页面
    serviceProtocol() {
      uni.navigateTo({
        url: "/pages/Mine/minecomponents/serviceProtocol",
      });
    },
    // 退出登录
    logout() {
      uni.clearStorage()
      uni.reLaunch({
        url: "/pages/login/login",
      });
    },
  },
  components: {
    tabBar,
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.bgImg {
  width: 100%;
  height: 100%;
}
.PersonalInformation {
  position: absolute;
  top: 150rpx;
  left: 0;
  right: 0;
  height: 144.5rpx;
  display: flex;
  align-items: center;
}
.header {
  width: 144.5rpx;
  height: 144.5rpx;
  border-radius: 72.25rpx;
  background-color: #fff;
  margin-left: 32.5rpx;
  margin-right: 39.5rpx;
}
.Settings {
  width: 46rpx;
  height: 46rpx;
  margin-left: 360rpx;
}
.SettingsIcon {
  width: 100%;
  height: 100%;
}
.name {
  font-size: 36.26rpx;
  font-weight: 500;
  color: #161616;
}
.content {
  position: absolute;
  top: 294.5rpx;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.PKInformation {
  margin-top: 48.5rpx;
}
.myPkRecord {
  margin-top: 48.5rpx;
}
.title {
  width: 682rpx;
  height: 33.4rpx;
  display: flex;
  align-items: center;
}
.titleText {
  font-size: 34.35rpx;
  font-weight: bold;
  color: #100e0f;
}
.titleLine {
  width: 40.08rpx;
  height: 14.31rpx;
  margin-left: -40rpx;
  margin-top: 25rpx;
  border-radius: 7.16rpx 0rpx 7.16rpx 7.16rpx;
  background-color: #91e3e48b;
}
.titleMore {
  margin-left: 410rpx;
  font-size: 28.63rpx;
  color: #333333;
}
.myPkRecordMore {
  margin-left: 340rpx;
  font-size: 28.63rpx;
  color: #333333;
}
.card {
  width: 689.03rpx;
  height: 208.02rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-top: 26.5rpx;
  display: flex;
  align-items: center;
}
.card .cardContent:first-child {
  margin-left: 30rpx;
}

.cardContent {
  width: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 83rpx;
}
.cardImg {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: rgb(205, 205, 205);
}
.Time {
  font-size: 18rpx;
  text-align: center;
  margin-top: 10rpx;
}
.gold {
  font-size: 18rpx;
  text-align: center;
  margin-top: 10rpx;
}
.Failure {
  width: 56.3rpx;
  height: 29.58rpx;
  background-image: url("../../static/maleimg.png");
  background-position-x: center;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  font-size: 17.18rpx;
  text-align: center;
  line-height: 29.58rpx;
  margin-top: -20rpx;
}
.Result {
  width: 56.3rpx;
  height: 29.58rpx;
  background-image: url("../../static/femaleimg.png");
  background-position-x: center;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  font-size: 17.18rpx;
  text-align: center;
  line-height: 29.58rpx;
  margin-top: -20rpx;
}
.Session {
  font-weight: bold;
  font-size: 18rpx;
  margin-top: 10rpx;
}
.service {
  width: 200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cardtext {
  margin-top: 20rpx;
  font-size: 28.63rpx;
  color: #333333;
  font-weight: 400;
}
.copyright{
  font-size: 23rpx;
  color: #929292;
  text-align: center;
  position: fixed;
  bottom: 250rpx;
  left: 0;
  right: 0;
  height: 50rpx;
}
</style>
