<template>
  <div class="pk">
    <!-- pK页面 -->
    <div class="el-scrollbar__wrap">
      <el-splitter>
        <el-splitter-panel collapsible>
          <el-splitter layout="vertical">
            <el-splitter-panel collapsible size="15%" :resizable="false">
              <!-- 顶部面板 -->
              <div class="demo-panel">
                <div class="controlPanel">
                  <!-- 选择今日PK还是PK大厅 -->
                  <div
                    class="today"
                    @touchstart="handleTouchStart"
                    @touchmove="handleTouchMove"
                    @touchend="handleTouchEnd"
                  >
                    <div class="today-text" @click="Switch">PK大厅</div>
                    <div class="today-text" @click="Switch">今日PK</div>
                    <!-- 滑块 -->
                    <div class="slider">
                      {{ PKistodayorhall ? "PK大厅" : "今日PK" }}
                    </div>
                  </div>

                  <div class="selectbox">
                    <!-- 国家 -->
                    <el-select-v2
                      v-model="countryvalue"
                      filterable
                      :options="country"
                      placeholder="请选择国家"
                      style="vertical-align: middle"
                      class="select"
                    />
                    <!-- 性别 -->
                    <el-select-v2
                      v-model="gendervalue"
                      filterable
                      :options="genderOptions"
                      placeholder="请选择性别"
                      style="vertical-align: middle"
                      class="select"
                    />
                  </div>
                  <!-- 最大最小金币 -->
                  <div class="Goldcoinbox">
                    <div class="Goldcoinbox-left">
                      <div class="Goldcoinbox-text">最小金币数（单位为K）</div>
                      <el-input-number
                        v-model="minnum"
                        controls-position="right"
                        @change="handleChange"
                      />
                    </div>
                    <div class="Goldcoinbox-middle"></div>
                    <div class="Goldcoinbox-right">
                      <div class="Goldcoinbox-text">最大金币数（单位为K）</div>
                      <el-input-number
                        v-model="maxnum"
                        controls-position="right"
                        @change="handleChange"
                      />
                    </div>
                  </div>
                  <!-- 时间 -->
                  <div class="timebox" v-if="PKistodayorhall">
                    <el-date-picker
                      v-model="timevalue"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="最小PK时间"
                      end-placeholder="最大PK时间"
                      format="YYYY/MM/DD hh:mm"
                      value-format="x"
                    />
                  </div>
                  <div
                    class="btnbox"
                    :style="{
                      flexDirection: PKistodayorhall ? 'column' : 'row',
                      width: PKistodayorhall ? '5%' : '14%',
                    }"
                  >
                    <!-- 搜索按钮 -->
                    <div
                      class="search"
                      @click="search"
                      :style="{
                        transform: searchStatus ? 'scale(1.1)' : '',
                        boxShadow: searchStatus
                          ? '5px 5px 5px rgba(0, 0, 0, 0.5)'
                          : 'none',
                      }"
                    ></div>
                    <!-- 重置按钮 -->
                    <div
                      class="primary"
                      @click="reset"
                      :style="{
                        marginLeft: PKistodayorhall ? '0px' : '30px',
                        marginTop: PKistodayorhall ? '10px' : '0px',
                      }"
                    ></div>
                  </div>
                </div>
              </div>
            </el-splitter-panel>
            <el-splitter-panel collapsible>
              <el-splitter>
                <el-splitter-panel collapsible :resizable="false">
                  <!-- 列表面板 -->
                  <div class="demo-panel">
                    <div
                      v-infinite-scroll="load"
                      infinite-scroll-distance="100px"
                      class="infinite-list"
                      style="overflow: auto"
                    >
                      <div
                        class="infinite-list-item"
                        v-for="(item, index) in list"
                        :key="index"
                      >
                        <div
                          class="infinite-card"
                          @click="handleClick(item)"
                          :style="{
                            backgroundImage: item == handleClickdata ? '' : '',
                            background: item == handleClickdata ? '#FFFBFA' : '',
                            border: item == handleClickdata ? '1px solid #F4D0C9' : '',
                          }"
                        >
                          <!-- 头像 -->
                          <div class="Avatar">
                            <img
                              style="width: 100%; height: 100%; border-radius: 500px"
                              :src="item.anchorIcon"
                              mode="scaleToFill"
                            />
                          </div>
                          <div class="Information">
                            <!-- 个人信息 -->
                            <div class="Information-Personal">
                              <div class="Information-name">
                                {{ item.disPlayId }}
                              </div>
                              <div
                                class="Information-gender"
                                :style="{
                                  background: item.sex == 1 ? '#59D8DB' : '#F3876F',
                                }"
                              >
                                {{ item.sex == 1 ? "男" : "女" }}
                              </div>
                              <div class="Information-Country">
                                {{ item.country }}
                              </div>
                            </div>
                            <!-- 时间 -->
                            <div class="time">
                              PK时间（本地时间）:{{
                                TimestamptolocalTime(item.pkTime * 1000)
                              }}
                            </div>
                            <!--PK信息 -->
                            <div class="Information-PK">
                              <img
                                class="goldimg"
                                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                                alt=""
                              />
                              <div class="gold">金币：{{ item.coin }}K</div>
                              <img
                                class="sessionimg"
                                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
                                alt=""
                              />
                              <div class="Session">场次：{{ item.pkNumber }}场</div>
                            </div>
                            <!-- 备注信息 -->
                            <div class="Information-Remarks">
                              {{ item.remark }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-splitter-panel>
                <el-splitter-panel collapsible size="27%" :resizable="false">
                  <!-- 聊天面板 -->
                  <div class="demo-panel" >
                    <div class="chat" v-if="handleClickdata != null">
                      <div class="chat-name">{{ info.nickName }}</div>
                      <!-- 聊天列表 -->
                      <div class="chat-content">
                        <div class="chat-list" ref="chatlistContainer">
                          <!-- 消息本体 -->
                          <div
                            class="chat-message"
                            v-for="(item, index) in messageslist"
                            :key="index"
                          >
                            <!-- 对方消息 -->
                            <div
                              class="chat-message-Other"
                              v-if="item.senderId != user.id"
                            >
                              <div class="Other-Avatar">
                                <img
                                  class="Other-Avatar-img"
                                  :src="info.headerIcon"
                                  alt=""
                                />
                              </div>
                              <div class="Other-Triangle" v-if="item.type == 'text'">
                                <!-- 三角 -->
                              </div>
                              <div class="Other-Messages">
                                <!-- 文本消息 -->
                                <div
                                  class="Other-Message-Text"
                                  v-if="item.type == 'text'"
                                >
                                  {{ item.payload.text }}
                                </div>
                                <!-- 图片消息 -->
                                <PictureMessage
                                  :item="item"
                                  v-if="item.type == 'image'"
                                ></PictureMessage>
                                <!-- pk消息 -->
                                <miniPKMessage
                                  :item="item"
                                  v-if="item.type == 'pk'"
                                ></miniPKMessage>
                              </div>
                            </div>
                            <!-- 我方消息 -->
                            <div class="chat-message-Me" v-else>
                              <div class="Other-Messages">
                                <!-- 文本消息 -->
                                <div class="Me-Message-Text" v-if="item.type == 'text'">
                                  {{ item.payload.text }}
                                </div>
                                <!-- 图片消息 -->
                                <PictureMessage
                                  :item="item"
                                  v-if="item.type == 'image'"
                                ></PictureMessage>
                                <!-- PK消息 -->
                                <miniPKMessage
                                  :item="item"
                                  v-if="item.type == 'pk'"
                                ></miniPKMessage>
                                <!--  -->
                              </div>
                              <div class="Me-Triangle" v-if="item.type == 'text'">
                                <!-- 三角 -->
                              </div>
                              <div class="Other-Avatar">
                                <img
                                  class="Other-Avatar-img"
                                  :src="user.headerIcon"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 聊天输入框 -->
                      <div class="chat-input">
                        <!-- 控件 -->
                        <div class="chat-input-Controls">
                          <!-- 其他的消息 -->
                          <div class="chat-input-Other">
                            <!-- 图片 -->
                            <div class="Picture" @click="handleClickImg">
                              <img
                                class="Picture-img"
                                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Album.png"
                                alt=""
                              />
                            </div>
                            <!-- 邀请 -->
                            <div class="Invitation" @click="handleClickinvite">
                              <img
                                class="Picture-img"
                                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chat_invite.png"
                                alt=""
                              />
                            </div>
                          </div>
                          <!-- 发送 -->
                          <div class="chat-input-Send" @click="sendMsg">发送</div>
                        </div>
                        <!-- 输入框 -->
                        <div class="chat-input-Textarea">
                          <div class="demo-panel">
                            <div class="inputBox">
                              <div class="Console">
                                <div class="Console-content"></div>
                              </div>
                              <div class="input">
                                <textarea
                                  v-model="textarea"
                                  class="textarea"
                                  style="width: 100%; height: 100%"
                                  @keydown.enter.native="sendMsg"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="chatNotDeta" v-if="handleClickdata == null">
                        <div class="chatNotDeta-text">
                          右方选择主播立即聊天
                        </div>
                    </div>
                  </div>
                  <!--  -->
                </el-splitter-panel>
              </el-splitter>
            </el-splitter-panel>
          </el-splitter>
        </el-splitter-panel>
      </el-splitter>
    </div>
    <!--  -->
  </div>

  <!-- 弹窗 -->
  <el-dialog v-model="PKInvitationdialog" center title="PK邀请" width="800" align-center>
    <div class="PKcontent">
      <div class="pk-infinite-list-item">
        <div
          class="pk-infinite-card"
          @click="otherParticipates = true"
          v-if="hostOtherSide != null"
        >
          <!-- 头像 -->
          <div class="Avatars">
            <img
              style="width: 100%; height: 100%; border-radius: 500px"
              :src="hostOtherSide.anchorIcon"
              mode="scaleToFill"
            />
          </div>
          <div class="pk-Information">
            <!-- 个人信息 -->
            <div class="pk-Information-Personal">
              <div class="pk-Information-name">
                {{ hostOtherSide.anchorId }}
              </div>
              <div
                class="pk-Information-gender"
                :style="{
                  background: hostOtherSide.sex == 1 ? '#59D8DB' : '#F3876F',
                }"
              >
                {{ hostOtherSide.sex == 1 ? "男" : "女" }}
              </div>
              <div class="pk-Information-Country">
                {{ hostOtherSide.country }}
              </div>
            </div>
            <!-- 时间 -->
            <div class="pk-time">
              PK时间（本地时间）:{{ TimestamptolocalTime(hostOtherSide.pkTime * 1000) }}
            </div>
            <!--PK信息 -->
            <div class="pk-Information-PK">
              <img
                class="pk-goldimg"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                alt=""
              />
              <div class="pk-gold">金币：{{ hostOtherSide.coin }}K</div>
              <img
                class="pk-sessionimg"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
                alt=""
              />
              <div class="pk-Session">场次：{{ hostOtherSide.pkNumber }}场</div>
            </div>
            <!-- 备注信息 -->
            <div class="pk-Information-Remarks">
              {{ hostOtherSide.remark }}
            </div>
          </div>
        </div>
        <div
          class="nodata"
          @click="otherParticipates = true"
          v-if="hostOtherSide == null"
        >
          选择对方的PK主播
        </div>
      </div>
      <!--  -->
      <div class="pk-infinite-list-item">
        <div
          class="pk-infinite-card"
          @click="myParticipates = true"
          v-if="hostmySide != null"
        >
          <!-- 头像 -->
          <div class="Avatars">
            <img
              style="width: 100%; height: 100%; border-radius: 500px"
              :src="hostmySide.anchorIcon"
              mode="scaleToFill"
            />
          </div>
          <div class="pk-Information">
            <!-- 个人信息 -->
            <div class="pk-Information-Personal">
              <div class="pk-Information-name">
                {{ hostmySide.anchorId }}
              </div>
              <div
                class="pk-Information-gender"
                :style="{
                  background: hostmySide.sex == 1 ? '#59D8DB' : '#F3876F',
                }"
              >
                {{ hostmySide.sex == 1 ? "男" : "女" }}
              </div>
              <div class="pk-Information-Country">
                {{ hostmySide.country }}
              </div>
            </div>
            <!-- 时间 -->
            <div class="pk-time">
              PK时间（本地时间）:{{ TimestamptolocalTime(hostmySide.pkTime * 1000) }}
            </div>
            <!--PK信息 -->
            <div class="pk-Information-PK">
              <img
                class="pk-goldimg"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                alt=""
              />
              <div class="pk-gold">金币：{{ hostmySide.coin }}K</div>
              <img
                class="pk-sessionimg"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
                alt=""
              />
              <div class="pk-Session">场次：{{ hostmySide.pkNumber }}场</div>
            </div>
            <!-- 备注信息 -->
            <div class="pk-Information-Remarks">
              {{ hostmySide.remark }}
            </div>
          </div>
        </div>
        <div class="nodata" @click="myParticipates = true" v-if="hostmySide == null">
          选择自己的PK主播
        </div>
      </div>
      <!--  -->
      <div class="PKcontentbtn">
        <div class="myAnchorDialogReset" @click="resets">取消</div>
        <div class="myAnchorDialogConfirm" @click="PKInvitationdialogclick">确认</div>
      </div>
    </div>
  </el-dialog>

  <!-- 选择对方主播弹窗 -->
  <el-dialog
    v-model="otherParticipates"
    center
    title="选择对方参与PK的主播"
    width="800"
    align-center
  >
    <div class="myanchor-content">
      <div class="myanchor-list">
        <div class="pk-infinite-list-item" v-for="(item, index) in getAnchorListdata">
          <div
            class="pk-infinite-card"
            @click="selectOtherAnchor(item)"
            :style="{
              backgroundImage: item == hostOtherSidenotSure ? '' : '',
              background: item == hostOtherSidenotSure ? '#FFFBFA' : '',
              border: item == hostOtherSidenotSure ? '1px solid #F4D0C9' : '',
            }"
          >
            <!-- 头像 -->
            <div class="Avatars">
              <img
                style="width: 100%; height: 100%; border-radius: 500px"
                :src="item.anchorIcon"
                mode="scaleToFill"
              />
            </div>
            <div class="pk-Information">
              <!-- 个人信息 -->
              <div class="pk-Information-Personal">
                <div class="pk-Information-name">
                  {{ item.anchorId }}
                </div>
                <div
                  class="pk-Information-gender"
                  :style="{
                    background: item.sex == 1 ? '#59D8DB' : '#F3876F',
                  }"
                >
                  {{ item.sex == 1 ? "男" : "女" }}
                </div>
                <div class="pk-Information-Country">
                  {{ item.country }}
                </div>
              </div>
              <!-- 时间 -->
              <div class="pk-time">
                PK时间（本地时间）:{{ TimestamptolocalTime(item.pkTime * 1000) }}
              </div>
              <!--PK信息 -->
              <div class="pk-Information-PK">
                <img
                  class="pk-goldimg"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                  alt=""
                />
                <div class="pk-gold">金币：{{ item.coin }}K</div>
                <img
                  class="pk-sessionimg"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
                  alt=""
                />
                <div class="pk-Session">场次：{{ item.pkNumber }}场</div>
              </div>
              <!-- 备注信息 -->
              <div class="pk-Information-Remarks">
                {{ item.remark }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="myanchor-dialog-btn">
        <div class="myAnchorDialogReset" @click="otherParticipates = false">取消</div>
        <div class="myAnchorDialogConfirm" @click="otherParticipatesDialogConfirm()">
          确认
        </div>
      </div>
    </div>
  </el-dialog>

  <!-- 选择我的主播弹窗 -->
  <el-dialog
    v-model="myParticipates"
    center
    title="选择我方参与PK的主播"
    width="800"
    align-center
  >
    <div class="myanchor-content">
      <div class="myanchor-list">
        <div class="pk-infinite-list-item" v-for="(item, index) in getMyAnchorListdata">
          <div
            class="pk-infinite-card"
            @click="selectMyAnchor(item)"
            :style="{
              backgroundImage: item == hostmySidenotSure ? '' : '',
              background: item == hostmySidenotSure ? '#FFFBFA' : '',
              border: item == hostmySidenotSure ? '1px solid #F4D0C9' : '',
            }"
          >
            <!-- 头像 -->
            <div class="Avatars">
              <img
                style="width: 100%; height: 100%; border-radius: 500px"
                :src="item.anchorIcon"
                mode="scaleToFill"
              />
            </div>
            <div class="pk-Information">
              <!-- 个人信息 -->
              <div class="pk-Information-Personal">
                <div class="pk-Information-name">
                  {{ item.anchorId }}
                </div>
                <div
                  class="pk-Information-gender"
                  :style="{
                    background: item.sex == 1 ? '#59D8DB' : '#F3876F',
                  }"
                >
                  {{ item.sex == 1 ? "男" : "女" }}
                </div>
                <div class="pk-Information-Country">
                  {{ item.country }}
                </div>
              </div>
              <!-- 时间 -->
              <div class="pk-time">
                PK时间（本地时间）:{{ TimestamptolocalTime(item.pkTime * 1000) }}
              </div>
              <!--PK信息 -->
              <div class="pk-Information-PK">
                <img
                  class="pk-goldimg"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                  alt=""
                />
                <div class="pk-gold">金币：{{ item.coin }}K</div>
                <img
                  class="pk-sessionimg"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
                  alt=""
                />
                <div class="pk-Session">场次：{{ item.pkNumber }}场</div>
              </div>
              <!-- 备注信息 -->
              <div class="pk-Information-Remarks">
                {{ item.remark }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="myanchor-dialog-btn">
        <div class="myAnchorDialogReset" @click="myParticipates = false">取消</div>
        <div class="myAnchorDialogConfirm" @click="myParticipatesDialogConfirm()">
          确认
        </div>
      </div>
    </div>
  </el-dialog>

  <el-dialog v-model="reminder" center title="提示" width="400" align-center>
    <div class="reminder-content">
      <div class="reminder-text">
        <div>
          您确定要发送PK邀请消息吗？邀请成功后的pk不可修改，不可删除，请谨慎操作！
        </div>
      </div>
      <div class="myanchor-dialog-btn">
        <div class="remindermyAnchorDialogReset" @click="reminder = false">取消</div>
        <div class="remindermyAnchorDialogConfirm" @click="reminderDialogConfirm()">
          确认
        </div>
      </div>
    </div>
  </el-dialog>
  <!--  -->
</template>

<script setup>
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
  computed, // 计算属性
  nextTick, // 异步更新视图
  onBeforeUnmount,
} from "vue";
import { getCountryNamesArray } from "../../utils/countryUtil";
import { getPkList, getUserInfo } from "@/api/account";
import { setStorage, getStorage, getPromiseStorage } from "@/utils/storage.js";
import { TimestamptolocalTime } from "@/utils/timeConversion.js";
import {
  goEasyGetConversations,
  goEasyGetMessages,
  goEasySendMessage,
  goEasySendImageMessage,
  goEasySendPKMessage,
  goEasyMessageRead,
} from "@/utils/goeasy.js";
import { ElMessage } from "element-plus";
import { goeasy } from "../../main";
import GoEasy from "goeasy";
import { getAnchorListById, createPkRecord } from "@/api/account";
import PictureMessage from "@/components/chatMessage/PictureMessage";
import miniPKMessage from "@/components/chatMessage/miniPKMessage";
var im = goeasy.im;
const country = ref([]);
country.value = getCountryNamesArray(); //国家条目
const PKistodayorhall = ref(true); // 选择今日PK还是PK大厅/false 今日PK/true PK大厅
const searchStatus = ref(false); // 搜索状态
const countryvalue = ref(null); //选中的国家
const gendervalue = ref(null); // 选中的性别
const minnum = ref(null); // 最小金币
const maxnum = ref(null); // 最大金币
const timevalue = ref(null); // 时间
const textarea = ref(""); // 聊天输入框
const list = ref([]); // 列表数据
const HallList = ref([]); // PK大厅列表数据
const TodayList = ref([]); // PK列表数据
const page = ref(0); // 页码
const user = ref({}); // 用户信息
const info = ref({}); // 对方用户信息
const chatlistContainer = ref(null); // 聊天列表容器引用
const isLoading = ref(false); // 防止重复加载
const isPage = ref(false); // 是否在页面

