<template>
  <scroll-view show-scrollbar="false" scroll-y="true" class="scroll">
    <view class="container">
      <view class="bg">
        <image
          class="bgImg"
          src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
          mode="scaleToFill"
        />
      </view>

      <view class="PersonalInformation">
        <view class="header">
          <image
            :src="userinfo.headerIcon"
            style="width: 144.5rpx; height: 144.5rpx; border-radius: 72.25rpx"
            mode="scaleToFill"
            class="headerIcon"
          />
        </view>
        <view class="PersonalInformationContent">
          <view class="nameandSign">
            <view>
              <view class="name">{{ userinfo.nickName }}</view>
            </view>
            <!-- 签到 -->
            <view class="Sign" @click="sign" v-if="SignStatus === true">签到</view>
            <view class="Sign" v-if="SignStatus === false">已签到</view>
            <!--  -->
            <view class="Settings" @click="goSetting">
              <image
                class="SettingsIcon"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Settings.png"
                mode="scaleToFill"
              />
            </view>
          </view>
          <view class="level">
            <view class="points" @click="goPoints"
              >积分: {{ userinfo.points }}
              <image
                style="width: 15.5rpx; height: 15.04rpx; margin-left: 10rpx"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/coin_records.png"
                mode="scaleToFill"
              />
              <image
                style="width: 15.5rpx; height: 15.04rpx; margin-left: 0rpx"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/coin_records.png"
                mode="scaleToFill"
              />
              <image
                style="width: 15.5rpx; height: 15.04rpx; margin-left: 0rpx"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/coin_records.png"
                mode="scaleToFill"
              />
            </view>
          </view>
        </view>
      </view>

      <view class="content">
        <!-- 主播库 -->
        <view class="PKInformation">
          <view class="title">
            <view class="titleText">主播库</view>
            <view class="titleLine"></view>
            <view class="AnchorMore" @click="anchorLibrary"
              >更多主播信息<image
                style="width: 10.5rpx; height: 20.04rpx; margin-left: 10rpx"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
                mode="scaleToFill"
              />
            </view>
          </view>
          <view class="card" @click="anchorLibrary">
            <view
              class="cardContent"
              v-for="(item, index) in AnchorList"
              :key="index"
              v-if="AnchorList.length !== 0"
            >
              <view class="cardImg">
                <image
                  :src="item.headerIcon"
                  style="width: 80rpx; height: 80rpx; border-radius: 72.25rpx"
                  mode="scaleToFill"
                />
              </view>
              <view class="Time">{{ item.anchorId }}</view>
              <view class="gold"> {{ item.country }}</view>
            </view>
            <view v-if="AnchorList.length === 0" class="no-content">暂无内容</view>
          </view>
        </view>
        <!-- PK信息  -->
        <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="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
                mode="scaleToFill"
              />
            </view>
          </view>
          <view class="card" @click="pkInformation">
            <view
              class="cardContent"
              v-for="(item, index) in pkInformationdata"
              :key="index"
              v-if="pkInformationdata.length !== 0"
            >
              <view class="cardImg">
                <image
                  :src="item.anchorIcon"
                  style="width: 80rpx; height: 80rpx; border-radius: 72.25rpx"
                  mode="scaleToFill"
                />
              </view>
              <view class="Time">{{ formatDate(item.pkTime) }}</view>
              <view class="gold"> {{ item.coin }}K</view>
            </view>
            <view v-if="pkInformationdata.length === 0" class="no-content">暂无内容</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="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
                mode="scaleToFill"
              />
            </view>
          </view>
          <view class="card">
            <view
              class="cardContent"
              v-for="(item, index) in myPkRecorddata"
              :key="index"
              v-if="myPkRecorddata.length !== 0"
              @click="onItemClick(item)"
            >
              <view class="cardImg">
                <image
                  style="width: 80rpx; height: 80rpx; border-radius: 72.25rpx"
                  :src="item.anchorIconA"
                  mode="scaleToFill"
                />
              </view>
              <view
                class="Failure"
                v-if="
                  item.winnerAnchorId !== item.anchorIdA && item.winnerAnchorId !== null
                "
              >
                失败
              </view>
              <view
                class="Result"
                v-else-if="
                  item.winnerAnchorId === item.anchorIdA && item.winnerAnchorId !== null
                "
              >
                胜利
              </view>
              <view class="Session"> 共{{ item.pkNumber }}场 </view>
              <view class="Time">{{ TimeFormatting(item.pkTime) }}</view>
            </view>
            <view v-if="myPkRecorddata.length === 0" class="no-content">暂无内容</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="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/service.png"
              mode="scaleToFill"
            />
            <view class="cardtext">联系客服</view>
          </view>

          <view class="service" @click="serviceProtocol">
            <image
              style="width: 48.28rpx; height: 48.09rpx"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Agreement.png"
              mode="scaleToFill"
            />
            <view class="cardtext">服务协议</view>
          </view>

          <view class="service" @click="logout">
            <image
              style="width: 48.28rpx; height: 48.09rpx"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/logout.png"
              mode="scaleToFill"
            />
            <view class="cardtext">退出登录</view>
          </view>
        </view>
      </view>
      <view class="copyright">版权所有 © 2025 ...................</view>
    </view>
  </scroll-view>
  <view class="tabBar">
    <tabBar :tabIndex="4"></tabBar>
  </view>
  <uni-popup ref="popupExpurgate" type="center" border-radius="10px 10px 0 0">
    <view class="popup-container-expurgate">
      <view class="popup-title">您确定要退出登录吗？</view>
      <view class="popup-btn">
        <view class="uni-primary" @click="onExpurgateConfirm">确定</view>
        <view class="uni-default" @click="closePopupExpurgate">取消</view>
      </view>
    </view>
  </uni-popup>
