<template>
  <div class="device">
    <div class="box flex-between">
      <div class="left">
        <!--        广告-->
        <div class="advertising icon1 flex-center" v-if="advertisement==''">广告位招租</div>
        <!--        图片-->
        <div class="advertising icon1 flex-center" v-else-if="advertisement.fileType=='image/png'">
          <img :src="advertisement.previewPath" model="scaleToFill"/>
        </div>
        <!--        视频-->
        <div class="advertising icon1 flex-center" v-else>
          <video autoplay loop muted :src="advertisement.outerChainPath" style="width: 100%;height: 100%;"></video>
        </div>

        <div 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">
        <div class="main4 flex-center">
          <div>
            <span class="flex-center">
            <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0"
                   :logoScale=".2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white"></VueQr>
          </span>
            <span v-show="false" class="flex-center">
            <div v-show="!src">支付宝小程序码</div>
            <VueQr v-show="src" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"
                   :logoMargin="0" :logoScale=".2" :margin="0" :size="300" :text="src"
                   logoBackgroundColor="white"></VueQr>
          </span>
            <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"
              @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>
      </div>
      <div class="dbTip flex-between">
        <div>编号：{{cite.code}}</div>
        <div>位置：{{cite.facility.detailAddress}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import VueQr from 'vue-qr'

export default {
  name: "device",
  components: {
    VueQr
  },
  data() {
    return {
      appSrc:'https://mps.xlmalls.com/web/'+this.cite.code,
      advertisement: '',
      src: ''
    };
  },
  methods: {
    skip(href, name) {
      // navigator.usb.requestDevice({
      //   filters: [{
      //     vendorId: 0xABCD,
      //     classCode: 0xFF, // vendor-specific
      //     protocolCode: 0x01
      //   }]
      // }).then(device => {
      //   // 连接成功后进行通信操作
      //   // 执行数据传输操作
      //   console.log('连接成功后进行通信操作',device)
      //   return device.open();
      // }).catch(error => {
      //   // 捕获异常
      //   console.log(error);
      // });
      // if(this.cite.memberLoginVo=='') {
      //   alert('请扫码登录再操作')
      //   return
      // }
      if(href=='operationGuide') {
        this.cite.modeName = name
      }
      this.$router.push({
        name: href,
        params: {
          name: name,
        },
      });
    },
    load() {
      if(this.src == '') {
        this.src = this.cite.url
        setTimeout(()=>{
          this.load()
        },1000)
      }
    },
  },
  mounted() {
    this.load()

    setInterval(()=>{
      if(this.cite.advertisement != this.advertisement) {
        this.advertisement = this.cite.advertisement
      }
    },300)
  }
};
</script>

<style scoped lang="less">
.device {
  margin: 2.5rem 4.13rem 0;
  .box {
    align-items: flex-start;
    .left {
      width: 76.88rem;
      .advertising {
        width: 100%;
        height: 43rem;
        border-radius: 1.63rem;
        margin-bottom: 1.88rem;
        cursor: pointer;
        overflow: hidden;
        font-size: 8rem;
        font-weight: 400;
        color: #ffffff;
        line-height: 8rem;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
    .right {
      width: 33rem;
    }
  }
  .main {
    width: 100%;
    height: 8rem;
    border-radius: 1.63rem;
    font-size: 1.8rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.8rem;
    margin-top: 1rem;
    cursor: pointer;
    img {
      width: 12rem;
      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);
  }
  .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: 49%;
    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;
    span {
      width: 18rem;
      height: 18rem;
      background: #ffffff;
      border: 0.06rem solid #707070;
      //margin: 1rem auto 0;
      img {
        width: 100%;
        margin: 0;
      }
    }
    .tip {
      margin-top: 1rem;
    }
    img {
      width: 2.31rem;
      margin-right: 1.19rem;
    }
  }
  .dbTip {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 1.2rem;
    font-weight: 400;
    color: #323232;
    height: 3rem;
    padding: 0 3rem;
  }
}
</style>