<!-- 扫描数码组件-->
<template>
  <div class="container comp-scancode">
    <div class="item-header" :style="{backgroundColor:comp.props.bgColor.val }">
      <img :class="'bg-img-fit'+comp.props.fitType.val" :src="comp.props.bgImg.val" />

      <input
        v-show="comp.props.manualInput.val==1"
        class="row item-input"
        v-model="code"
        type="number"
        placeholder="请输入16位防伪码"
        :style="{
			'border-color':comp.props.inputBorderColor.val,
            'background-image': 'url('+comp.props.inputIcon.val+')'
		}"
      />

      <img
        :src="comp.props.scanBtnImg.val"
        v-if="comp.props.scan.val==1"
        class="btn-scan"
        type="default"
        @click="scan()"
        :class="{width50:comp.props.manualInput.val==1,width100:comp.props.manualInput.val==0}"
      />
      <img
        :src="comp.props.searchBtnImg.val"
        v-if="comp.props.manualInput.val==1"
        class="btn-query"
        type="primary"
        @click="query()"
        :class="{width50:comp.props.scan.val==1,width100:comp.props.scan.val==0}"
      />

      <div></div>
    </div>
  </div>
</template>

<script>
import apiHelper from "../assets/js/apiHelper.js";
import wx from "weixin-js-sdk";
import { Toast } from "mint-ui";
//import _ from "lodash";
export default {
  name: "CompScanCode",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      code: "",
      errMsg: ""
    };
  },
  methods: {
    //产生随机数
    random(l) {
      let rand = "";
      for (let i = 0; i < l; i++) {
        let r = Math.floor(Math.random() * 10);
        rand += r;
      }
      return rand;
    },
    query() {
      let that = this;

      //   if (that.sup8.env !== that.sup8._def.env.run) {
      //     return;
      //   }

      // 检查数码
      if (!this.code || this.code.length !== 16) {
        Toast({
          message: "请输入16位防伪码",
          position: "bottom",
          duration: 2000
        });
        return;
      }
      this.sup8.$utils.sss("loadingFirst", 1);
      // let url = location.origin+"/?1"+this.code+"666666";
      let url = `${location.origin}/?${this.random(1)}${this.code}${this.random(
        6
      )}`;
      location.href = `${url}&channel=2&eno=${that.sup8.context.eno}&subscibe=0&scan=1&businesstype=7`;

      //that.sup8.codeInfo
      //   apiHelper.decode(this.code, this.sup8.context.eno, function(res) {
      //     if (res.flag) {
      //       that.sup8.context.isNewCode = true;
      //       that.sup8.codeInfo = res.data;
      //       // 进入防伪查询页面
      //       let newPage = _.find(that.cfg.pages, { type: "1" });
      //       if (newPage) {
      //         that.$emit("changeData", {
      //           selectedPage: newPage
      //         });
      //       }
      //     } else {
      //       that.popupVisible = true;
      //       that.errMsg = res.msg;
      //       that.sup8.msg = res.msg;
      //       that.$router.push("/error");

      //     //   Toast({
      //     //     message: that.errMsg,
      //     //     position: "bottom",
      //     //     duration: 2000
      //     //   });
      //     }
      //   });
    },
    scan() {
      let that = this;
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function(res) {
          let url = _.trim(res.resultStr); // 当needResult 为 1 时，扫码返回的结果
          that.sup8.$utils.sss("loadingFirst", 1);
          location.href = `${url}&channel=2&eno=${that.sup8.context.eno}&subscibe=0&scan=1&businesstype=7`;
        },
        fail: function(e) {
          console.log(JSON.stringify(e));
        }
      });
      //   let that = this;
      //   if (that.sup8.env !== that.sup8._def.env.run) {
      //     return;
      //   }

      //   function cb(url) {
      //     apiHelper.decodeUrl(url, that.sup8.context.eno, function(res) {
      //       if (res.flag || _.includes([300106], res.errorCode)) {
      //         that.sup8.context.isNewCode = true;
      //         that.sup8.codeInfo = res.data;

      //         // 将解码后的数码信息存到缓存
      //         that.sup8.$utils.updateContext(
      //           that.sup8.context,
      //           that.sup8.codeInfo
      //         );
      //         that.sup8.$utils.updateContext(that.sup8.context, {
      //           decodestatus: res.errorCode
      //         });

      //         // 进入防伪查询页面
      //         let newPage = _.find(that.cfg.pages, { type: "1" });
      //         if (newPage) {
      //           that.$emit("changeData", {
      //             selectedPage: newPage
      //           });
      //         }
      //       } else {
      //         that.errMsg = res.msg;
      //         that.sup8.msg = res.msg;
      //         that.$router.push("/error");
      //         // Toast({
      //         //   message: res.msg,
      //         //   position: "bottom",
      //         //   duration: 2000
      //         // });
      //       }
      //     });
      //   }

      //   // 测试代码
      // //   let url = "http://cj8.ren/?633001696389658560737D3";
      // //   cb(url);
      // //   return;
      //   // 测试代码

      //   wx.scanQRCode({
      //     needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      //     scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      //     success: function(res) {
      //       let url = _.trim(res.resultStr); // 当needResult 为 1 时，扫码返回的结果

      //       cb(url);
      //     }
      //   });
    }
  },
  watch: {},
  created: function() {
    var that = this;
    // 合并参数是为了当实际属性少于基础属性时 补位
    that.mergeCompProps(that.comp);

    that.style = {};
    switch (that.sup8.env) {
      case that.sup8._def.env.design:
        break;
      case that.sup8._def.env.preview:
        break;
      case that.sup8._def.env.run:
        break;
      default:
        break;
    }
  },
  mounted: function() {
    var that = this;
    console.log("扫码:this.comp", this.comp);

    that.sup8.antifakeInfo = undefined;
    that.sup8.productInfo = undefined;
  }
};
</script>

