<template>
  <div class="device">
    <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]">
      <div v-if="false" class="left">
        <div v-if="advertisement == []" class="advertising icon1 flex-center">广告位招租</div>
        <div v-else class="advertising flex-center">
          <img :src="advertisement[0].previewPath" model="scaleToFill" />
        </div>
      </div>
      <div :class="['left', { 'vertical-width': isVertical }]">
        <!-- <div class="zzc"></div> -->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div v-for="(item, index) in advertisement" :key="index" class="swiper-slide">
              <!--        图片-->
              <div v-if="item.fileType == 'image/jpeg'" :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]">
                <img :src="item.previewPath" model="scaleToFill" />
              </div>
              <div v-else-if="item.fileType == 'image/png'" :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]">
                <img :src="item.previewPath" model="scaleToFill" />
              </div>
              <!--        视频-->
              <div v-else :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]">
                <video
                  v-if="index == swIndex"
                  @pause="onPause"
                  @timeupdate="onTimeupdate"
                  @loadedmetadata="loadEdmetadata"
                  :src="item.previewPath"
                  autoplay
                  muted
                  style="width: 100%; height: 100%"
                ></video>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div v-if="false" class="left">
        <!--        广告-->
        <div v-if="advertisement == ''" class="advertising icon1 flex-center">广告位招租</div>
        <!--        图片-->
        <div v-else-if="advertisement.fileType == 'image/png'" class="advertising icon1 flex-center">
          <img :src="advertisement.previewPath" model="scaleToFill" />
        </div>
        <!--        视频-->
        <div v-else class="advertising icon1 flex-center">
          <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%; height: 100%"></video>
        </div>

        <div v-show="false" class="box2 flex-between">
          <div class="main2 flex-center" @click="skip('explain', '联系客服')">
            <img src="../assets/demo7.png" />
            联系客服
          </div>
          <div class="main2 flex-center" @click="skip('explain', '价格查询')">
            <img src="../assets/demo5.png" />
            价格查询
          </div>
        </div>
      </div>
      <div class="right" v-if="!isVertical">
        <div class="main4 flex-center">
          <div>
            <!--            <div class="flex-center ewm" v-if="memberLoginVo!=''">-->
            <!--              <div class="zzc flex-center"></div>-->
            <!--              <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"-->
            <!--                     :logoMargin="0"-->
            <!--                     :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">-->
            <!--              </VueQr>-->
            <!--            </div>-->
            <div class="flex-center ewm" @click="openTip('staTip',true)">
              <VueQr
                v-if="appSrc"
                :auto-color="true"
                :dot-scale="1"
                :logo-src="require('@/assets/logo.png')"
                :logoMargin="0"
                :logoScale="0.2"
                :margin="0"
                :size="300"
                :text="appSrc"
                logoBackgroundColor="white"
              ></VueQr>
            </div>
            <div class="flex-center tip">
              <img src="../assets/demo9.png" />
              扫码打印手机文件
            </div>
          </div>
        </div>

        <!--        功能-->
        <div class="feature">
          <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')">
            <img src="../assets/demo2.png" />
            <div>U盘打印</div>
          </div>
