<template>
  <view class="page">
    <image
      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
      class="HomeBackground"
    ></image>
  </view>
  <view class="top-navigation-container">
    <top-navigation
      @RealTimePk="goRealTimePk"
      @MakeAppointmentPK="goMakeAppointmentPK"
      @screening="goScreening"
    ></top-navigation>
  </view>
  <!-- <view class="Advertisement" @click="goAdvertisement">
    <advertisement></advertisement>
  </view> -->
  <view class="contentList">
    <scroll-view
      show-scrollbar="false"
      scroll-y="true"
      class="scroll"
      refresher-enabled="true"
      refresher-threshold="40"
      @refresherrefresh="onRefresherRefresh"
      lower-threshold="100"
      @scrolltolower="onScrollToLower"
      :refresher-triggered="triggered"
    >
      <uni-card v-if="list.length !== 0" v-for="(item, index) in list" :key="index">
        <view
          class="content-list"
          @click="goDetail(item)"
          :style="{
            border: item.isPin === true ? '2px solid #eeff00' : '2px solid #f5f5f5',
          }"
        >
          <!-- `````````````````````````` -->
          <image class="headShot" :src="item.anchorIcon" mode="scaleToFill" />
          <!-- `````````````````````````````````````` -->
          <view class="content-list-title">
            <view class="cardname">{{ item.disPlayId }}</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="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/female.png"
                  mode="scaleToFill"
                />
                <image
                  v-else
                  class="Genderimg"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/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>
      <view v-if="list.length === 0" class="no-content">暂无内容</view>
    </scroll-view>
  </view>
  <view class="tabBar">
    <tabBar :tabIndex="0" @publishSucces="onRefresherRefresh()"></tabBar>
  </view>
  <uni-popup ref="popup" position="right">
    <view class="popup-container">
      <view class="popup-title">筛选条件</view>
      <!-- 国家 -->
      <view class="p-country">
        <wht-select
          style="width: 350rpx"
          backgroundColor="#ffffff"
          placeholderColor="#666666"
          textColor="#666666"
          borderColor="#a3a3a3"
          @change="country"
          :options="Country"
          :filterable="filterable"
          placeholder="请选择国家"
          :value="countrys"
        />
      </view>
      <!-- 性别 -->
      <view class="popup-sex">
        <view class="p-sex">
          <wht-select
            style="width: 350rpx"
            backgroundColor="#ffffff"
            placeholderColor="#666666"
            textColor="#666666"
            borderColor="#a3a3a3"
            @change="gender"
            :options="Gender"
            placeholder="性别"
            :value="genders"
          />
        </view>
        <view class="Gendericoncss">
          <image
            v-if="genders === 0"
            class="Gendericon"
            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/ask.png"
            mode="scaleToFill"
          />
          <image
            v-if="genders === 1"
            class="Gendericon"
            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/man.png"
            mode="scaleToFill"
          />
          <image
            v-if="genders === 2"
            class="Gendericon"
            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/girl.png"
            mode="scaleToFill"
          />
        </view>
      </view>
      <!-- 金币 -->
      <view class="popup-coin">
        <view class="p-coin">
          <view class="p-coin-title">最小金币数</view>
          <uni-number-box
            :max="9999999999"
            background="ffffff"
            v-model="minNumberCoins"
          ></uni-number-box>
          <view class="Hintcss" v-if="minNumberCoins == '' && HintCion === true"
            >请填写金币数量</view
          >
        </view>
        <view class="p-dar">-</view>
        <view class="p-coin">
          <view class="p-coin-title">最大金币数</view>
          <uni-number-box
            :max="9999999999"
            background="#ffffff"
            v-model="maxNumberCoins"
          ></uni-number-box>
          <view class="Hintcss" v-if="maxNumberCoins == '' && HintCion === true"
            >请填写金币数量</view
          >
        </view>
      </view>
      <!-- 时间 -->
      <view class="p-time" v-if="listtype === 2">
        <view class="p-coin-title">最小PK时间</view>
        <uni-datetime-picker
          type="datetime"
          hide-second="true"
          v-model="mindatetimesingle"
        />
        <view class="Hintcss" v-if="mindatetimesingle == '' && HintTime === true"
          >请选择日期</view
        >
      </view>
      <view class="p-time" v-if="listtype === 2">
        <view class="p-coin-title">最大PK时间</view>
        <uni-datetime-picker
          type="datetime"
          hide-second="true"
          v-model="maxdatetimesingle"
        />
        <view class="Hintcss" v-if="maxdatetimesingle == '' && HintTime === true"
          >请选择日期</view
        >
      </view>
      <view class="popup-btn">
        <view class="popup-btn-cancel" @click="closePopup">取消</view>
        <view class="popup-btn-confirm" @click="confirm">确定</view>
        <view class="popup-btn-clear" @click="clear">清空</view>
      </view>
    </view>
  </uni-popup>
