<template>
  <div class="test-slide-wrapper" id="slideHook" v-love="'slideHook'">
    <H v-model:index="state.baseIndex">
      <SlideItem class=" gray">
        <H class="h" v-model:index="state.navIndex">
          <SlideItem class=" gray">
            <div class="big">找红包</div>
          </SlideItem>
          <SlideItem class=" gray">
            <div class="big">热点</div>
          </SlideItem>
          <SlideItem class=" gray">
            <div class="big">社区</div>
          </SlideItem>
          <SlideItem class=" gray">
            <div class="big">关注</div>
          </SlideItem>
          <SlideItem class=" gray">
            <div class="big">商城</div>
          </SlideItem>
          <SlideItem class="">
            <VInfinite
                v-model:index="state.itemIndex"
                :render="render"
                :list="state.recommendVideos"
                tag="0-5"
            >
            </VInfinite>
          </SlideItem>
        </H>
        <div>
          <span>{{ state.baseIndex }}</span>
          <button @click="state.baseIndex++">加</button>
          <button @click="state.baseIndex--">减</button>
        </div>
        <div>
          <span>{{ state.navIndex }}</span>
          <button @click="state.navIndex++">加</button>
          <button @click="state.navIndex--">减</button>
        </div>
        <Footer v-bind:init-tab="1"/>
      </SlideItem>
      <SlideItem class=" gray">
        <div class="big" v-for="i in 100">主页</div>
      </SlideItem>
    </H>
  </div>
</template>

<script setup lang="jsx">
import H from './H'
import V from './V'
import VInfinite from './VInfinite.vue'
import SlideItem from './SlideItem'
import SlideVideo from "../../components/slide/SlideVideo";
import SlideUser from "../../components/slide/SlideUser";
import SlideImgs from "../../components/slide/SlideAlbum";
import BVideo from "../../components/slide/BVideo";

import resource from "../../assets/data/resource.js";
import {onMounted, reactive} from "vue";
import enums from "../../utils/enums";
import bus from "../../utils/bus";
import Dom from "../../utils/dom";

const state = reactive({
  baseIndex: 0,
  navIndex: 5,
  itemIndex: 0,
  recommendVideos: [
    // {
    //   type: 'img',
    //   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
    // },
    // {
    //   type: 'imgs',
    //   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
    // },
    {
      type: 'recommend-video',
      "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
      video: 'http://douyin.ttentau.top/0.mp4',
      "video_data_size": 26829508,
      "duration": 427780,
      "desc": "我不管我们宿舍第一好看",
      "allow_download": 0,
      "allow_duet": 0,
      "allow_react": 0,
      "allow_music": 1,
      "allow_douplus": 1,
      "allow_share": 1,
      "digg_count": 10480000,
      "comment_count": 79000,
      "download_count": 6,
      "play_count": 0,
      "share_count": 119000,
      "forward_count": 0,
      "collect_count": 3,
      "sort": 195,
      "is_top": 0,
      "city": "北京",
      address: '中央戏剧学院',
      "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
      "create_time": "1630423555",
      "creator_id": "93864497380",
      "status": 1,
      "topics": [
        {
          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
          "name": "敬礼变装",
          "creator_id": "93864497380",
          "create_time": "1630423555",
          "status": 1
        },
        {
          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
          "name": "宿舍",
          "creator_id": "93864497380",
          "create_time": "1630423555",
          "status": 1
        }
      ],
      "music": {
        "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
        "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
        "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
        "title": "@穷电影创作的原声-小高快起来跳舞",
        "creator_id": "93864497380",
        "create_time": "1630423555",
        "status": 1
      },
      "author": {
        "id": "1",
        "unique_id_modify_time": "1630393144",
        "unique_id": "10040050",
        "favoriting_count": 143,
        "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
        school: {
          name: '中央戏剧学院',
          department: null,
          joinTime: null,
          education: null,
          displayType: enums.DISPLAY_TYPE.ALL,
        },
        "city": "",
        "province": '北京',
        "country": "",
        "location": "",
        "birthday": "2002-01-01",
        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
        "following_count": 66,
        "follower_count": 235000,
        "aweme_count": 1796000,
        "nickname": "我是小睿耶",
        certification: '',
        "phone": "",
        "sex": "",
        "last_login_time": "1630423555",
        "create_time": "1630423555",
        "status": 1,
        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
        "is_private": 0
      }
    },
  ],

  isCommenting: false,
  isSharing: false,
  canMove: true,

  shareType: -1,

  showPlayFeedback: false,
  showShareDuoshan: false,
  showShareDialog: false,
  showShare2WeChatZone: false,
  showDouyinCode: false,
  showFollowSetting: false,
  showFollowSetting2: false,
  showBlockDialog: false,
  showChangeNote: false,
  shareToFriend: false,
})

onMounted(() => {
  bus.on('singleClick', () => {
    new Dom(`.v-${state.baseIndex}-${state.navIndex}-${state.itemIndex}-item`).trigger('singleClick')
  })
})

function render(item, itemIndex, play, tag) {
  let node
  if (item.type === 'img') {
    node = <img src={item.src} style="height:100%;"/>
  }
  if (item.type === 'imgs') {
    node = <SlideImgs/>
  }
  if (item.type === 'recommend-video') {
    node = <BVideo
        isPlay={play}
        video={item}
        tag={tag + '-' + itemIndex}
        onShowComments={e => state.isCommenting = true}
        onShowShare={e => state.isSharing = true}
        onGoUserInfo={e => state.baseActiveIndex = 1}
    />
  }
  return node
}

// function render1(item, itemIndex, play) {
//   let node
//   if (item.type === 'recommend-video') {
//     node = <SlideVideo
//         isPlay={play}
//         video={item}
//         index={itemIndex}
//         onShowComments={e => this.isCommenting = true}
//         onShowShare={e => this.isSharing = true}
//         onGoUserInfo={e => this.baseActiveIndex = 1}
//         onGoMusic={e => this.$nav('/home/music')}
//         v-model={[this.videos[itemIndex], 'video']}
//     />
//   }
//   if (item.type === 'img') {
//     node = <img src={item.src} style="height:100%;"/>
//   }
//   if (item.type === 'imgs') {
//     node = <SlideImgs/>
//   }
//   if (item.type === 'send-video') {
//     node = <video src={item.src} style="height:100%;"/>
//   }
//   if (item.type === 'user') {
//     node = <SlideUser onClose={this.t} modelValue={item}/>
//   }
//   return node
// }

</script>

<style scoped lang="less">
@import "@/assets/less/index";

.test-slide-wrapper {
  font-size: 14rem;
  width: 100%;
  height: 100%;

  span {
    color: white;
    font-size: 24rem;
  }

  .big {
    font-weight: bold;
    font-size: 100rem;
  }
}

.h {
  width: 90vw;
  height: 80vh;
  overflow: hidden;

  .red {
    background-color: red;
  }

  .yellow {
    background-color: yellow;
  }

  .blue {
    background-color: blue;
  }

  .gray {
    background-color: gray;
  }
}

</style>