<!--          <div class="main icon3 flex-start" :style="smdysta?'background: #ccc;':''" @click="skip('operationGuide', '扫描打印')">-->
<!--            <img src="../assets/demo3.png" />-->
<!--            <div>扫描打印</div>-->
<!--          </div>-->
          <div class="main icon4 flex-start" @click="skip('operationGuide', '身份证打印')">
            <img src="../assets/demo4.png" />
            <div>身份证打印</div>
          </div>
          <div class="main icon5 flex-start" @click="skip('codeExtract', '取件码打印')">
            <img class="qjmIcon" src="../assets/demo17.png" />
            <div>取件码打印</div>
          </div>
        </div>
      </div>
      <!-- 竖版 -->
      <div class="right vertical-bottom vertical-width" v-if="isVertical">
        <div class="main4 flex-center vertical-width50">
          <div>
            <!--            <div class="flex-center ewm" v-if="memberLoginVo!=''">-->
            <!--              <div class="zzc flex-center"></div>-->
            <!--              <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"-->
            <!--                     :logoMargin="0"-->
            <!--                     :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">-->
            <!--              </VueQr>-->
            <!--            </div>-->
            <div class="flex-center ewm" @click="openTip('staTip',true)">
              <VueQr
                v-if="appSrc"
                :auto-color="true"
                :dot-scale="1"
                :logo-src="require('@/assets/logo.png')"
                :logoMargin="0"
                :logoScale="0.2"
                :margin="0"
                :size="300"
                :text="appSrc"
                logoBackgroundColor="white"
              ></VueQr>
            </div>
            <div class="flex-center tip">
              <img src="../assets/demo9.png" />
              扫码打印手机文件
            </div>
          </div>
        </div>

        <!--        功能-->
        <div class="vertical-bottom-right">
          <div class="main icon2 flex-start vertical-width" style="height: 8rem !important" @click="skip('operationGuide', 'U盘打印')">
            <img src="../assets/demo2.png" />
            <div>U盘打印</div>
          </div>
          <!-- <div class="main icon3 flex-start vertical-width50" @click="skip('operationGuide', '扫描打印')">
          <img src="../assets/demo3.png" />
          <div>扫描打印</div>
        </div> -->
          <div class="main icon4 flex-start vertical-width" style="height: 8rem !important" @click="skip('operationGuide', '身份证打印')">
            <img src="../assets/demo4.png" />
            <div>身份证打印</div>
          </div>
          <div class="main icon5 flex-start" style="height: 8rem !important" @click="skip('codeExtract', '取件码打印')">
            <img class="qjmIcon" src="../assets/demo17.png" />
            <div>取件码打印</div>
          </div>
        </div>
      </div>
      <div class="dbTip flex-between">
        <div>机器编号：{{ cite.code }}</div>
        <div>机器状态：{{ cite.deviceStatus }}</div>
        <div>客服电话：{{ facility.servicePhone }}</div>
      </div>
    </div>
    <audio ref="audio" class="aud">
      <source src="../assets/audio/ConnectingRemind.mp3" />
    </audio>
<!--    小程序二维码弹窗-->
    <div class="onPopup" v-show="staTip">
      <div class="curtain" @click="openTip('staTip')"></div>
      <div class="onBox ewmSm flex-between">
        <img class="gbIcon" @click="openTip('staTip')" src="../assets/close.png"/>
        <div class="li" v-for="(item,index) in 2" :key="item">
          <VueQr
              :auto-color="true"
              :dot-scale="1"
              :logo-src="require('@/assets/logo.png')"
              :logoMargin="0"
              :logoScale="0.2"
              :margin="0"
              :size="260"
              :text="index==0?'https://mps.xlmalls.com/yn-shared-printer/yunying/yyd':'https://mps.xlmalls.com/files/ywd'"
              logoBackgroundColor="white"
          ></VueQr>
          <div class="name">{{index==0?'运营':'运维'}}端小程序</div>
          <div>扫码了解更多详情</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VueQr from 'vue-qr'