const genderOptions = [
  { value: 1, label: "男" },
  { value: 2, label: "女" },
]; // 性别选项
const handleClickdata = ref(null); // 点击列表数据
const messageslist = ref([]); // 聊天列表数据
// ``````````````````````邀请消息``````````````````````````````````
const PKInvitationdialog = ref(false); // PK邀请弹窗
const hostOtherSide = ref(null); // 邀请对方的主播
const hostmySide = ref(null); // 邀请自己的主播
const otherParticipates = ref(false); // 选择对方参与PK的主播弹窗
const myParticipates = ref(false); // 选择我方参与PK的主播弹窗
const getAnchorListdata = ref(null); // 对方已发布的未被邀请的主播列表
const getMyAnchorListdata = ref(null); // 我方已发布的未被邀请的主播列表
const hostOtherSidenotSure = ref(null); // 邀请对方的主播未确定
const hostmySidenotSure = ref(null); // 邀请自己的主播未确定
const reminder = ref(false); // 提示弹窗

//确认对方参与PK的主播
function otherParticipatesDialogConfirm() {
  if (hostOtherSidenotSure.value) {
    hostOtherSide.value = hostOtherSidenotSure.value;
    otherParticipates.value = false;
  } else {
    ElMessage.error("请选择对方参与PK的主播");
  }
}
//确认我方参与PK的主播
function myParticipatesDialogConfirm() {
  if (hostmySidenotSure.value) {
    hostmySide.value = hostmySidenotSure.value;
    myParticipates.value = false;
  } else {
    ElMessage.error("请选择我方参与PK的主播");
  }
}

