<template xmlns="http://www.w3.org/1999/html">
  <div class="saleSelfMachine">
    <div class="background">
      <img :src="backgroundImgURL" width="100%" height="100%" />
    </div>
    <div class="orderNumberData">
      <!--v-show="false" disabled="!isEdit"-->
      <el-input
        placeholder="请将二维码放置在扫描区"
        v-model="orderNumber"
        :focus="true"
        ref="inputs"
      >
      </el-input>
      <!--style="display:block;width:120px"-->
      <div  v-show="false">
        手动输入开关：
      </div>
      <i class="el-icon-full-screen" @click="fullScreen"
      v-show="edit1"></i>
<!--      <el-switch
        v-model="isEdit"
        active-color="#66ccff"
        inactive-color="#ffffff"
      >
      </el-switch>-->
    </div>
    <div class="tip">
      手机二维码对准下方摄像头<br>
      <i class="el-icon-bottom" style="padding-left: 450px;font-size: 300px"></i>
    </div>
  </div>
</template>
<script>
import screenfull from "screenfull"
export default {
  data() {
    return {
      orderNumber: null,
      isEdit: true,
      edit1: true,
      backgroundImgURL: require("@/assets/saleSelfMachine/backgroundImg.jpg")
    };
  },
  created() {
    this.changfouce();
  },
  // watch:{
  //    data:"toSaleSelfMachine"
  // },
  methods: {
    //输入框自动聚焦
    changfouce() {
      this.$nextTick(x => {
        this.$refs.inputs.focus();
      });
    },
    fullScreen() {
      if (screenfull.isEnabled && !screenfull.isFullscreen) {
        screenfull.request();
        this.edit1=false
      }
    },
    async querynumber(){
      console.log(this.orderNumber)
      let orderNumber=this.orderNumber
      let i=0
      await this.axios.post("/api/v1/tms/queryNumber?orderNumber=" + orderNumber)
        .then((res)=>{
          console.log("查找出来的数据")
          console.log(res.data)
          console.log("-------------------------")
          if (res.data.printnumber==1){
            i=1
          }
        })
      console.log(i)
      return i
    }
    //失去焦点后自动执行获得焦点事件
    // onInputBlur(){
    //     console.log("获取焦点")
    //     this.changfouce();
    // }
    // toSaleSelfMachine(){
    //      this.$router.push({
    //         path:'/saleSelfMachine',
    //     })
    // }
  },
  mounted() {
    console.log(screenfull.isFullscreen);
    // this.changfouce();
    const timer = setInterval(async () => {
      // if(this.$refs.inputs.focus==false){
      //     console.log("false")
      this.changfouce();
      //}
      if (this.orderNumber != null && this.orderNumber.length == 21) {
        if (
          this.orderNumber.startsWith("WYSDD") == true ||
          this.orderNumber.startsWith("wysdd") == true
        ) {
          let promise = await this.querynumber(this.orderNumber);
          console.log(promise)
          if (promise==1){
            this.$message.error("你已经打印过了")
            this.orderNumber=null
            return
          }
          this.$router.push({
            path: "/printReceipt?orderNumber=" + this.orderNumber
          });
        }
      } else if (this.orderNumber.length > 21) {
        //清空输入框，免得一次多个重复订单还无法删除
        this.orderNumber = null;
      }
    }, 3000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  }
};
</script>
<style lang="scss">
.saleSelfMachine {
  width: 100vh;
  height: 100vh;
  .background {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    overflow: hidden;
  }
  .orderNumberData {
    width: 100%;
    color: #fff;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tip{
    width: 1500px;
    height: 500px;
    font-size: 100px;
    padding-left: 100px;
    padding-top: 200px;
    color: #e6e6e6;
  }
}
</style>