import {gpyError} from "@/api/bdResultApi";
export default {
  name: 'device',
  components: {
    VueQr
  },
  data() {
    return {
      swIndex: 0,
      mySwiper: '',
      appSrc: '',
      memberLoginVo: '',
      advertisement: '',
      facility: '',
      src: '',
      isVertical: false,
      playTimer: '', //播放的定时任务
      errTimer: null, //异常的定时器

      smdysta: false,
      staTip: false
    }
  },
  methods: {
    openTip(name, sta=false) {
      this[name] = sta
    },
    skip(href, name) {
      let { facility } = this
      let { sta, name2 } = ''
      facility.paperNumber.forEach(item => {
        if (item.name.indexOf('A4') != -1) {
          if (item.residue < 1) {
            name2 = '请联系管理员添加' + item.name
            sta = true
          }
        }
      })
      if (sta == true) {
        this.cite.state = {
          name: name2,
          sta: true
        }
        return
      }
      // if (this.cite.memberLoginVo == '') {
      //   this.cite.state = {
      //     name: '请扫码登录设备再操作！',
      //     sta: true
      //   }
      //   return
      // }
      if (href == 'operationGuide') {
        if(this.smdysta) {
          this.cite.state = {
            name: '高拍仪异常暂停使用，请联系客服维修！',
            sta: true
          }
          return;
        }
        this.cite.modeName = name
      }
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    gpyError() {
      let _this = this
      gpyError().then(res => {
        _this.smdysta = res
      })
    },
    load() {
      if (this.src == '') {
        this.src = this.cite.url
        setTimeout(() => {
          this.load()
        }, 1000)
      }
    },
    GGT(T) {
      let _this = this
      this.mySwiper = new this.Swiper('.swiper-container', {
        // allowSlidePrev: false,
        // allowSlideNext: false,
        // 改变swiper样式时，自动初始化swiper
        observer: true,
        // 监测swiper父元素，如果有变化则初始化swiper
        observeParents: true,
        loop: true,
        autoplay: {
          delay: T,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        },
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.realIndex);
            _this.swIndex = this.realIndex
            if (_this.advertisement[this.realIndex].fileType == 'video/mp4') {
              _this.bannerLoop(false)
            }
          }
        }
      })
    },
    bannerLoop(sta, n) {
      let _this = this
      if (sta) {
        _this.mySwiper.slideTo(n)
        _this.mySwiper.autoplay.start()
      } else {
        _this.mySwiper.autoplay.stop()
      }
    },
    onPause() {
      let n = this.swIndex + 1
      if (n == this.advertisement.length) {
        n = 1
      }
      this.bannerLoop(true, n)
    },
    onTimeupdate() {
      // console.log(123,e)
    },
    // 正在加载中
    loadEdmetadata() {
      // console.log(456,e)
    },
    play(addr) {
      let music = new Audio()
      music = addr
      this.$refs.audio.src = music
      this.$refs.audio.play()
    }
  },
  created() {},
  mounted() {
    this.gpyError()
    this.load()
    if (window.outerWidth === 1080 || window.outerWidth === 1064) {
      this.cite.isVertical = true
      this.isVertical = true
    } else {
      this.cite.isVertical = false
      this.isVertical = false
    }
    // 判断是不是设备是不是异常
    this.playTimer = setInterval(() => {
      console.log(this.cite.serveError)
      if (this.cite.serveError) {
        const addr = require('../assets/audio/ExceptionNotice.mp3')
        this.play(addr)
      }
    }, 60000)
    setInterval(() => {
      if (this.cite.advertisement != this.advertisement) {
        this.advertisement = this.cite.advertisement
        setTimeout(() => {
          this.GGT(this.advertisement[0].intervalTime * 1000)
        }, 500)
      }
      if (this.cite.facility != this.facility) {
        this.facility = this.cite.facility
      }
      if (this.cite.memberLoginVo != this.memberLoginVo) {
        this.memberLoginVo = this.cite.memberLoginVo
      }

      if (this.appSrc == '' && this.cite.code != '') {
        this.appSrc = 'https://mps.xlmalls.com/web/code/' + this.cite.code
        // this.appSrc = 'https://mps.xlmalls.com/web/payment/' + this.cite.code
        // this.appSrc = 'https://mps.xlmalls.com/web/' + this.cite.code
        // console.log(this.appSrc)
      }
    }, 300)
  },
  destroyed() {
    clearInterval(this.playTimer)
  }
}
</script>