// 选择对方主播
function selectOtherAnchor(item) {
  hostOtherSidenotSure.value = item;
}

// 选择自己的主播
function selectMyAnchor(item) {
  hostmySidenotSure.value = item;
}

//查询对方已发布的未被邀请的主播列表
function getAnchorList() {
  getAnchorListById({
    userId: info.value.id,
  }).then((res) => {
    getAnchorListdata.value = res;
  });
}
//查询我方已发布的未被邀请的主播列表
function getMyAnchorList() {
  getAnchorListById({
    userId: user.value.id,
  }).then((res) => {
    getMyAnchorListdata.value = res;
  });
}

//确认邀请
function reminderDialogConfirm() {
  createPkRecord({
    pkIdA: hostOtherSide.value.id,
    pkIdB: hostmySide.value.id,
    userIdA: info.value.id,
    userIdB: user.value.id,
    pkTime: hostOtherSide.value.pkTime,
    pkNumber: hostOtherSide.value.pkNumber,
    anchorIdA: hostOtherSide.value.anchorId,
    anchorIdB: hostmySide.value.anchorId,
    anchorIconA: hostOtherSide.value.anchorIcon,
    anchorIconB: hostmySide.value.anchorIcon,
    piIdA: hostOtherSide.value.id,
    piIdB: hostmySide.value.id,
  }).then((res) => {
    const data = {
      msgid: res.id,
      pkIdA: hostOtherSide.value.id,
      pkIdB: hostmySide.value.id,
      id: String(info.value.id),
      avatar: info.value.headerIconr,
      nickname: info.value.nickName,
    };
    goEasySendPKMessage(data).then((res) => {
      messageslist.value.push(res);
      reminder.value = false;
      resets();
      nextTick(() => {
        if (chatlistContainer.value) {
          chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
        }
      });
    });
  });
}
// PK邀请弹窗
function PKInvitationdialogclick() {
  if (hostOtherSide.value && hostmySide.value) {
    reminder.value = true;
  } else {
    ElMessage.error("请选择对方和自己的主播");
    return;
  }
}
//取消PK邀请弹窗
function resets() {
  PKInvitationdialog.value = false;
  hostOtherSidenotSure.value = null;
  hostmySidenotSure.value = null;
  hostOtherSide.value = null;
  hostmySide.value = null;
}
// 邀请消息
const handleClickinvite = () => {
  getAnchorList();
  getMyAnchorList();
  PKInvitationdialog.value = true;
};

