<script setup lang="ts">
import dialog from '~/assets/img/home/dialog2.png'
const ZaiXian_XunKe_table = $ref([
  ['家乡的古塔', '吴宇荻', '魏筱甜', '/#/zbkt/ssys/content/57'],
  ['戏曲人物', '谢秋丽', '徐文欣', '/#/zbkt/ssys/content/58'],
  ['江南民居', '', '', '/#/zbkt/ssys/content/59'],
  ['为自己的书设计封面', '孙菲菲', '杨其华', '/#/zbkt/ssys/content/60'],
  ['家乡的古塔', '吴敏', '赵依静', '/#/zbkt/ssys/content/61'],
  ['西湖十景', '', '', '/#/zbkt/ssys/content/62'],
  ['窗外的风景', '陈艳', '孙涛杰', '/#/zbkt/ssys/content/63'],
  ['色彩的世界', '王晓庆', '吴乾斌', '/#/zbkt/ssys/content/64'],
  ['为自己的书设计封面', '孙霏霏', '杨其华', '/#/zbkt/ssys/content/65'],
  ['窗外的风景', '陈艳', '孙涛杰', '/#/zbkt/ssys/content/66'],
  ['窗外的风景', '谢秋丽', '沈小花', '/#/zbkt/ssys/content/68'],
  ['为自己的书设计封面', '孙霏霏', '胡娟', '/#/zbkt/ssys/content/70'],
])
let scrollTop = $ref(0)
let timer: number | undefined
onMounted(() => {
  handleMouseLeaveScroll()
})
function handleMouseEnterScroll() {
  if (timer)
    clearInterval(timer)
}
function handleMouseLeaveScroll() {
  timer = setInterval(() => {
    scrollTop -= 1
    if (scrollTop === -18) {
      ZaiXian_XunKe_table.push(ZaiXian_XunKe_table.shift()!)
      scrollTop = 0
    }
  }, 100)
}
onBeforeMount(() => {
  handleMouseEnterScroll()
})

function windowOpen(url: string) {
  // console.log('url :>> ', url)
  window.open(location.origin + url)
}

function windowOriginOpen(url: string) {
  window.open(`${location.origin}/${url}`)
}

let dialogVisible = $ref(false)
let dialogPage = $ref(0)
const dialogRef = $ref()
const buttonRef = $ref()
const dialogData = $ref([
  // [
  'https://myvod.bozedu.net/sv/1e3b5670-18404cdea41/1e3b5670-18404cdea41.mp4',
  'https://myvod.bozedu.net/sv/11060231-18404f3730d/11060231-18404f3730d.mp4',
  'https://myvod.bozedu.net/sv/207af45c-18408bd6126/207af45c-18408bd6126.mp4',
  'https://myvod.bozedu.net/sv/1e90113d-18408cd28be/1e90113d-18408cd28be.mp4',
  // ],
  // [
  'https://myvod.bozedu.net/sv/1bfe4cb1-18404fc27fd/1bfe4cb1-18404fc27fd.mp4',
  'https://myvod.bozedu.net/sv/36ea00ee-18408c431d3/36ea00ee-18408c431d3.mp4',
  'https://myvod.bozedu.net/sv/3e9a246-18408c8e6b1/3e9a246-18408c8e6b1.mp4',
  'https://myvod.bozedu.net/sv/399c3fff-18408cf0f7f/399c3fff-18408cf0f7f.mp4',
  // ],
])
function handleClickNextpage() {
  dialogPage = (dialogPage + 1) % 2
}

let videoVisible = $ref(false)
let videoSrc = $ref('')

function handleClickVideo(url: string) {
  dialogVisible = false
  videoSrc = url
  videoVisible = true
}
let line_item2dialog: any

watch(() => dialogVisible, (val) => {
  if (val) {
    nextTick(() => {
      line_item2dialog = new window.LeaderLine(buttonRef, dialogRef, {
        size: 2,
        color: '#fff',
        endPlug: 'behind',
        startSocket: 'top',
        endSocket: 'right',
        path: 'grid',
      })
    })
  }
  else {
    line_item2dialog?.remove()
  }
})

onUnmounted(() => {
  line_item2dialog?.remove()
})
</script>

<template>
  <div class="w-322px h-full flex flex-col  px-7 py-4 border border-hex-0A337E bg-block">
    <div class="flex items-center justify-between mb-2">
      <div class="text-lg text-white font-semibold">
        在线巡课
      </div>
      <div class="relative">
        <div ref="buttonRef" class="text-sm text-blue-300 cursor-pointer" @click="dialogVisible = !dialogVisible">
          查看更多
        </div>

        <div v-show="dialogVisible" ref="dialogRef" class="absolute z-50 -left-820px -top-324px ">
          <img :src="dialog" alt="">
          <div class="absolute left-6 right-6 bottom-9 top-7 flex flex-col ">
            <div class="flex-auto w-full grid grid-cols-4 flex_center">
              <div v-for="i in dialogData" :key="i" class="w-full h-full max-w-192px max-h-120px px-1">
                <div class="w-full h-full cursor-pointer flex_center" @click="handleClickVideo(i)">
                  <video :src="i" @click.prevent />
                </div>
              </div>
            </div>
            <!-- <div class="w-full flex justify-end px-10 text-xs cursor-pointer" @click="handleClickNextpage">
              下一页
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="overflow-hidden flex-auto" @mouseenter="handleMouseEnterScroll" @mouseleave="handleMouseLeaveScroll">
      <ul :style="{ marginTop: `${scrollTop}px` }">
        <li
          v-for="item in ZaiXian_XunKe_table" :key="item[3]"
          class="cursor-pointer w-full h-18px flex text-xs items-center justify-between hover:text-light-900"
          @click="windowOpen(item[3])"
        >
          <div class="flex-grow truncate">
            {{ `《 ${item[0]} 》` }}
          </div>
          <div class="w-13">
            {{ item[1] }}
          </div>
          <div class="w-13">
            {{ item[2] }}
          </div>
        </li>
      </ul>
    </div>
  </div>
  <Teleport to="body">
    <div v-if="videoVisible" class="w-screen h-screen fixed left-0 top-0 z-1000 bg-black">
      <div
        class="absolute z-5 top-4 right-4 flex_center cursor-pointer opacity-50 hover:opacity-100"
        @click="videoVisible = false"
      >
        <i:ant-design:close-circle-twotone class="w-8 h-8 text-white " />
      </div>
      <video :src="videoSrc" class="object-contain w-full h-full" autoplay />
    </div>
  </Teleport>
</template>
