<template>
  <div class="home-page">
    <div class="header-nav-bar" :style="{ top: getTopOffsetHeight + 'px' }">
      <div class="tabs-view">
        <div class="tab-item" :class="{ active: activeIndex === index }" v-for="(item, index) in tabList" :key="item.value" @click="changeTabIndex(index)">
          {{ item.label }}
          <div class="active-line" :class="{ show: activeIndex === index }" />
        </div>
      </div>
      <div class="icon-list">
        <span class="iconfont icon-shezhi"></span>
        <span class="iconfont icon-kefu"></span>
      </div>
    </div>
    <div class="search-view" :style="{ top: getTopOffsetHeight + 44 + 'px' }">
      <van-search shape="round" v-model="searchKeyWord" placeholder="请输入搜索关键词" />
    </div>
    <div v-if="activeIndex === 0">
      <div class="banner-view">
        <van-swipe class="my-swipe" indicator-color="white">
          <van-swipe-item v-for="(item, index) in images" :key="index">
            <img class="swipe-img" :src="item" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="notice-view">
        <van-notice-bar left-icon="volume-o" background="#f8f8fb" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。">
          <template #right-icon>
            <van-button class="hot-live-btn" size="mini" icon="fire-o" type="primary" @click="showGlobalLog">热门直播</van-button>
          </template>
        </van-notice-bar>
      </div>
      <div class="list-view">
        <collapse v-model="competitionActiveNames">
          <collapse-item v-for="(item, index) in competitionList" :key="index" :title="`标题${index + 1}`" :margin-bottom="4">
            <template #collapseExtra>
              <div class="competition-content">
                <div>{{ item.a }}</div>
                <div>{{ item.b }}</div>
              </div>
            </template>
          </collapse-item>
        </collapse>
      </div>
    </div>
    <div v-if="activeIndex === 1">
      <div>娱乐</div>
    </div>
    <div v-if="activeIndex === 2">小说</div>
    <div v-if="activeIndex === 3">GPT</div>
    <MyPopup v-model="myPopupOpen" position="right" width="80%" :round="false" :show-close-icon="true" popup-title="弹出框标题" :popup-title-text-style="{ textAlign: 'left' }">
      内容
    </MyPopup>
  </div>
</template>

<script>
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'
import MyPopup from '@/components/MyPopup/MyPopup.vue'
export default {
  name: 'HomeView',
  components: { Collapse, CollapseItem, MyPopup },
  data() {
    return {
      myPopupOpen: false,
      searchKeyWord: '',
      activeIndex: 0,
      isBottom: false,
      tabList: [
        {
          label: '新闻',
          value: 'news'
        },
        {
          label: '娱乐',
          value: 'recreation'
        },
        {
          label: '小说',
          value: 'fiction'
        },
        {
          label: 'GPT',
          value: 'gpt'
        }
      ],
      images: ['https://img01.yzcdn.cn/vant/apple-1.jpg?time=' + Date.now(), 'https://img01.yzcdn.cn/vant/apple-2.jpg'],
      competitionActiveNames: [],
      competitionList: [
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' },
        { title: '名称', a: 'A', b: 'B' }
      ]
    }
  },
  mounted() {
    console.log('mounted:HomePage')
    console.log('mounted:Object', { a: 123 })

    this.$nextTick(() => {
      window.addEventListener('scroll', this.pageScroll)
    })
  },
  activated() {
    console.log('HomePage page is activated')
    // 执行页面被缓存时的逻辑
  },
  deactivated() {
    console.log('HomePage page is deactivated')
    // 执行页面离开缓存时的逻辑
  },
  methods: {
    testRequest() {
      // 创建一个 XMLHttpRequest 实例
      var xhr = new XMLHttpRequest()
      // 发送请求
      xhr.open('GET', 'https://mock.apifox.cn/m1/2852848-0-default/api/getVersion')
      xhr.send()
    },
    showGlobalLog() {
      this.testRequest()
      // this.myPopupOpen = !this.myPopupOpen
      console.log(asdfasf)
      // this.myPopupOpen = true
    },
    changeTabIndex(index) {
      this.activeIndex = index
    },
    emitWebF() {
      console.log('getIsApp:', this.getIsApp)
      if (this.getIsApp) {
        webf.methodChannel.invokeMethod('somemethod-webf', {
          isBottom: this.isBottom,
          getIsApp: this.getIsApp
        })
      }
    },
    pageScroll(e) {
      // console.log('pageScroll:', e)
      //scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      //windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      //scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
      //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        //到了这个就可以进行业务逻辑加载后台数据了
        // console.log('到了底部')
        // console.log('getIsApp:', this.getIsApp)
        if (this.getIsApp) {
          // 有webf则表示是app
          // webf.methodChannel.invokeMethod('somemethod-webf', {
          //   isBottom: true,
          //   msg: '到底啦'
          // })
        }
      } else if (scrollTop === 0) {
        console.log('到了顶部')
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
.home-page {
  width: 100%;
  overflow-x: hidden;
  padding-top: 98px;
  .header-nav-bar {
    position: fixed;
    width: 100%;
    height: 44px;
    z-index: 12;
    display: flex;
    align-items: center;
    background-color: #fff;
    box-shadow: 2px 2px 20px #ededed;

    .tabs-view {
      height: 44px;
      flex: 4;
      margin-right: 10px;
      display: flex;
      align-items: center;
      padding: 0 10px;

      .tab-item {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #666;
        position: relative;
        transition: all 0.1s ease-in 0s;
        height: 44px;
        line-height: 44px;

        &.active {
          color: #f00;
        }

        .active-line {
          position: absolute;
          left: 50%;
          bottom: 2px;
          width: 0;
          height: 2px;
          background-color: #f00;
          transition: all 0.2s ease-in 0s;

          &.show {
            width: 70%;
            left: 15%;
          }
        }
      }
    }

    .icon-list {
      flex: 1;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }

  .icon-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }

  .search-view {
    position: fixed;
    width: 100%;
    height: 54px;
    z-index: 11;
    background-color: #fff;
  }

  .notice-view {
    position: sticky;
    top: 98px;
    z-index: 11;
    background-color: #fff;

    .hot-live-btn {
      margin-left: 5px;
    }
  }

  .list-view {
    margin-top: 5px;

    .competition-content {
      padding: 15px;
    }
  }
}

::v-deep .my-swipe {
  .van-swipe-item {
    color: #fff;
    height: 150px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;

    .swipe-img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
}
</style>