// ·····························································
//发送图片消息
const fileInput = ref(null);

const handleClickImg = () => {
  if (!fileInput.value) {
    fileInput.value = document.createElement("input");
    fileInput.value.type = "file";
    fileInput.value.accept = "image/*";
    fileInput.value.style.display = "none";
    fileInput.value.addEventListener("change", handleFileSelect);
    document.body.appendChild(fileInput.value);
  }
  fileInput.value.click();
};

const handleFileSelect = (event) => {
  const file = event.target.files[0];
  if (file) {
    goEasySendImageMessage({
      imagefile: file,
      id: String(info.value.id),
      avatar: info.value.headerIcon,
      nickname: info.value.nickName,
    }).then((res) => {
      messageslist.value.push(res);
      nextTick(() => {
        if (chatlistContainer.value) {
          chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
        }
      });
    });
  }
};

//发送消息
function sendMsg() {
  if (textarea.value.trim() === "") {
    return;
  }
  goEasySendMessage({
    text: textarea.value,
    id: String(info.value.id),
    avatar: info.value.headerIcon,
    nickname: info.value.nickName,
  }).then((res) => {
    messageslist.value.push(res);
    textarea.value = "";
    nextTick(() => {
      if (chatlistContainer.value) {
        chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
      }
    });
  });
}
// 选中主播后获取聊天列表数据
function handleClick(time) {
  im.on(GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, onPrivateMessageReceived);
  handleClickdata.value = time;
  isPage.value = true;
  messageRead();
  getUserInfo({
    id: handleClickdata.value.senderId,
  }).then((res) => {
    info.value = res;
    goEasyGetMessages({
      id: String(handleClickdata.value.senderId),
      timestamp: null,
    }).then((res) => {
      messageslist.value = res;
      nextTick(() => {
        if (chatlistContainer.value) {
          chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
        }
      });
      chatlistContainer.value.addEventListener("scroll", scrollHandler);
    });
  });
}

