<template>
  <div class="slw">
    <iframe v-if="isShow" :id="iframeId" style="width: 100%; height: 100%;" :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`"></iframe>
    <div class="slw-bottom" :class="[isShowBar ? '' : 'active']" @click.stop="() =>{}">
      <Timeline class="Timeline" v-if="times.length" :times="times" @replay="onReplay" :isLiveing="isLiveing" ref="timeline" :style="{width: width}"></Timeline>
      <div class="action-bar">
        <div class="left">
          <div class="left-btns">
            <img :src="isPause ? 'https://cdn.cunwuyun.cn/slw2.0/images/play.png' : 'https://cdn.cunwuyun.cn/slw2.0/images/pause.png'" @click="changePlayStatus">
          </div>
          <!-- <div
            class="volume"
            @mouseleave.stop="isShowVolume = false">
            <img 
              @mouseenter.stop="isShowVolume = true"
              src="https://cdn.cunwuyun.cn/slw2.0/images/sound.png">
            <div class="volume-slider" :class="[isShowVolume ? 'active' : '']">
            </div>
          </div> -->
          <div class="play-status">
            <div class="live" v-if="isLiveing">
              <span class="label"></span>
              <i>直播中</i>
              <em>{{ date }}</em>
            </div>
            <div v-else class="back-btn" @click="backLiveing">回到直播</div>
          </div>
        </div>
        <div class="right" :style="{ right: right + 'px' }">
          <!-- <picker mode="date" @change="onDateChange">
            <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png">
          </picker> -->
          <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true">
        </div>
      </div>
    </div>
    <u-calendar v-model="isShowDate" @change="onDateChange" mode="date"></u-calendar>
  </div>
</template>

<script>
  import Timeline from './components/Timeline'
  export default {
    props: ['id'],

    name: 'slwVideo',

    components: {
      Timeline
    },

    data () {
      return {
        isShow: true,
        iframeId: `video-${new Date().getTime()}`,
        liveingUrl: '',
        replayUrl: '',
        times: [],
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
        isShowDate: false,
        isPause: false,
        isShowVolume: false,
        isShowBar: true,
        date: '',
        right: 0,
        isLiveing: true
      }
    },

    watch: {
      src: {
        handler (val) {
          if (val) {
            this.isShow = false

            this.$nextTick(() => {
              this.isShow = true
            })
          }
        },
        immediate: true,
        deep: true
      }
    },

    computed: {
      src () {
        if (this.isLiveing) {
          return this.liveingUrl
        }

        return this.replayUrl
      }
    },

    mounted () {
      if (uni.getSystemInfoSync().platform === 'ios') {
        this.right = 20
      }

      this.date = this.$dayjs(new Date()).format('YYYY-MM-DD')
      this.getSlwPlaybackTime()
      this.width = document.querySelector(`.slw`).offsetWidth + 'px'

      if (this.id) {
        this.getLiveingUrl()
      }
    },

    methods: {
      backLiveing () {
        this.date = this.$dayjs(new Date()).format('YYYY-MM-DD')
        this.getLiveingUrl()
        this.getSlwPlaybackTime()
      },

      onDateChange (e) {
        this.date = `${e.result}`
        this.getSlwPlaybackTime()
      },

      onReplay (e) {
        this.isLoading = true
        this.$http.post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
          params: {
            ids: this.id,
            startTime: `${this.date} ${e}`,
            endTime: this.date + ` ${Number(e.substr(0, 2)) + 6 > 9 ? Number(e.substr(0, 2)) + 6 : '0' + (Number(e.substr(0, 2)) + 6)}:00:00`,
            nvrCodes: ''
          }
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length) {
              this.replayUrl = res.data[0].playbackUrl
              this.isLiveing = false
            }
            this.isLoading = false
          }
        }).catch(e => {
          console.log(e)
          this.isLoading = false
        })
      },

      getLiveingUrl () {
        this.isLoading = true
        this.$http.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${this.id}`).then(res => {
          if (res.data) {
            this.liveingUrl = res.data
            this.isLiveing = true
          }

          this.isLoading = false
        }).catch(() => {
          this.isLoading = false
        })
      },

      getSlwPlaybackTime () {
        this.$loading()
        this.$http.post(`/app/appzyvideoequipment/getSlwPlaybackTime`, null, {
          params: {
            ids: this.id,
            startTime: this.date + ' 00:00:00',
            endTime: this.date + ' 23:59:59',
          }
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length) {
              const times = res.data[0].times

              this.times = times.map(item => {
                const startTime = (item.startTime - new Date(this.date.replaceAll('-', '/') + ' 00:00:00').getTime()) / 1000
                const endTime = (item.endTime - new Date(this.date.replaceAll('-', '/') + ' 00:00:00').getTime()) / 1000

                return {
                  startTime: Number(startTime.toFixed(0)),
                  endTime: Number(endTime.toFixed(0))
                }
              }).sort((a, b) => {
                return a.startTime - b.startTime
              })
            }

            this.$hideLoading()
          }
        }).catch(() => {
          this.$hideLoading()
        })
      },

      onVolume (e) {
        const v = (e / 100).toFixed(1)
        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
        subPage.postMessage({
          type: 'volume',
          value: Number(v)
        }, '*')
      },

      changePlayStatus () {
        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
        subPage.postMessage({
          type: 'play',
          value: this.isPause
        }, '*')
        
        this.isPause = !this.isPause
      },
    }
  }
