<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">
                          <!-- 头像 -->
                          <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">
                      <div class="chat-name">来自世界上最长名的国家的某个人</div>
                      <!-- 聊天列表 -->
                      <div class="chat-content"></div>
                      <!-- 聊天输入框 -->
                      <div class="chat-input">
                        <!-- 控件 -->
                        <div class="chat-input-Controls">
                          <!-- 其他的消息 -->
                          <div class="chat-input-Other">
                            <div class="messageModule"></div>
                          </div>
                          <!-- 发送 -->
                          <div class="chat-input-Send">发送</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%"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-splitter-panel>
              </el-splitter>
            </el-splitter-panel>
          </el-splitter>
        </el-splitter-panel>
      </el-splitter>
    </div>
    <!--  -->
  </div>
</template>

<script setup>
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
  computed, // 计算属性
} from "vue";
import { getCountryNamesArray } from "../../utils/countryUtil";
import { getPkList } from "@/api/account";
import { setStorage, getStorage, getPromiseStorage } from "@/utils/storage.js";
import { TimestamptolocalTime } from "@/utils/timeConversion.js";

import { ElMessage } from "element-plus";
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 genderOptions = [
  { value: 1, label: "男" },
  { value: 2, label: "女" },
]; // 性别选项

// 获取pk列表
function PkList(body) {
  getPkList(body).then((res) => {
    if (body.condition.type == 2 || body.condition.type == undefined) {
      HallList.value.push(...res);
      if (PKistodayorhall.value) {
        list.value = HallList.value;
      }
    } else {
      TodayList.value.push(...res);
      if (!PKistodayorhall.value) {
        list.value = TodayList.value;
      }
    }
  });
}
// 加载更多
function load() {
  page.value++;
  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 = 2;
      }
    } 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 = 2;
      }
    } else {
      if (PKistodayorhall.value) {
      } else {
        body.condition.type = 1;
      }
    }
    PkList(body);
  }
}

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

//搜索按钮
function search(data) {
  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 = 2;
    }
  } 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) {
    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);
}
//重置按钮
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: 1,
        size: 10,
        userId: user.value.id,
        condition: {
          type: 1,
        },
      });
      PkList({
        status: 0,
        page: 1,
        size: 10,
        userId: user.value.id,
        condition: {
          type: 2,
        },
      });
    })
    .catch((err) => {
      console.log(err);
    });
});
onUpdated(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
</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:hover {
  transform: scale(1.2);
  opacity: 0.8;
}
.primary:hover {
  transform: scale(1.2);
  opacity: 0.8;
}
.infinite-list {
  width: 100%;
  height: 100%;
  border-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;
}
.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;
}
.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-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;
}
.chat-input-Other {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
}
.messageModule {
  width: 50px;
  height: 50px;
  background-color: #03aba8;
}
.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-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;
}
</style>

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