</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";
import optionsArray from "../../components/NationalDictionary.js";
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 大于当天
      filterable: true, //是否可搜索
      Country: optionsArray,
      countrys: "", //国家
      genders: 0, //性别
      Gender: [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ],
      minNumberCoins: "", //最小金币数
      maxNumberCoins: "", //最大金币数
      mindatetimesingle: "", //最小PK时间
      maxdatetimesingle: "", //最大PK时间
      HintCion: false, //金币提示信息
      HintTime: false, //时间提示信息
      ConfirmStatus: false, //确认弹窗状态
    };
  },
  onShow() {
    // 页面显示时请求数据
    this.page = 0;
    this.list = [];
    this.MakeAppointmentPKlist = [];
    this.RealTimePklist = [];
    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);
              },
            });
          },
        });
      },
    });
    // setTimeout(() => {
    //   uni.switchTab({ url: "/pages/Home/Home" });
    // }, 1000);
  },
  methods: {
    //关闭弹窗（取消）
    closePopup() {
      this.$refs.popup.close();
    },
    //格式化日期
     dateformat(date) {
      const isoString = date.replace(" ", "T");
      const timestamp = Date.parse(isoString);
      if (isNaN(timestamp)) {
        throw new Error(`Invalid date format: ${this.datetimesingle}`);
      }
      return Math.floor(timestamp / 1000);
    },
    //确认弹窗
    confirm() {
      //判断金币是否有为空
      this.ConfirmStatus = true;
      if (
        (this.minNumberCoins === "" && this.maxNumberCoins !== "") ||
        (this.minNumberCoins !== "" && this.maxNumberCoins === "")
      ) {
        this.HintCion = true;
        return;
      }
      if (
        (this.mindatetimesingle === "" && this.maxdatetimesingle !== "") ||
        (this.mindatetimesingle !== "" && this.maxdatetimesingle === "")
      ) {
        this.HintTime = true;
        return;
      }
      if (
        this.genders === 0 &&
        this.countrys === "" &&
        this.minNumberCoins === "" &&
        this.maxNumberCoins === "" &&
        this.mindatetimesingle === "" &&
        this.maxdatetimesingle === ""
      ) {
        if (this.listtype === 1) {
          this.MakeAppointmentPKlist = [];
        } else {
          this.RealTimePklist = [];
        }
        this.list = [];
        this.pkList({ type: this.listtype });
        this.closePopup();
        return;
      }
      this.closePopup();
      this.page = 0;
      this.list = [];
      if (this.listtype === 1) {
        this.MakeAppointmentPKlist = [];
        let condition = {
          type: this.listtype,
        };
        if (this.genders !== 0) {
          condition.sex = this.genders;
        }
        if (this.minNumberCoins !== "") {
          condition.coin = {
            start: this.minNumberCoins,
          };
        }
        if (this.maxNumberCoins !== "") {
          condition.coin.end = this.maxNumberCoins;
        }
        if (this.mindatetimesingle !== "") {
          condition.pkTime = {
            start: this.mindatetimesingle,
          };
        }
        if (this.maxdatetimesingle !== "") {
          condition.pkTime.end = this.maxdatetimesingle;
        }
        if (this.countrys !== "") {
          condition.country = this.countrys;
        }
        this.pkList(condition);
      } else {
        this.RealTimePklist = [];
        let condition = {};
        if (this.genders !== 0) {
          condition.sex = this.genders;
        }
        if (this.minNumberCoins !== "") {
          condition.coin = {
            start: this.minNumberCoins,
          };
        }
        if (this.maxNumberCoins !== "") {
          condition.coin.end = this.maxNumberCoins;
        }
        if (this.mindatetimesingle !== "") {
          condition.pkTime = {
            start: this.dateformat(this.mindatetimesingle),
          };
        }
        if (this.maxdatetimesingle !== "") {
          condition.pkTime.end = this.dateformat(this.maxdatetimesingle);
        }
        if (this.countrys !== "") {
          condition.country = this.countrys;
        }
        this.pkList(condition);
      }
    },
    //清空弹窗
    clear() {
      this.genders = 0;
      this.countrys = "";
      this.minNumberCoins = "";
      this.maxNumberCoins = "";
      this.mindatetimesingle = "";
      this.maxdatetimesingle = "";
      this.ConfirmStatus = false;
    },
    //获取国家
    country(item) {
      this.countrys = item.value;
    },
    //获取性别
    gender(item) {
      this.genders = item.value;
    },
    // 打开弹窗（筛选条件）
    goScreening() {
      this.$refs.popup.open("right");
    },
    //今日
    goMakeAppointmentPK() {
      this.listtype = 1;
      this.list = this.MakeAppointmentPKlist;
      this.clear();
    },
    //大厅
    goRealTimePk() {
      this.listtype = 2;
      this.list = this.RealTimePklist;
      this.clear();
    },
    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;
      if (this.ConfirmStatus) {
        if (
          this.genders === 0 &&
          this.countrys === "" &&
          this.minNumberCoins === "" &&
          this.maxNumberCoins === "" &&
          this.mindatetimesingle === "" &&
          this.maxdatetimesingle === ""
        ) {
          this.pkList({ type: this.listtype });
        } else {
          if (
            (this.minNumberCoins === "" && this.maxNumberCoins !== "") ||
            (this.minNumberCoins !== "" && this.maxNumberCoins === "")
          ) {
            this.pkList({ type: this.listtype });
            return;
          }
          if (
            (this.mindatetimesingle === "" && this.maxdatetimesingle !== "") ||
            (this.mindatetimesingle !== "" && this.maxdatetimesingle === "")
          ) {
            this.pkList({ type: this.listtype });
            return;
          }
          this.confirm();
        }
      } else {
        this.pkList({ type: this.listtype });
      }
    },
    async goDetail(item) {
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      //获取详情
      const res = await request({
        url: "pk/pkInfoDetail",
        method: "POST",
        data: {
          id: item.id,
          userId: this.info.id,
        },
        userInfo: true,
      });
      this.detailsdata = res.data;
      if (res.code === 200) {
        if (res.data.length !== 0) {
          uni.hideLoading();
          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) {
      console.log("`````````````````````````````",condition);
      //获取list
      const res = await request({
        url: "pk/pkList",
        method: "POST",
        data: {
          status: 0,
          page: this.page,
          size: this.size,
          condition: condition,
          userId: this.info.id,
        },
        userInfo: false,
      });
      if (res.code === 200) {
        console.log("````````````````````````````````",res.data);
        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;
          }
          if (condition.type == null) {
            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: 2;
}
.contentList {
  position: fixed;
  top: 312rpx;
  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;
  margin-bottom: 20rpx;
}
.Genderimg {
  width: 15rpx;
  height: 15rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
}
.age {
  color: #ffffff;
  font-size: 14rpx;
}

.Gendermale {
  background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/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(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/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;
}
.no-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28rpx;
  color: #a3a3a3;
  line-height: 40rpx;
  text-align: center;
}
.popup-container {
  height: 1626px;
  width: 650rpx;
  background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png);
  border-radius: 15rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-title {
  font-size: 50rpx;
  line-height: 50rpx;
  margin-top: 250rpx;
  font-weight: bold;
  background: linear-gradient(135deg, #00afb2, #4fcacd);
  -webkit-background-clip: text; /* 兼容 WebKit 内核 */
  background-clip: text;
  color: transparent; /* 隐藏原文字颜色 */
  -webkit-text-fill-color: transparent; /* Safari 兼容 */
}
.p-country {
  width: 500rpx;
  height: 100rpx;
  margin-top: 80rpx;
}
.popup-sex {
  width: 500rpx;
  height: 100rpx;
  margin-top: 40rpx;
  display: flex;
  justify-content: space-between;
}
.p-sex {
  width: 420rpx;
  height: 100rpx;
}
.Gendericoncss {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  border: 1rpx solid #ff9d0067;
  margin-left: 20rpx;
  margin-top: 10rpx;
}
.Gendericon {
  width: 40rpx;
  height: 40rpx;
  /* margin-top: 10rpx;
  margin-right: 40rpx; */
}
.popup-coin {
  width: 500rpx;
  margin-top: 40rpx;
  display: flex;
}
.p-coin {
  width: 500rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-dar {
  margin-top: 30rpx;
}
.p-coin-title {
  font-size: 20rpx;
  color: #a3a3a3;
}
.p-time {
  width: 500rpx;
  margin-top: 40rpx;
}
.popup-btn-cancel {
  width: 170rpx;
  height: 60rpx;
  font-size: 30rpx;
  color: #ffffff;
  line-height: 60rpx;
  text-align: center;
  margin-right: 20rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
}
.popup-btn-confirm {
  width: 170rpx;
  height: 60rpx;
  font-size: 30rpx;
  color: #ffffff;
  line-height: 60rpx;
  text-align: center;
  margin-right: 20rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  background-image: linear-gradient(135deg, #4fcd9d, #5fdeba);
}
.popup-btn-clear {
  width: 170rpx;
  height: 60rpx;
  font-size: 30rpx;
  color: #ffffff;
  line-height: 60rpx;
  text-align: center;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  background-image: linear-gradient(135deg, #cd924f, #debc5f);
}
.Hintcss {
  font-size: 18rpx;
  color: #ff5555;
}
.popup-btn {
  width: 600rpx;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 400rpx;
}
</style>
