<template>
  <div class="homeBox">
    <div class="nav">
      <div><span class="loogText">Xuaua</span></div>
      <div>
        <el-popover :width="700" trigger="click">
          <template #reference>
            <div class="selectInput">
              <div @click="selectClick">
                <el-icon :size="20" >
                  <Search />
                </el-icon>
              </div>
              <input type="text" placeholder="搜索关键词" v-model="selectType" />
            </div>
          </template>
          <!-- {{ selectType }} -->
          <TypeSelect @select="selectInput" :type="selectType"></TypeSelect>
        </el-popover>
      </div>
      <div @click="router.push('/user')">
        <el-avatar :size="40" :src="circleUrl" />用户名
      </div>
    </div>
    <div class="main">
      <div class="mainBox">
        <div class="topicInfo" ref="topicInfoRef" @click="huadong">
          <div
            ref="topicInfoItemRef"
            style="
              position: absolute;
              height: 100%;
              width: 100%;
              transition: 0.7s;
            "
          >
            <div
              v-for="itme in topicInfo.topicList"
              :key="itme.id"
              class="topicInfoItem"
            >
              <TopicBox
                :id="itme.id"
                :videoUrl="itme.videoUrl"
                :introduce="itme.introduce"
                :tags="itme.tags"
                :topicTitle="itme.topicTitle"
                :type="itme.type"
                :topicList="itme.xuauaQuestionAnswerList"
              />
            </div>
          </div>
        </div>
        <div class="topicAnswer">
          <div class="SelectAnswer">
            <div @click="get">视频</div>
            <div>解析</div>
            <div>
              <el-icon :size="27" :color="color">
                <Star />
              </el-icon>
            </div>
          </div>
          <div class="answerInfo">
            <VideoBox
              :src="topicInfo.topicList[topicInfo.index - 1].videoUrl"
            ></VideoBox>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.homeBox {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .nav {
    width: 100%;
    height: 8vh;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .loogText {
      font-size: 30px;
      margin-left: 10px;
    }
  }
  .main {
    width: 100%;
    //占满的剩余空间
    flex: 1;
    background-color: #ededed;
    display: flex;
    justify-content: center;
    align-items: center;
    .mainBox {
      width: 97%;
      height: 97%;
      background-color: #fff;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 20px;
      .topicInfo {
        // animation-duration: 2s;
        // animation-delay: 250ms;
        width: 30%;
        height: 100%;
        // background-color: #f0f9cc;
        overflow: hidden;
        position: relative;
        background-image: url("@/assets/image/tibg.jpg");
        background-size: cover; // 背景图片铺满元
        // background-position: center; // 背景图片居中显示
        background-repeat: no-repeat; // 背景图片不重复
        background-position: left left;
        .topicInfoItem {
          // top: -10px;
          // animation-duration: 2s;
          // animation-delay: 250ms;
          height: 100%;
          width: 100%;
          box-sizing: content-box;
          // border: 1px solid red;
        }
      }
      .topicAnswer {
        width: 69%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .SelectAnswer {
          width: 97%;
          margin: 0 auto;
          border-bottom: 1px #43cf7c solid;
          height: 7%;
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
        .answerInfo {
          width: 100%;
          height: 92%;
          box-sizing: border-box;
          padding: 20px;
          // background-color: #f0f9cc;
          background-image: url("@/assets/image/tibg.jpg");
          background-size: cover; // 背景图片铺满元
          background-position: center; // 背景图片居中显示
          background-repeat: no-repeat; // 背景图片不重复
        }
        // background-color: #F0F9CC;
      }
    }
  }
}
.selectInput {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 7px 10px;
  border: 2px #000000 solid;
  border-radius: 30px;
  input {
    background-color: #00000000; /* 透明背景 */
    border: none; /* 无边框 */
    outline: none; /* 去除聚焦时的轮廓 */
    padding: 0; /* 无内边距 */
    margin: 0; /* 无外边距 */
    width: 100%;
  }
}
</style>
<script setup>
import { reactive, ref, onMounted,watch } from "vue";
import { debounceRef} from '@/utils/debounceRef'
import TopicBox from "@/components/TopicBox.vue";
import VideoBox from "@/components/VideoBox.vue";
import TypeSelect from '@/components/TypeSelect.vue'
import { ElMessage } from "element-plus";
import "element-plus/theme-chalk/el-message.css";
import router from "@/router";
import { getQuestion } from "@/api/question/question";
const topicInfoItemRef = ref(null);
const selectType=debounceRef(null,500);
//监听selectType
watch(selectType,(newValue)=>{
  console.log("新值",newValue);
})
const topicInfo = reactive({
  index: 1,
  number: 3,
  topicList: [{ id: 1 }, { id: 2 }, { id: 3 }],
});
let mouseDown = false;
const selectInput=(word)=>{
  selectType.value=word;
}
const selectClick=async()=>{
  let res = await getQuestionInfo(selectType.value);
  topicInfo.index=1;
  topicInfo.topicList = res;
  topicInfo.number = res.length;
}
// 鼠标按下时的位
let lastY = null;
//实时鼠标位
let currentY = null;
// 鼠标按下时触发的事件
const huadong = () => {};
document.addEventListener("mousedown", function (event) {
  mouseDown = true;
  // lastX = event.clientX;
  lastY = event.clientY;
  // currentX = event.clientX;
  currentY = event.clientY;
  // console.log("鼠标按下位置:", lastX, lastY);

  // 开始实时监听鼠标移动
  document.addEventListener("mousemove", onMouseMove);
});
// 鼠标移动时触发的事件
function onMouseMove(event) {
  if (mouseDown) {
    let deltaY = event.clientY - currentY;
    currentY = event.clientY;
    setScrollY(deltaY);
  }
}
// 鼠标松开时触发的事件
document.addEventListener("mouseup", function (event) {
  mouseDown = false;
  let deltaY = event.clientY - lastY;
  console.log("变化", deltaY);
  flipPage(deltaY);
  document.removeEventListener("mousemove", onMouseMove);
});
const topicInfoRef = ref(null);
const get = () => {
  console.log("信息", getScrollbarPosition());
};
const setScrollY = (y) => {
  if (topicInfoRef.value) {
    topicInfoRef.value.scrollTop = topicInfoRef.value.scrollTop - y;
  }
};
const flipPage = (y) => {
  if (topicInfoItemRef.value) {
    topicInfoRef.value.scrollTop = 0;
    if (y < -80) {
      topicInfo.index++;
      if (topicInfo.index > topicInfo.number) {
        topicInfo.index = topicInfo.number;
        ElMessage({ message: "没有更多了", type: "warning" });
      }
      if (topicInfo.index == topicInfo.number) {
        //最后一个了准备记载新数据
        // topicInfo.number+=3;
        // topicInfo.topicList=[...topicInfo.topicList,...[{id:topicInfo.number+1},{id:topicInfo.number+2},{id:topicInfo.number+3}
        // ]]
      }
    }
    else if (y > 80) {
      topicInfo.index--;
      if (topicInfo.index == 0) {
        topicInfo.index = 1;
        ElMessage({ message: "到顶了", type: "warning" });
      }
    }

    // alert("123")
    topicInfoItemRef.value.style.top =
      -(topicInfo.index - 1) * topicInfoItemRef.value.clientHeight + "px";
  }
};
const getScrollbarPosition = () => {
  if (topicInfoRef.value) {
    const element = topicInfoRef.value;
    return {
      scrollLeft: element.scrollLeft, // 水平滚动条位置
      scrollTop: element.scrollTop, // 垂直滚动条位置
      scrollWidth: element.scrollWidth, // 元素内容的总宽度
      scrollHeight: element.scrollHeight, // 元素内容的总高度
      clientWidth: element.clientWidth, // 元素可视区域的宽度
      clientHeight: element.clientHeight, // 元素可视区域的高度
    };
  }
  return null;
};
const getQuestionInfo = async (type) => {
  let res = await getQuestion(type);
  console.log("res", res);
  return res.data;
};
onMounted(async () => {
  let res = await getQuestionInfo();
  topicInfo.index=1;
  topicInfo.topicList = res;
  topicInfo.number = res.length;
  console.log("topicInfo", topicInfo);
});
</script>