// 加载更多消息
function loadMore() {
  if (isLoading.value) return;
  isLoading.value = true;
  // // 这里添加加载更多消息逻辑/加载完后才改为false
  getMoreMessages();
}

//消息已读
function messageRead() {
  goEasyMessageRead({
    id: String(handleClickdata.value.senderId),
  }).then((res) => {});
}

//私聊消息接收
function onPrivateMessageReceived(message) {
  messageslist.value.push(message);
  if (isPage.value) {
    messageRead();
  }

  nextTick(() => {
    if (chatlistContainer.value) {
      // 只有当用户已经滚动到底部或接近底部时才自动滚动
      const container = chatlistContainer.value;
      const threshold = 500; // 距离底部100px以内算作"接近底部"
      const isNearBottom =
        container.scrollHeight - container.scrollTop - container.clientHeight <=
        threshold;

      if (isNearBottom) {
        container.scrollTop = container.scrollHeight;
      }
    }
  });
}
// 加载更多消息
function getMoreMessages() {
  if (messageslist.value.length == 0) {
    return;
  }
  // 记录当前第一条消息的ID和滚动位置
  const firstMessageId = messageslist.value[0].messageId;
  const currentScrollPosition = chatlistContainer.value.scrollTop;
  const container = chatlistContainer.value;
  const initialHeight = container.scrollHeight;

  isLoading.value = true;
  goEasyGetMessages({
    id: String(handleClickdata.value.senderId),
    timestamp: messageslist.value[0].timestamp,
  })
    .then((res) => {
      isLoading.value = false;
      // 添加新消息到列表开头
      messageslist.value.unshift(...res);

      nextTick(() => {
        // 计算新增内容的高度
        const heightAdded = container.scrollHeight - initialHeight;
        // 设置新的滚动位置 = 原位置 + 新增高度
        container.scrollTop = currentScrollPosition + heightAdded;

        // 可选：滚动到之前的第一条消息
        const targetElement = document.getElementById(firstMessageId);
        if (targetElement) {
          targetElement.scrollIntoView();
        }
      });
    })
    .catch(() => {
      isLoading.value = false;
    });
}

// 滚动事件处理
function scrollHandler() {
  const container = chatlistContainer.value;
  if (container && container.scrollTop <= 0) {
    loadMore();
  }
}


// 获取pk列表
function PkList(body,type) {
  console.log("body", body);
  getPkList(body).then((res) => {
    console.log("res", res);
    if (type == "load" && res.length == []) {
      page.value--;
    }
    if (body.condition.type == 2 || body.condition.type == undefined) {
      HallList.value.push(...res);
      if (PKistodayorhall.value) {
        list.value = HallList.value;
      }
    } else if (body.condition.type == 1) {
      TodayList.value.push(...res);
      if (!PKistodayorhall.value) {
        list.value = TodayList.value;
      }
    }
  });
}

