<template>
  <div ref="topicInfoRef" class="scroll-container">
    <div
      ref="topicInfoItemRef"
      :style="{
        height: '100%',
        width: '100%',
        transition: '0.7s',
        marginTop: top,
      }"
    >
      <div
        v-for="item in questionList"
        :key="item.id"
        style="overflow: hidden"
        class="homeBox"
      >
        <div>
          <xuaua-header :page-type="PageType" @back="PageRest()"></xuaua-header>
        </div>
        <div class="main">
          <div class="mainBox">
            <div
              class="topicInfo"
              :style="{ backgroundImage: `url(${item.questionImage})` }"
              @click="huadong"
            >
              <div class="topicInfoItem">
                <TopicBox
                  :id="item.id"
                  :question="item"
                  :videoUrl="item.videoUrl"
                  :introduce="item.introduce"
                  :tags="item.tags"
                  :topicTitle="item.topicTitle"
                  :type="item.type"
                  :topicList="item.xuauaQuestionAnswerList"
                  :native="item"
                />
              </div>
            </div>
            <div class="topicAnswer">
              <div class="answerNav">
                <div style="width: 80%; display: flex; justify-content: center">
                  <el-tabs
                    style="margin: 0 auto"
                    v-model="activeName"
                    class="demo-tabs"
                    @tab-change="handleClick"
                  >
                    <el-tab-pane label="视频" name="视频"></el-tab-pane>
                    <el-tab-pane label="解析" name="解析"></el-tab-pane>
                  </el-tabs>
                </div>
                <div class="StarIcon" @click="addCollect">
                  <el-icon
                    v-if="topStore.Topic?.isCollect"
                    :size="30"
                    color="#FEE082"
                  >
                    <StarFilled />
                  </el-icon>
                  <el-icon v-else :size="30" color="#2B2B2B">
                    <Star />
                  </el-icon>
                  {{ topStore.Topic?.isCollect ? "已" : "未" }}收藏
                </div>
              </div>
              <div class="answerInfo">
                <VideoBox
                  v-if="activeName === '视频'"
                  :src="topStore.Topic?.videoUrl"
                ></VideoBox>
                <div
                  class="jiexi"
                  v-else
                  v-html="topStore.Topic?.analysis"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, onUnmounted } from "vue";
import xuauaHeader from "@/components/Xuaua_header.vue";
import TopicBox from "@/components/TopicBox.vue";
import VideoBox from "@/components/VideoBox.vue";
import { ElMessage } from "element-plus";
import { useTopicStore } from "@/stores/topic.js";
import { debounce } from "@/utils/debounceRef";
import router from "@/router";
import { useUserStore } from "@/stores/user";
const PageType = ref("home");
const topicInfoItemRef = ref(null);
const topicInfoRef = ref(null);
const topStore = useTopicStore();
const activeName = ref("视频");
let mouseDown = false;
let lastY = null;
let currentY = null;
const questionList = computed(() => {
  return topStore.Topics;
});
const top = computed(() => {
  const height = topicInfoItemRef.value?.clientHeight || 0;
  return `-${(topStore.index - 1 < 0 ? 0 : topStore.index - 1) * height}px`;
});

const isFlipping = ref(false);

const addCollect = () => {
  debounce(
    () => {
      topStore.Collect();
    },
    500,
    true
  )();
};

const setScrollY = (y) => {
  if (topicInfoRef.value) {
    topicInfoRef.value.scrollTop -= y;
  }
};

const flipPage = (y) => {
  if (topicInfoRef.value) {
    topicInfoRef.value.scrollTop = 0;
    if (y < -80) {
      if (!topStore.next()) {
        ElMessage({ message: "没有更多了", type: "warning" });
      }
      isFlipping.value = true;
    } else if (y > 80) {
      if (!topStore.prev()) {
        ElMessage({ message: "到顶了", type: "warning" });
      }
      isFlipping.value = true;
    }
  }
};

const handleClick = (e) => {
  // if (e === "解析" && !topStore.Topics[topStore.index - 1]?.isAnswer) {
  //   ElMessage({ message: "未作答不能查看解析", type: "warning" });
  //   setTimeout(() => {
  //     activeName.value = "视频";
  //   }, 1);
  // }
};

const onMouseMove = (event) => {
  const deltaY = event.clientY - currentY;
  currentY = event.clientY;
  setScrollY(deltaY);
};

document.addEventListener("mousedown", (event) => {
  mouseDown = true;
  lastY = event.clientY;
  currentY = event.clientY;
  document.addEventListener("mousemove", onMouseMove);
});

document.addEventListener("mouseup", (event) => {
  mouseDown = false;
  const deltaY = event.clientY - lastY;
  flipPage(deltaY);
  document.removeEventListener("mousemove", onMouseMove);
});

const preventScroll = (event) => {
  event.preventDefault();
};

function PageRest() {
  const type = router.currentRoute.value.query.type;

  if (type == "view") {
    PageType.value = "home";
    topStore.init();
    router.back();
    return;
  }
  topStore.init();
  router.replace({
    path: "/",
  });

  // router.back()
}

function pageInit() {
  useUserStore().UserInfo();

  const type = router.currentRoute.value.query.type;
  console.log(type);
  if (type == "view") {
    //判断是否是查看模式
    console.log(questionList.value);
    PageType.value = "view";
    return;
  }
  topStore.init();

}
pageInit();
onMounted(() => {
  document.addEventListener("wheel", onScroll, { passive: true });

  document.addEventListener("wheel", preventScroll, { passive: false });
});
const onScroll = (event) => {
  if (isFlipping.value) return;

  const deltaY = event.deltaY;
  flipPage(-deltaY);
};
onUnmounted(() => {
  document.removeEventListener("wheel", onScroll);

  document.removeEventListener("wheel", preventScroll);
});
watch(isFlipping, (newVal) => {
  if (newVal) {
    setTimeout(() => {
      isFlipping.value = false;
    }, 700);
  }
});
</script>

<style lang="scss" scoped>
img {
  width: 100%;
}
.scroll-container {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.homeBox {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url("@/assets/image/loginback.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

.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 {
      width: 30%;
      height: 100%;
      overflow: hidden;
      // background-image: url("@/assets/image/tibg.jpg");

      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;

      .topicInfoItem {
        height: 100%;
        width: 100%;
      }
    }

    .topicAnswer {
      width: 69%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .answerInfo {
        width: 100%;
        height: 92%;
        box-sizing: border-box;
        padding: 20px;
        // background-image: url("@/assets/image/videoBack.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.jiexi {
  word-break: normal;
  word-wrap: break-word;
}

.answerNav {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.StarIcon {
  margin-right: 3vw;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
</style>
