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

Page({
  data: {
    id: '',
    CateId: '',
    index: 0 as string | number,
    detail: {} as any,
    HistoryId: '',
    starShow: false,

    asideOut: false,
    asideType: '7',
    timeToast: false,
    timeToastType: '',
    timeToastParams: {
      rewardScore: 0,
    },

    saveLock: false,
    starLock: false,
    shareLock: false,
    sendShare: false,

    // TODO:后期需补充逻辑，根据获取积分情况控制显隐
    showTip: false,
  },

  onLoad(options) {
    const { id } = options
    this.setData({
      id,
    })
    app.zdWaitLogin().then(() => {
      this.getDetail(true)
    })
  },
  onShow() {
    app.zdMpBehavior({ PageName: 'PG_PATIENTKNOWLEDGEDETAILS' })
    if (this.data.sendShare) {
      this.setData({
        sendShare: false,
        timeToastType: '9',
      })
      this.handleTimeOut()
    }
  },
  onHide() {
    if (this._time) {
      clearInterval(this._time)
    }
  },
  onUnload() {
    if (this._time) {
      clearInterval(this._time)
    }
  },
  getDetail(view = false) {
    wx.ajax({
      method: 'GET',
      url: '?r=xd/pic-text/detail',
      data: {
        Id: this.data.id,
      },
    }).then(async (res) => {
      res.Content = await this.formatVideo(res.Content)
      this.setData({
        detail: res,
      })
      if (view) {
        let asideOut = false
        if (res.CanGetScore) {
          asideOut = true
        }
        this.setData({
          asideOut,
        })
        this.saveView()
      }
    })
  },
  formatVideo(Content) {
    return new Promise((reslove) => {
      const query = wx.createSelectorQuery()
      query
        .select('#mp-html')
        .boundingClientRect((rect) => {
          const mpWidth = rect.width
          const reg = /<video\b([^>]*)width="(.*?)".*?height="(.*?)".*?>/g
          Content = Content.replace(reg, (match, otherAttributes, width, height) => {
            if (!isNaN(Number(width)) && !isNaN(Number(height))) {
              return `<video ${otherAttributes} width="${mpWidth}" height="${height * (mpWidth / width)}">`
            }
            return `<video ${otherAttributes} width="${mpWidth}">`
          })
          reslove(Content)
        })
        .exec()
    })
  },
  handleVideoTime: licia.throttle(function (time) {
    wx.ajax({
      method: 'POST',
      url: '?r=xd/pic-text/watch-duration',
      data: {
        HistoryId: this.data.HistoryId,
        WatchDuration: time,
      },
    }).then((res) => {
      console.log('res: ', res)
    })
  }, 5000),
  saveView() {
    wx.ajax({
      method: 'POST',
      url: '?r=xd/pic-text/view',
      data: {
        ContentId: this.data.id,
      },
    }).then((res) => {
      this.setData({
        HistoryId: res.HistoryId,
      })
      let time = 0
      if (this._time) {
        clearInterval(this._time)
      }
      this._time = setInterval(() => {
        time++
        this.handleVideoTime(time)
      }, 1000)
    })
  },
  handleDetail(e) {
    const { id } = e.currentTarget.dataset
    this.setData({
      id,
      saveLock: false,
      starLock: false,
      shareLock: false,
      sendShare: false,
    })
    this.getDetail(true)
  },
  handleStar() {
    app.zdMpBehavior({ PageName: 'BTN_PATIENTKNOWLEDGEDETAILSLIKE' })
    this.setData({
      starShow: true,
    })
    const header = this.selectComponent('#animate')
    header.start()
    if (this._timer) {
      clearInterval(this._timer)
    }
    this._timer = setTimeout(() => {
      this.setData({
        starShow: false,
      })
    }, 2000)
    wx.ajax({
      method: 'POST',
      url: '?r=xd/pic-text/compliment',
      data: {
        ContentId: this.data.id,
      },
      showMsg: false,
    }).then(() => {
      this.getDetail()
      if (this.data.starLock || this.data.timeToast) return
      this.setData({
        timeToastType: '8',
        starLock: true,
      })
      this.handleTimeOut()
    })
  },
  handleToggleSave() {
    app.zdMpBehavior({ PageName: 'BTN_PATIENTKNOWLEDGEDETAILSFAVORITE' })
    const {
      id,
      detail: { IsCollect },
    } = this.data
    app.zdPermissionVerification(3, 3, `/patient/pages/repositoryDetail/index?id=${id}`, id).then(() => {
      if (IsCollect == 1) {
        wx.ajax({
          method: 'POST',
          url: '?r=xd/pic-text/cancel-collection',
          data: {
            ContentId: id,
          },
          loading: true,
        }).then(() => {
          this.getDetail()
          wx.showToast({
            title: '取消收藏',
            icon: 'none',
          })
        })
      } else {
        wx.ajax({
          method: 'POST',
          url: '?r=xd/pic-text/collection',
          data: {
            ContentId: id,
          },
          loading: true,
        }).then(() => {
          this.getDetail()
          // wx.showToast({
          //   title: "收藏成功",
          //   icon: "none",
          // });
          if (this.data.saveLock || this.data.timeToast) return
          this.setData({
            timeToastType: '10',
            saveLock: true,
          })
          this.handleTimeOut()
        })
      }
    })
  },
  handleBack() {
    const { id } = this.data
    app
      .zdPermissionVerification(3, 3, `/patient/pages/repositoryDetail/index?id=${id}`, id)
      .then(() => {
        wx.navigateBack({
          fail() {
            wx.reLaunch({
              url: '/patient/pages/index/index',
            })
          },
        })
      })
      .catch(() => {
        app.globalData.backPage = false
      })
  },
  handleShare() {
    wx.ajax({
      method: 'POST',
      url: '?r=xd/pic-text/share',
      data: {
        ContentId: this.data.id,
      },
    }).then(() => {
      this.getDetail()
    })
  },
  handleTimeOut() {
    if (!this.data.timeToastType) {
      return
    }
    wx.ajax({
      method: 'POST',
      url: '?r=xd/score/send-score',
      data: {
        Type: this.data.timeToastType,
        Id: this.data.detail.Id,
      },
    }).then((res) => {
      if (this.data.timeToast) return
      if (!Array.isArray(res)) {
        this.setData({
          timeToast: true,
          timeToastParams: {
            rewardScore: res.rewardScore,
          },
        })
        setTimeout(() => {
          this.setData({
            timeToast: false,
          })
        }, 3000)
      }
    })
  },
  onShareAppMessage() {
    this.handleShare()
    if (!this.data.shareLock) {
      this.setData({
        sendShare: true,
      })
    }
    this.setData({
      shareLock: true,
    })
    return {
      title: this.data.detail.Title,
      path: `/patient/pages/repositoryDetail/index?id=${this.data.id}`,
      imageUrl: this.data.detail.TitlePicLink,
    }
  },
  onPageScroll(e) {
    if (e.scrollTop > 10) {
      this.setData({
        showTip: false,
      })
    }
  },
  handleTapShare() {
    app.zdMpBehavior({ PageName: 'BTN_PATIENTKNOWLEDGEDETAILSSHARE' })
  },
})