// 加载更多
function load() {
  if (searchStatus.value) {
    const body = {
      status: 0,
      page: page.value++,
      size: 10,
      userId: user.value.id,
      condition: {},
    };
    if (timevalue.value == null) {
      if (PKistodayorhall.value) {
        body.condition.type = 2;
      } else {
        body.condition.type = 1;
      }
    } else {
      if (PKistodayorhall.value) {
      } else {
        body.condition.type = 1;
      }
    }
    if (countryvalue.value != null) {
      body.condition.country = countryvalue.value;
    }
    if (gendervalue.value != null) {
      body.condition.sex = gendervalue.value;
    }

    if (minnum.value != null && maxnum.value != null) {
      body.condition.coin = {
        start: minnum.value,
        end: maxnum.value,
      };
    } else if (minnum.value != null && maxnum.value == null) {
      ElMessage.error("请输入最大金币数");
      return;
    } else if (minnum.value == null && maxnum.value != null) {
      ElMessage.error("请输入最小金币数");
      return;
    }
    if (timevalue.value != null) {
      const currentTime = Date.now();
      if (timevalue.value[0] < currentTime) {
        ElMessage.error("开始时间不能小于当前时间");
        return;
      }
      body.condition.pkTime = {
        start: timevalue.value[0] / 1000,
        end: timevalue.value[1] / 1000,
      };
    }
    PkList(body);
  } else {
    const body = {
      status: 0,
      page: page.value++,
      size: 10,
      userId: user.value.id,
      condition: {},
    };
    if (timevalue.value == null) {
      if (PKistodayorhall.value) {
        body.condition.type = 2;
      } else {
        body.condition.type = 1;
      }
    } else {
      if (PKistodayorhall.value) {
      } else {
        body.condition.type = 1;
      }
    }
    PkList(body,"load");
  }
}

// 切换今日PK还是PK大厅
function Switch() {
  searchStatus.value = false;
  PKistodayorhall.value = !PKistodayorhall.value;
  handleClickdata.value = null;
  if (PKistodayorhall.value) {
    list.value = HallList.value;
  } else {
    list.value = TodayList.value;
  }
}

//搜索按钮
function search(data) {
  handleClickdata.value = null;
  const body = {
    status: 0,
    size: 10,
    userId: user.value.id,
    condition: {},
  };

  if (timevalue.value == null) {
    if (PKistodayorhall.value) {
      body.condition.type = 2;
    } else {
      body.condition.type = 1;
    }
  } else {
    if (PKistodayorhall.value) {
    } else {
      body.condition.type = 1;
    }
  }

  if (countryvalue.value != null) {
    body.condition.country = countryvalue.value;
  }
  if (gendervalue.value != null) {
    body.condition.sex = gendervalue.value;
  }

  if (minnum.value != null && maxnum.value != null) {
    body.condition.coin = {
      start: minnum.value,
      end: maxnum.value,
    };
  } else if (minnum.value != null && maxnum.value == null) {
    ElMessage.error("请输入最大金币数");
    return;
  } else if (minnum.value == null && maxnum.value != null) {
    ElMessage.error("请输入最小金币数");
    return;
  }
  if (timevalue.value != null) {
    const currentTime = Date.now();
    if (timevalue.value[0] < currentTime) {
      ElMessage.error("开始时间不能小于当前时间");
      return;
    }
    body.condition.pkTime = {
      start: timevalue.value[0] / 1000,
      end: timevalue.value[1] / 1000,
    };
  }
  
  if (PKistodayorhall.value) {
    HallList.value = [];
  } else {
    TodayList.value = [];
  }

  body.page = 0;
  page.value = 0;
  list.value = [];
  if ((data = "Refresh")) {
    searchStatus.value = false;
  } else {
    searchStatus.value = true;
  }
  PkList(body);
  page.value = 1;
}

//重置按钮
function reset() {
  searchStatus.value = false;
  gendervalue.value = null;
  minnum.value = null;
  maxnum.value = null;
  countryvalue.value = null;
  timevalue.value = null;
  page.value = 0;
  search("Refresh");
}

