<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 11:32:22
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-20 18:58:46
 * @Description: 算法详情页
-->
<template>
  <div class="algorithm-details" :class="{ fixed2: scrollTop >= 600 }">
    <!-- 头部基本信息 -->
    <algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
    <!-- 导航 -->
    <algorithm-navigation
      :dataList="dataList.data"
      :class="{ fixed: scrollTop >= 600 }"
      :selectNow="selectNow"
    ></algorithm-navigation>
    <!-- 算法展示  视频 -->
    <algorithm-display
      :dataList="dataList.data"
      id="algorithm-display"
      class="scrollBox"
    ></algorithm-display>
    <!-- 关联能力 -->
    <algorithm-associated-ability
      :associatedComponents="associatedComponents"
      id="algorithm-associated-ability"
      class="scrollBox"
    ></algorithm-associated-ability>
    <!-- 算法优势 -->
    <algorithm-advantage
      :dataList="dataList.data"
      id="algorithm-advantage"
      class="scrollBox"
    ></algorithm-advantage>
    <!-- 应用场景和应用案例 -->
    <!-- <application-scenarios-and-case
      id="application-scenarios-and-case"
      class="scrollBox"
    ></application-scenarios-and-case> -->
    <algorithm-application-scenarios
      :dataList="dataList.data"
      id="application-scenarios"
      class="scrollBox"
    ></algorithm-application-scenarios>
    <algorithm-application-case
      :dataList="dataList.data"
      id="application-case"
      class="scrollBox"
    ></algorithm-application-case>
    <!-- 算法试用 -->
    <algorithm-on-trial
      :dataList="dataList.data"
      id="algorithm-on-trial"
      class="scrollBox"
    ></algorithm-on-trial>
    <!-- 计费标准 -->
    <algorithm-charging-standard
      :dataList="dataList.data"
      id="charging-standard"
      class="scrollBox"
    ></algorithm-charging-standard>
    <!-- 使用方式 -->
    <algorithm-usage-mode
      :dataList="dataList.data"
      id="usage-mode"
      class="scrollBox"
    ></algorithm-usage-mode>
    <!-- 常见问题-->
    <algorithm-common-problem
      :dataList="dataList.data"
      id="common-problem"
      class="scrollBox"
    ></algorithm-common-problem>
  </div>
</template>
<script setup>
  import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
  import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
  import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
  import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
  import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
  import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
  import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
  import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
  import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
  import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
  import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const scrollTop = ref(0)
  const domArr = ref([])
  const selectNow = ref('')
  const dataList = reactive({ data: {} })
  const id = router.currentRoute.value.query.id
  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
  document.documentElement.style.transition = 'all 0.3s ease'
  document.documentElement.scrollTop = 0
  document.body.style.transition = 'all 0.3s ease'
  document.body.scrollTop = 0
  mybus.on('flyToView', (id) => {
    let top = document.querySelector('#' + id).offsetTop - 50
    // console.log(top, document.querySelector('#' + id).offsetTop)
    document.documentElement.scrollTop = top
    document.body.scrollTop = top
  })
  onMounted(() => {
    // console.clear()
    window.addEventListener('scroll', () => {
      domArr.value = document.querySelectorAll('.scrollBox')
      scrollTop.value =
        document.documentElement.scrollTop || document.body.scrollTop
      for (let i = 0; i < domArr.value.length; i++) {
        if (i === 0) {
          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
            selectNow.value = domArr.value[i].id
          }
        } else if (i == domArr.value.length - 1) {
          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
            selectNow.value = domArr.value[i].id
          }
        } else {
          if (
            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
          ) {
            selectNow.value = domArr.value[i].id
          }
        }
      }
    })
  })

  const init = (id) => {
    if (id) {
      selectOne(id).then((res) => {
        // console.clear()
        dataList.data = res.data.data
        console.log('初始化详情页=========================>', dataList.data)
        const arrList = ref([])
        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
        if (arrList.value.indexOf(id) === -1) {
          arrList.value.push(id)
          updateVisits({
            id: res.data.data.id,
            visits: res.data.data.visits || '0',
          }).then(() => {
            window.sessionStorage.setItem(
              'visits',
              JSON.stringify(arrList.value)
            )
          })
        }
      })
      associatedComponents.value.map((item, index) => {
        let queryPartAppByKeyIdParams = {
          keyId: id,
        }
        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
          associatedComponents.value[index].dataList = res.data.data
        })
      })
    } else if (obj) {
      dataList.data = obj
      console.log('预览==============', obj)
    }
  }
  init(id)
  onBeforeUnmount(() => {
    mybus.off('flyToView')
  })
</script>
<style lang="less" scoped>
  .fixed {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
  }
  .fixed2 > div:nth-of-type(3) {
    margin-top: 0.84rem;
  }
</style>