<style lang="less" scoped>
.device {
  margin: 2rem 2rem 0;

  .box {
    align-items: flex-start;
    position: relative;

    .left {
      width: 92.5rem;
      margin: 0;
      position: relative;
      z-index: 1;

      .advertising {
        width: 100%;
        height: 52rem;
        border-radius: 1.63rem;
        //margin-bottom: 1.88rem;
        cursor: pointer;
        overflow: hidden;
        font-size: 8rem;
        font-weight: 400;
        color: #ffffff;
        line-height: 8rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .zzc {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 99;
        left: 0;
        right: 0;
      }
    }
    .right {
      width: 22rem;
    }
  }

  .main {
    width: 100%;
    //height: 8rem;
    height: 6rem;
    border-radius: 1.63rem;
    //font-size: 1.8rem;
    font-size: 1.6rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.8rem;
    margin-top: 1rem;

    img {
      width: 8rem;
      margin-top: -1rem;
    }
  }

  .icon1 {
    background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45);
  }

  .icon2 {
    background: linear-gradient(180deg, #f2c952 0%, #db572b 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57);
  }

  .icon3 {
    background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3);
  }

  .icon4 {
    background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42);
  }
  .icon5 {
    background: linear-gradient(0deg, #F95555 0%, #DE2F2F 100%);
    box-shadow: 0 0 0.75rem 0 rgba(233, 63, 63, 0.53);
  }
  .feature {
    padding: 0 1.25rem;
  }
  .qjmIcon {
    width: 2.875rem!important;
    height: 4.5rem;
    margin: 0 41px!important;
  }
  .css1 {
    background: #ffffff;
    box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
    cursor: pointer;
  }

  .main2 {
    width: 100%;
    height: 6.44rem;
    .css1();
    font-size: 1.88rem;
    font-weight: bold;
    color: #323232;
    line-height: 2.63rem;

    img {
      width: 3.75rem;
      margin-right: 0.38rem;
    }
  }

  .main3 {
    width: 100%;
    height: 9.94rem;
    .css1();
    font-size: 2.13rem;
    font-weight: bold;
    color: #323232;
    line-height: 3rem;

    img {
      width: 4.25rem;
      margin-right: 0.88rem;
    }
  }

  .main4 {
    width: 100%;
    height: 25rem;
    .css1();
    font-size: 1.88rem;
    font-weight: 400;
    color: #323232;
    line-height: 2rem;

    .ewm {
      width: 18rem;
      height: 18rem;
      background: #ffffff;
      border: 0.06rem solid #707070;
      position: relative;
      img {
        width: 100%;
        margin: 0;
      }
    }

    .tip {
      margin-top: 1rem;
    }

    img {
      width: 2.31rem;
      margin-right: 1.19rem;
    }
    .zzc {
      position: absolute;
      background: #333;
      opacity: 0.5;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  .dbTip {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 1.2rem;
    font-weight: 400;
    color: #323232;
    height: 3rem;
    padding: 0 3rem;
  }
}
// 广告高度
.vertical-height {
  height: 72rem !important;
}

.vertical-width-direction {
  width: 100%;
  flex-direction: column;
}
.vertical-width {
  width: 100% !important;
}
.vertical-width50 {
  width: 48% !important;
}
.vertical-bottom {
  display: flex;
  // align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-top: 2rem;
}
.vertical-bottom-right {
  width: 60%;
  margin-right: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.onPopup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  .curtain {
    background: #000;
    width: 100%;
    height: 100%;
    opacity: 0.3;
  }
  .onBox {
    position: absolute;
    left: 50%;
    margin-left: -22rem;
    top: 50%;
    margin-top: -13.4375rem;
    width: 44rem;
    height: 26.875rem;
    background: #FFFFFF;
    border-radius: 1.25rem;
  }
  .ewmSm {
    height: 24.625rem;
    padding-top: 2.25rem;
    .li {
      width: 100%;
      text-align: center;
      div {
        font-weight: 500;
        font-size: 1.25rem;
        color: #666666;
        line-height: 1.25rem;
        margin-top: 0.625rem;
      }
      .name {
        color: #333333;
      }
    }
    .gbIcon {
      position: absolute;
      width: 2rem;
      height: 2rem;
      top: 0.9375rem;
      right: 0.9375rem;
    }
  }
}
</style>