</script>

<style lang="scss" scoped>
  .slw {
    position: relative;
    width: 100%;
    height: 100%;

    ::v-deep .u-drawer {
      transform: scale(0.8);
      .u-calendar__content__item {
        padding: 0;
      }

      .u-calendar__action {
        padding: 14px 0;
      }
    }

    * {
      box-sizing: border-box;
    }

    iframe {
      border: none;
    }

    .slw-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      transition: all ease-in-out 0.5s;

      &.active {
        transform: translateY(100%);
      }

      .action-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 60px;
        padding: 0 30px;
        background: rgba(0, 0, 0, 0.8);

        .left {
          display: flex;
          align-items: center;

          .play-status {
            display: flex;
            align-items: center;
            margin-left: 12px;

            em {
              margin-left: 12px;
              font-style: normal;
              color: #fff;
              font-size: 24px;
            }

            .back-btn {
              padding: 4px 10px;
              border-radius: 6px;
              color: #ddd;
              font-size: 24px;
              cursor: pointer;
              background: #343747;

              &:hover {
                opacity: 0.6;
              }
            }

            .live {
              display: flex;
              align-items: center;
              padding: 2px 5px;
              color: rgba(0,255,0,.8);

              i {
                font-size: 24px;
                font-style: normal;
              }

              .label {
                width: 6px;
                height: 6px;
                margin-right: 12px;
                background: rgba(0,255,0,.8);
                border-radius: 50%;
                position: relative;

                &:after {
                  content: "";
                  width: 12px;
                  height: 12px;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  -webkit-transform: translate(-50%,-50%);
                  transform: translate(-50%,-50%);
                  border-radius: 50%;
                  border: 4px solid rgba(0,255,0,.2);
                }
              }
            }
          }

          .volume {
            display: flex;
            align-items: center;
            position: relative;
            height: 100%;

            .volume-slider {
              display: none;
              position: absolute;
              bottom: 15px;
              left: 50%;
              z-index: -1;
              opacity: 0;
              padding: 20px 0 10px;
              background-color: rgba(0, 0,0,.8);
              transform: translate(-50%, 0);
              transition: all ease 0.3s;

              &.active {
                display: block;
                z-index: 1;
                opacity: 1;
              }
            }
          }

          img {
            cursor: pointer;
            height: 40px;
          }

          .left-btns {
            display: flex;
            align-items: center;
            margin-right: 10px;

            span {
              flex: 1;
              height: 100%;
              line-height: 24px;
              background: #222838;
              color: #c9c9c9;
              font-size: 24px;
              cursor: pointer;

              &.active {
                color: #fff;
                background: linear-gradient(180deg, #28B2EB 0%, #193D91 100%);
              }
            }
          }
        }

        .right {
          position: relative;
          color: #c9c9c9;
          font-size: 24px;

          span {
            margin-right: 32px;
            cursor: pointer;

            &:hover {
              opacity: 0.6;
            }
          }

          img {
            margin-right: 16px;
            height: 40px;
            cursor: pointer;

            &:last-child {
              margin-right: 0;
            }

            &:hover {
              opacity: 0.6;
            }
          }
        }

        & > div {
          display: flex;
          align-items: center;
        }
      }
    }
  }
</style>