</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";
import { TUILogin } from "@tencentcloud/tui-core";

export default {
  data() {
    return {
      userinfo: {},
      pkInformationdata: [],
      myPkRecorddata: [],
      SignStatus: null,
      AnchorList: [],
    };
  },
  onShow() {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        request({
          url: "user/getUserInfo",
          method: "POST",
          data: {
            id: res.data.id,
          },
          userInfo: true,
        }).then((res) => {
          if (res.code == 200) {
            this.userinfo = res.data;
            uni.setStorageSync("userinfo", res.data);
            this.getpkInformation();
            this.getmyPkRecord();
            this.getSignStatus();
            this.getAnchorList();
          } else {
            console.log(res.msg);
          }
        });
      },
    });
  },
  methods: {
    //获取个人信息
    getUserInfo() {
      request({
        url: "user/getUserInfo",
        method: "POST",
        data: {
          id: this.userinfo.id,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          this.userinfo = res.data;
          uni.setStorageSync("userinfo", res.data);
        } else {
          console.log(res.msg);
        }
      });
    },
    // 获取主播列表
    getAnchorList() {
      const res = request({
        url: "anchor/list",
        method: "POST",
        data: {
          id: this.userinfo.id,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          this.AnchorList = res.data.slice(0, 4);
        } else {
          console.log(res.msg);
        }
      });
    },
    // 获取签到状态
    getSignStatus() {
      const res = request({
        url: "user/checkSignStatus",
        method: "GET",
        data: {
          userId: Number(this.userinfo.id),
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          this.SignStatus = res.data;
        } else {
          console.log(res.msg);
        }
      });
    },
    //签到
    sign() {
      const res = request({
        url: "user/signIn",
        method: "POST",
        data: {
          userId: this.userinfo.id,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "签到成功",
            icon: "none",
            duration: 2000,
          });
          this.getSignStatus();
          this.getUserInfo();
        } else {
          console.log(res.msg);
        }
      });
    },
    formatDate: formatDate,
    TimeFormatting: TimeFormatting,
    //获取pk信息
    getpkInformation() {
      const res = request({
        url: "user/queryMyAllPkData",
        method: "POST",
        data: {
          userId: this.userinfo.id,
          page: 0,
          size: 4,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          this.pkInformationdata = res.data;
        } 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;
        } else {
          console.log(res.msg);
        }
      });
    },
    // 跳转到PK记录详情页面
    onItemClick(item) {
      uni.navigateTo({
        url: "/pages/Mine/minecomponents/DetailsPKRecords/DetailsPKRecords",
        success: (res) => {
          res.eventChannel.emit("itemDetail", {
            item: item,
          });
        },
      });
    },
    // 跳转到积分页面
    goPoints() {
      uni.navigateTo({
        url: "/pages/Mine/minecomponents/points",
      });
    },
    // 跳转到主播库页面
    anchorLibrary() {
      uni.navigateTo({
        url: "/pages/Mine/minecomponents/anchorLibrary",
      });
    },
    // 跳转到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() {
      this.$refs.popupExpurgate.open("center");
    },
    //确认退出登录
    onExpurgateConfirm() {
      uni.clearStorage();
      TUILogin.logout();
      uni.reLaunch({
        url: "/pages/login/login",
      });
    },
    // 关闭弹窗
    closePopupExpurgate() {
      this.$refs.popupExpurgate.close();
    },
  },
  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;
}
.PersonalInformationContent {
  display: flex;
  flex-direction: column;
}
.nameandSign {
  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: 30rpx;
}
.SettingsIcon {
  width: 100%;
  height: 100%;
}
.level {
  display: flex;
  height: 46rpx;
  margin-top: 20rpx;
  display: flex;
}
.points {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #a4a4a4;
}
.name {
  width: 280rpx;
  font-size: 36.26rpx;
  font-weight: 500;
  color: #161616;
  font-weight: bold;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.Sign {
  width: 100rpx;
  height: 50rpx;
  background-color: #91e3e4;
  border-radius: 20rpx;
  font-size: 20rpx;
  color: #fff;
  text-align: center;
  line-height: 50rpx;
  margin-left: 30rpx;
}
.content {
  position: absolute;
  top: 294.5rpx;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scroll {
  position: absolute;
  top: 0;
  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;
}
.AnchorMore {
  margin-left: 390rpx;
  font-size: 28.63rpx;
  color: #333333;
}
.titleMore {
  margin-left: 400rpx;
  font-size: 28.63rpx;
  color: #333333;
}
.myPkRecordMore {
  margin-left: 330rpx;
  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: 20rpx;
  text-align: center;
  margin-top: 10rpx;
}
.gold {
  font-size: 20rpx;
  text-align: center;
  margin-top: 10rpx;
}
.Failure {
  width: 56.3rpx;
  height: 29.58rpx;
  background-image: url("https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/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("https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/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: 20rpx;
  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: absolute;
  bottom: 0rpx;
  left: 0;
  right: 0;
  height: 50rpx;
}
.no-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28.63rpx;
  color: #333333;
}
.popup-container-expurgate {
  width: 500rpx;
  height: 300rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx;
}
.popup-title {
  font-size: 40rpx;
  color: #161616;
  font-weight: bold;
  margin-top: 30rpx;
  text-align: center;
}
.popup-btn {
  margin-top: 80rpx;
  display: flex;
  justify-content: center;
}
.uni-primary {
  width: 200rpx;
  height: 70rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
  font-size: 25rpx;
  color: #ffffff;
  text-align: center;
  line-height: 70rpx;
  margin-right: 35rpx;
}
.uni-default {
  width: 200rpx;
  height: 70rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  background-image: linear-gradient(135deg, #cecece, #d6d6d6);
  font-size: 25rpx;
  color: #161616;
  text-align: center;
  line-height: 70rpx;
}
</style>
