const licia = require('miniprogram-licia')
const app = getApp<IAppOption>()

Page({
  data: {
    id: '',
    activeId: '',
    LikeTimes: 0,

    current: 0,
    videoList: [] as any,

    beforeLoading: false,
    beforeEnd: false,
    afterLoading: false,
    afterEnd: false,

    starShow: false,
  },
  onLoad(options) {
    this.setData({
      id: options.id,
      activeId: options.id,
    })
    app.waitLogin({ type: 2 }).then(() => {
      this.handleView()
    })
  },
  handleView() {
    wx.ajax({
      method: 'POST',
      url: '?r=wtx/doctor/knowledge/view',
      data: {
        Id: this.data.activeId,
      },
    }).then(() => {
      this.getDetail()
    })
  },
  getDetail() {
    wx.ajax({
      method: 'GET',
      url: '?r=wtx/doctor/knowledge/detail',
      data: {
        Id: this.data.id,
      },
    }).then(async (res) => {
      this.setData({
        videoList: [res],
        afterLoading: true,
        beforeLoading: true,
      })
      this.playCurrentVideo()
      await this.getList('after')
      await this.getList('before')
    })
  },
  getList(sort: 'before' | 'after') {
    const { id } = this.data
    return wx
      .ajax({
        method: 'GET',
        url: '?r=wtx/doctor/knowledge/video-sort-list',
        data: {
          Id: id,
          sort,
        },
      })
      .then((res) => {
        const { videoList, current } = this.data
        if (sort === 'before') {
          const newVideoList = [...res.list, ...videoList]
          this.setData({
            videoList: newVideoList,
            beforeLoading: false,
            current: res.list.length + current,
            beforeEnd: res.length === 0,
          })
        }
        if (sort === 'after') {
          const newVideoList = [...videoList, ...res.list]
          this.setData({
            videoList: newVideoList,
            afterLoading: false,
            afterEnd: res.length === 0,
          })
        }
      })
  },
  handleChange(e: any) {
    const { beforeLoading, afterLoading, beforeEnd, afterEnd, videoList } = this.data
    const { current } = e.detail
    this.setData({
      current,
      starShow: false,
    })
    if (current === 0 && !beforeLoading && beforeEnd) {
      this.setData({
        beforeLoading: true,
      })
      this.getList('before')
    }
    if (current === videoList.length - 1 && !afterLoading && afterEnd) {
      this.setData({
        afterLoading: true,
      })
      this.getList('after')
    }
    this.playCurrentVideo()
  },
  playCurrentVideo() {
    const { current, videoList } = this.data
    videoList.forEach((item: any, index: number) => {
      if (!item.ctx) {
        item.ctx = wx.createVideoContext(`video-${item.Id}`)
      }
      item.drag = false
      if (index === current) {
        item.ctx.play()
      } else {
        item.ctx.pause()
      }
    })
  },
  handlePlay(e: any) {
    const { index } = e.currentTarget.dataset
    const key = `videoList[${index}].play`
    this.setData({
      [key]: true,
    })
  },
  handlePause(e: any) {
    const { index } = e.currentTarget.dataset
    const key = `videoList[${index}].play`
    this.setData({
      [key]: false,
    })
  },
  handleTimeUpdate(e: any) {
    const { index } = e.currentTarget.dataset
    const { videoList } = this.data
    if (videoList[index].drag) return
    const { currentTime, duration } = e.detail
    const progress = (currentTime / duration) * 100
    const progressKey = `videoList[${index}].progress`
    const durationKey = `videoList[${index}].duration`
    this.setData({
      [progressKey]: progress,
      [durationKey]: duration,
    })
  },
  handleTogglePlay(e) {
    const { index } = e.currentTarget.dataset
    const { videoList } = this.data
    if (videoList[index].play) {
      videoList[index].ctx.pause()
    } else {
      videoList[index].ctx.play()
    }
  },
  handleDragStart(e: any) {
    const { index } = e.currentTarget.dataset
    const key = `videoList[${index}].drag`
    this.setData({
      [key]: true,
    })
  },
  handleDragEnd(e: any) {
    const { index } = e.currentTarget.dataset
    const { videoList } = this.data
    const duration = videoList[index].duration
    const drapProgress = e.detail
    const currentTime = (drapProgress / 100) * duration
    videoList[index].ctx.seek(currentTime)
    const dragKey = `videoList[${index}].drag`
    this.setData({
      [dragKey]: false,
    })
  },
  _timer: null as any,
  handleLike(e: any) {
    const { index } = e.currentTarget.dataset
    const { videoList } = this.data
    const currentVideo = videoList[index]
    const LikeTimes = Number(currentVideo.LikeTimes) + 1
    const key = `videoList[${index}].LikeTimes`
    this.setData({
      LikeTimes: this.data.LikeTimes + 1,
      [key]: LikeTimes,
      [`videoList[${index}].IsLike`]: true,
      starShow: true,
    })
    const header = this.selectComponent('#animate')
    header.start()
    if (this._timer) {
      clearInterval(this._timer)
    }
    this._timer = setTimeout(() => {
      this.setData({
        starShow: false,
      })
    }, 2000)
    this.likePost()
  },
  likePost: licia.debounce(function (this: any) {
    const { activeId, LikeTimes } = this.data
    this.setData({
      LikeTimes: 0,
    })
    wx.ajax({
      method: 'POST',
      url: '?r=wtx/doctor/knowledge/like',
      data: {
        Id: activeId,
        LikeTimes,
      },
    })
  }, 1000),
  onShareAppMessage() {
    const { current, videoList } = this.data
    const currentVideo = videoList[current]
    this.setData({
      [`videoList[${current}].ShareTimes`]: Number(currentVideo.ShareTimes) + 1,
      [`videoList[${current}].IsShare`]: true,
    })
    wx.ajax({
      method: 'POST',
      url: '?r=wtx/doctor/knowledge/share',
      data: { Id: this.data.activeId },
    })
  },
  handleBack() {
    wx.navigateBack()
  },
})

export {}