// 计算滑块位置
const sliderPosition = computed(() => {
  return PKistodayorhall.value ? "1%" : "13%";
});
// 触摸事件处理
const touchStartX = ref(0);
const touchEndX = ref(0);
function handleTouchStart(e) {
  touchStartX.value = e.touches[0].clientX;
}
function handleTouchMove(e) {
  touchEndX.value = e.touches[0].clientX;
}
function handleTouchEnd() {
  const diff = touchStartX.value - touchEndX.value;
  if (Math.abs(diff) > 50) {
    // 滑动阈值
    PKistodayorhall.value = diff > 0;
  }
}
const refname = ref(""); //
watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
onMounted(() => {
  getPromiseStorage("user")
    .then((res) => {
      user.value = res;
      PkList({
        status: 0,
        page: 0,
        size: 10,
        userId: user.value.id,
        condition: {
          type: 1,
        },
      });
      PkList({
        status: 0,
        page: 0,
        size: 10,
        userId: user.value.id,
        condition: {
          type: 2,
        },
      });
      page.value = 1;
    })
    .catch((err) => {
      console.log(err);
    });
});
onUpdated(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
onBeforeUnmount(() => {
  // 组件销毁前执行
  isPage.value = false;
  im.off(GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, onPrivateMessageReceived);
});
</script>

<style scoped lang="less">
.pk {
  width: 100%;
  height: 100%;
  // background-color: #ffffff;
}
.demo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.el-scrollbar__wrap {
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.controlPanel {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.today {
  width: 320px;
  height: 60px;
  background-color: #4fcacd;
  border-radius: 30px;
  box-shadow: -5px 5px 6px #45aaac inset;
  display: flex;
  justify-content: space-around;
}
.today-text {
  width: 50%;
  height: 60px;
  text-align: center;
  color: #ffffff;
  font-size: 24px;
  line-height: 60px;
}
.slider {
  position: absolute;
  width: 160px;
  height: 60px;
  border-radius: 30px;
  color: #03aba8;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
  background-image: linear-gradient(180deg, #e4ffff, #ffffff);
  left: v-bind(sliderPosition);
  transition: left 0.3s ease;
}
.hall {
  width: 150px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50px;
  transition: all 0.4s ease;
  color: #e9e8e8;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  letter-spacing: 3px;
}
.hall:hover {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
  opacity: 0.8;
}
.hall:active {
  transform: scale(1.1) rotate(10deg);
}
.selectbox {
  display: flex;
  // flex-direction: column;
  align-items: center;
}
.select {
  width: 150px;
  margin-top: 10px;
  margin-left: 50px;
}
.Goldcoinbox {
  width: 330px;
  display: flex;
  margin-top: -5px;
  align-items: center;
  justify-content: space-between;
}
.Goldcoinbox-left {
  display: flex;
  flex-direction: column;
}
.Goldcoinbox-right {
  display: flex;
  flex-direction: column;
}
.Goldcoinbox-text {
  font-size: 10px;
  color: @Prompt-text-color;
}
.Goldcoinbox-middle {
  border-bottom: 2px solid #b9b9b9;
  width: 5px;
  height: 15px;
}
.timebox {
  width: 410px;
  margin-top: 10px;
}
.btnbox {
  padding-left: 20px;
  padding-right: 20px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.primary {
  width: 80px;
  height: 30px;
  border-radius: 5px;
  background-image: url(../../assets/Reset.png);
  background-size: 100% 100%;
  transition: all 0.4s ease;
}
.search {
  width: 80px;
  height: 30px;
  border-radius: 5px;
  background-image: url(../../assets/Search.png);
  background-size: 100% 100%;
  transition: all 0.4s ease;
}
.search:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.search:hover {
  transform: scale(1.2);
  opacity: 0.8;
}
.primary:hover {
  transform: scale(1.2);
  opacity: 0.8;
}
.primary:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.infinite-list {
  width: 100%;
  height: 100%;
  border-top-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background-color: #ffffff;
}
.infinite-list-item {
  width: 100%;
  height: 170px;
  margin-bottom: 20px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.infinite-card {
  width: 90%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: linear-gradient(0deg, @bg-Sidebar-color-top, @bg-color);
  border-radius: 11px;
  background-image: url(../../assets/PKbackground.png);
  background-size: 100% 100%;
  transition: all 0.4s ease;
}
.infinite-card:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
  opacity: 0.8;
}
.infinite-card:active {
  transition: all 0.1s ease;
  transform: scale(1) !important;
}
.Avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ececec;
  margin-left: 30px;
}
.Information {
  width: calc(100% - 160px);
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.Information-Personal {
  display: flex;
  align-items: center;
}
.Information-name {
  width: auto;
  font-size: 20px;
  font-weight: bold;
  color: @font-color;
}
.Information-gender {
  width: 50px;
  height: 20px;
  background-color: #e9e7e7;
  border-radius: 10px;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  letter-spacing: 2px;
  margin-left: 20px;
}
.Information-Country {
  width: auto;
  height: 20px;
  background-color: #e4f9f9;
  border-radius: 10px;
  color: #03aba8;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  letter-spacing: 2px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 20px;
}
.time {
  font-size: 16px;
  color: @Prompt-text-color;
}
.Information-PK {
  display: flex;
  align-items: center;
}
.goldimg {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.gold {
  font-size: 16px;
  color: @font-color;
}
.sessionimg {
  width: 20px;
  height: 20px;
  margin-left: 50px;
  margin-right: 10px;
}
.Session {
  font-size: 16px;
  color: @font-color;
}
.Information-Remarks {
  font-size: 14px;
  color: @Prompt-text-color;
}
.chat {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-top-right-radius: 16px;
  border-left: 1px solid #03aba82f;
}
.chatNotDeta{
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 16px;
  border-left: 1px solid #03aba82f;
}
.chatNotDeta-text{
  font-size: 20px;
  color: #03aba8;
  font-weight: bold;
}
.chat-name {
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  border-radius: 16px;
  // border-bottom: 3px solid #b9b9b9;
  color: @Prompt-text-color;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  letter-spacing: 3px;
  white-space: nowrap; /* 单行显示 */
  overflow: hidden;
  text-overflow: ellipsis; /* 显示省略号 */
}
.chat-content {
  width: 100%;
  height: calc(100% - 170px);
}
.chat-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
}
.chat-message {
  width: 100%;
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
.chat-message-Other {
  width: 100%;
  height: auto;
  display: flex;
}
.chat-message-Me {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: end;
}
.Other-Avatar {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: #c5c5c5;
  margin-right: 10px;
  margin-left: 10px;
}
.Other-Avatar-img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: #c5c5c5;
}
.Other-Triangle {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #f5f5f5;
  border-bottom: 10px solid transparent;
  margin-top: 12px;
}
.Me-Triangle {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 10px solid #7bbd0093;
  border-bottom: 10px solid transparent;
  margin-top: 12px;
}
.Other-Messages {
  background-color: #f5f5f5;
  border-radius: 10px;
  max-width: 70%;
}
.Other-Message-Text {
  font-size: 22px;
  color: #000000;
  border-radius: 10px;
  padding: 10px 20px;
}
.Me-Message-Text {
  background-color: #7bbd0093;
  border-radius: 10px;
  font-size: 18px;
  color: #000000;
  padding: 10px 20px;
}
.chat-input {
  width: 100%;
  height: 110px;
  // border-top: 1px solid #03aba8;
  // background-color: #dfdfdf;
}
.chat-input-Controls {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #e4f9f9;
}
.chat-input-Other {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
}
.Picture {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  transition: all 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  border: 1px solid #03aba800;
}
.Picture:hover {
  background-color: #ffffff;
  border: 1px solid #03aba82f;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.Picture:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.Invitation {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  transition: all 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  border: 1px solid #03aba800;
}
.Invitation:hover {
  background-color: #ffffff;
  border: 1px solid #03aba82f;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.Invitation:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.Picture-img {
  width: 50%;
  height: 50%;
}
.chat-input-Send {
  width: 20%;
  height: 70%;
  text-align: center;
  line-height: 35px;
  font-size: 16px;
  color: #03aba8;
  border-radius: 10px;
  margin-right: 6px;
  transition: all 0.4s ease;
}
.chat-input-Send:hover {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  background-color: #03aba82d;
  // color: #ffffff;
}
.chat-input-Send:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.chat-input-Textarea {
  width: 100%;
  height: 60px;
}
.inputBox {
  width: 100%;
  height: 100%;
  border-top: 2px solid #03aba82f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.input {
  width: 98%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.textarea {
  width: 90%;
  height: 90%;
  max-height: 90%;
  border: none;
  outline: none;
  overflow: hidden;
  background-color: #ff000000;
  font-size: 12px;
  margin-left: 5px;
  margin-right: 5px;
  color: #000000;
  letter-spacing: 1px;
  resize: none;
}
// 弹窗样式
.PKcontent {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 16px;
  background-image: linear-gradient(180deg, #e4ffff, #ffffff);
  border: 1px solid #03aba8;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.myanchor-content {
  width: 100%;
  height: 600px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.myanchor-list {
  width: 100%;
  height: 500px;
  background-color: #e0f4f1;
  border-radius: 16px;
  border: 1px solid #4fcacd;
  overflow: auto;
}
.pk-infinite-list-item {
  width: 100%;
  height: 170px;
  margin-bottom: 20px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pk-infinite-card {
  width: 90%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: linear-gradient(0deg, @bg-Sidebar-color-top, @bg-color);
  border-radius: 11px;
  background-image: url(../../assets/PKbackground.png);
  background-size: 100% 100%;
  transition: all 0.4s ease;
  border-radius: 10px;
}
.Avatars {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ececec;
  margin-left: 30px;
}
.pk-Information {
  width: calc(100% - 160px);
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pk-Information-Personal {
  display: flex;
  align-items: center;
}
.pk-Information-name {
  width: auto;
  font-size: 20px;
  font-weight: bold;
  color: @font-color;
}
.pk-Information-gender {
  width: 50px;
  height: 20px;
  background-color: #e9e7e7;
  border-radius: 10px;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  letter-spacing: 2px;
  margin-left: 20px;
}
.pk-Information-Country {
  width: auto;
  height: 20px;
  background-color: #e4f9f9;
  border-radius: 10px;
  color: #03aba8;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  letter-spacing: 2px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 20px;
}
.pk-time {
  font-size: 12px;
  color: @Prompt-text-color;
}
.pk-Information-PK {
  display: flex;
  align-items: center;
}
.pk-goldimg {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.pk-gold {
  font-size: 16px;
  color: @font-color;
}
.pk-sessionimg {
  width: 20px;
  height: 20px;
  margin-left: 50px;
  margin-right: 10px;
}
.pk-Session {
  font-size: 16px;
  color: @font-color;
}
.pk-Information-Remarks {
  font-size: 14px;
  color: @Prompt-text-color;
}
.nodata {
  width: 90%;
  height: 170px;
  text-align: center;
  font-size: 20px;
  color: #999999;
  line-height: 170px;
  background-image: url(../../assets/PKbackground.png);
  border-radius: 10px;
  background-size: 100% 100%;
  transition: all 0.4s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.PKcontentbtn {
  margin-top: 50px;
  width: 80%;
  display: flex;
  justify-content: space-between;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.myanchor-dialog-btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.myAnchorDialogReset {
  width: 300px;
  height: 50px;
  margin-top: 30px;
  text-align: center;
  line-height: 50px;
  background: linear-gradient(0deg, #e4ffff, #ffffff);
  color: #03aba8;
  font-size: 20px;
  transition: all 0.4s ease;
  border-radius: 100px;
  border: 1px solid #4fcacd;
}
.myAnchorDialogReset:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
  opacity: 0.8;
}
.myAnchorDialogReset:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.remindermyAnchorDialogReset {
  width: 150px;
  height: 30px;
  margin-top: 30px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(0deg, #e4ffff, #ffffff);
  color: #03aba8;
  font-size: 18px;
  transition: all 0.4s ease;
  border-radius: 100px;
  border: 1px solid #4fcacd;
}
.remindermyAnchorDialogReset:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
  opacity: 0.8;
}
.remindermyAnchorDialogReset:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.remindermyAnchorDialogConfirm {
  width: 150px;
  height: 30px;
  margin-top: 30px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(0deg, #4fcacd, #5fdbde);
  color: #ffffff;
  font-size: 18px;
  transition: all 0.4s ease;
  border-radius: 100px;
}
.remindermyAnchorDialogConfirm:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
  opacity: 0.8;
}
.remindermyAnchorDialogConfirm:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.myAnchorDialogConfirm {
  width: 300px;
  height: 50px;
  margin-top: 30px;
  text-align: center;
  line-height: 50px;
  background: linear-gradient(0deg, #4fcacd, #5fdbde);
  color: #ffffff;
  font-size: 20px;
  transition: all 0.4s ease;
  border-radius: 100px;
}

.myAnchorDialogConfirm:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
  opacity: 0.8;
}
.myAnchorDialogConfirm:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.reminder-content {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reminder-text {
  width: 90%;
  height: 200px;
  font-size: 18px;
  color: #03aba8;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<style>
.el-splitter-bar__disable:before {
  background-color: #ffffff00 !important;
}
</style>