<style scoped>
/* .container {
} */

.item-header {
  position: relative;
  color: white;
  height: 100vh;
  overflow: hidden;
}

.item-header .bg-img-fit1 {
  width: 100% !important;
  overflow: hidden;
  z-index: 1;
  min-height: 99.5vh;
}

.item-header .bg-img-fit2 {
  width: 100% !important;
  overflow: hidden;
  z-index: 1;
}

.item-header .item-input {
  box-sizing: border-box;
  position: absolute;
  padding: 0 20px 0 50px;
  border-radius: 0.9rem;
  bottom: 8rem;
  left: 5%;
  width: 90%;
  height: 2.5rem;
  border: 1px solid #fff;
  font-size: 0.9rem;
  outline: none;
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: 1.4rem 1.4rem;
}

.item-header .btn-scan {
  position: absolute;
  /* max-height: 2.5rem; */
  left: 5%;
  bottom: 3.8rem;
  /* border-radius: .9rem; */
  /* color: #282828; */
  /* font-size: 0.9rem; */
  /* font-weight: bolder; */
  border: 0px;
  outline: none;
}
.item-header .width50 {
  width: 40%;
}
.item-header .width100 {
  left: 5%;
  width: 90%;
}

.item-header .btn-query {
  position: absolute;
  /* border-radius: .9rem; */
  /* max-height: 2.5rem; */
  right: 5%;
  bottom: 3.8rem;
  /* color: white; */
  /* font-size: 0.9rem; */
  /* font-weight: bolder; */
  border: 0px;
  outline: none;
}
/* @media screen and (min-width: 768px) {
    .item-header .item-input {
        bottom: 8rem;
    }
} */

/* 设计器中样式 */
.env-design .item-header {
  height: 538px;
}

.env-design .item-header .bg-img-fit1 {
  width: 100% !important;
  height: 538px !important;
  min-height: 538px !important;
  overflow: hidden;
  z-index: 1;
}

.env-design .item-header .bg-img-fit2 {
  width: 100% !important;
  overflow: hidden;
  z-index: 1;
}
</style>
