<template>
  <view class="page">
    <image src="../../static/HomeBackground.png" class="HomeBackground"></image>
  </view>
  <view class="top-navigation-container">
    <top-navigation
      @RealTimePk="goRealTimePk"
      @MakeAppointmentPK="goMakeAppointmentPK"
    ></top-navigation>
  </view>
  <view class="Advertisement" @click="goAdvertisement">
    <advertisement></advertisement>
  </view>
  <view class="contentList">
    <scroll-view
      scroll-y="true"
      class="scroll"
      refresher-enabled="true"
      refresher-threshold="40"
      @refresherrefresh="onRefresherRefresh"
      lower-threshold="100"
      @scrolltolower="onScrollToLower"
      :refresher-triggered="triggered"
    >
      <uni-card v-for="(item, index) in list">
        <view class="content-list" @click="goDetail(item)">
          <!-- `````````````````````````` -->
          <image class="headShot" :src="item.anchorIcon" mode="scaleToFill" />
          <!-- `````````````````````````````````````` -->
          <view class="content-list-title">
            <view class="cardname">{{ item.anchorId }}</view>
            <view class="content-list-info">
              <view
                :class="{ Gendermale: item.sex === '1', Genderfemale: item.sex === '2' }"
              >
                <image
                  v-if="item.sex === '2'"
                  class="Genderimg"
                  src="../../static/female.png"
                  mode="scaleToFill"
                />
                <image
                  v-else
                  class="Genderimg"
                  src="../../static/male.png"
                  mode="scaleToFill"
                />
                <view class="age">{{ item.sex === "1" ? "男" : "女" }}</view>
              </view>
              <view class="RoomID">PK时间:&nbsp;{{ formatDate(item.pkTime) }}</view>
              <view class="Charm">金币:</view>
              <view class="charmValue"> {{ item.coin + "K" }}</view>
            </view>
          </view>
          <!-- `````````````````````````````````````````````````````` -->
        </view>
      </uni-card>
    </scroll-view>
  </view>
  <view class="tabBar">
    <tabBar></tabBar>
  </view>
</template>

<script>
import topNavigation from "../../components/topNavigation/topNavigation";
import Advertisement from "../../components/Advertisement/Advertisement";
import tabBar from "../../components/tabBar/tabBar";
import TUIlogin from "../../components/TUILogin.js";
import request from "../../components/request.js";
import formatDate from "../../components/formatDate.js";
import { useCounterStore } from "@/stores/counter";
const counter = useCounterStore();
export default {
  inject: ["$global"],
  data() {
    return {
      info: {},
      myuserSig: "",
      chatInfo: {},
      page: 0, //页码
      size: 10, //每页条数
      list: [], // 列表数据
      detailsdata: {}, //详情数据
      triggered: false, //下拉刷新标识
      RealTimePklist: [], // PK大厅列表数据
      MakeAppointmentPKlist: [], // 今日PK列表数据
      listtype: 1, // 列表类型 1 当天 2 大于当天
    };
  },
  mounted() {
    // 页面加载完成后请求数据
    this.pkList({type:2});
    this.pkList({type:1});
  },
  onLoad() {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.info = res.data;
        counter.$patch({ myitem: this.info });
        uni.getStorage({
          key: "myuserSig",
          success: (res) => {
            this.myuserSig = res.data;
            uni.getStorage({
              key: "chatInfo",
              success: (res) => {
                this.chatInfo = res.data;
                TUIlogin(this.chatInfo.appId, this.info.id, this.myuserSig.userSig);
              },
            });
          },
        });
      },
    });
  },
  methods: {
    goMakeAppointmentPK() {
      this.listtype = 1;
      this.list = this.MakeAppointmentPKlist;
    },
    goRealTimePk() {
        this.listtype = 2;
        this.list = this.RealTimePklist;
    },
    goAdvertisement() {
      // this.$global.lastPage = getCurrentPages().router;
      uni.navigateTo({ url: "/pages/pkDetail/pkDetail" });
    },
    onRefresherRefresh() {
      this.page = 0;
      this.list = [];
      if(this.listtype === 1){
        this.MakeAppointmentPKlist = [];
      }else{
        this.RealTimePklist = [];
      }
      this.triggered = true;
      this.pkList({type:this.listtype});
    },
    async goDetail(item) {
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      console.log("id", item.id);
      const res = await request({
        url: "pk/pkInfoDetail",
        method: "POST",
        data: {
          id: item.id,
        },
        userInfo: true,
      });
      console.log("res", res);
      this.detailsdata = res.data;
      if (res.code === 200) {
        if (res.data.length !== 0) {
          uni.hideLoading();
          console.log("res.data", res.data);
          uni.navigateTo({
            url: "/pages/pkDetail/pkDetail",
            success: (res) => {
              res.eventChannel.emit("itemDetail", {
                item: this.detailsdata,
              });
            },
          });
        } else {
          uni.hideLoading();
          this.openPopupQuantity();
        }
      } else {
        uni.hideLoading();
        uni.showToast({
          title: "加载失败",
          icon: "none",
          duration: 2000,
        });
      }
    },
    formatDate: formatDate,

    async pkList(condition) {
      const res = await request({
        url: "pk/pkList",
        method: "POST",
        data: {
          status: 0,
          page: this.page,
          size: this.size,
          condition:condition
        },
        userInfo: false,
      });
      console.log(res);
      if (res.code === 200) {
        this.triggered = false;
        if (condition.type === 1) {
          this.MakeAppointmentPKlist.push(...res.data);
          if (condition.type == this.listtype) {
            this.list = this.MakeAppointmentPKlist;
          }
        } else {
          this.RealTimePklist.push(...res.data);
          if (condition.type == this.listtype) {
            this.list = this.RealTimePklist;
          }
        }
        }
      }
    },
    onScrollToLower() {
      this.page++;
      this.pkList({type:this.listtype});
    },
  components: {
    topNavigation,
    Advertisement,
    tabBar,
  },
};
</script>

<style scoped>
.page {
  position: relative;
  width: 750rpx;
  height: 1620rpx;
}

.HomeBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.top-navigation-container {
  position: fixed;
  top: 160rpx;
  left: 0;
  width: 100%;
  height: 114.5rpx;
}
.Advertisement {
  position: fixed;
  top: 300rpx;
  left: 0;
  width: 100%;
  height: 100rpx;
  z-index: 100;
}
.contentList {
  position: fixed;
  top: 412rpx;
  left: 0;
  bottom: 114.5rpx;
  width: 100%;
  /* height: 1300rpx; */
}
.scroll {
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.content-list {
  display: flex;
  align-items: center;
  width: 712rpx;
  height: 161rpx;
  background: #ffffff;
  border-radius: 15rpx;
  margin-bottom: 12rpx;
  margin-left: 20rpx;
}
.headShot {
  width: 101rpx;
  height: 101rpx;
  border-radius: 50rpx;
  margin-left: 30rpx;
  margin-right: 33rpx;
}
.content-list-info {
  display: flex;
  align-items: center;
}
.cardname {
  font-size: 31rpx;
  color: #161616;
  line-height: 38rpx;
}
.Genderimg {
  width: 15rpx;
  height: 15rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
}
.age {
  color: #ffffff;
  font-size: 14rpx;
}

.Gendermale {
  background: url(../../static/maleimg.png) no-repeat center;
  width: 56.3rpx;
  height: 29.58rpx;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  margin-right: 10rpx;
}
.Genderfemale {
  background: url(../../static/femaleimg.png) no-repeat center;
  width: 56.3rpx;
  height: 29.58rpx;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  margin-right: 10rpx;
}
.RoomID {
  font-size: 23rpx;
  color: #a3a3a3;
  line-height: 38rpx;
}
.Charm {
  font-size: 23rpx;
  color: #a3a3a3;
  line-height: 38rpx;
  margin-right: 12rpx;
  margin-left: 20rpx;
}
.charmValue {
  font-size: 23rpx;
  color: #161616;
  line-height: 38rpx;
  font-weight: 600;
}
</style>
