<!-- 扫描数码组件-->
<template>
  <div class="container comp-scancode">
    <div class="page">
      <div class="logo-header">
        <img
          class="logo-img"
          src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/logo.png"
        />
        <span class="logo-text">布朗商行</span>
      </div>
      <div class="body">
        <div>
          <img
            @click="scan()"
            class="repairscan-img"
            src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/repairscan.png"
          />
        </div>
        <div class="input-query">
          <div class="leftrim-div">
            <input v-model="code" class="item-input" type="code" placeholder="当不能扫码时请输入16位数码" />
            <button class="input-button" @click="query()">确定</button>
          </div>
        </div>
      </div>

      <div class="background">
        <img
          class="background-img"
          src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/scanlogo.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
// import $ from "jquery";
import apiHelper from "@/assets/js/apiHelper.js";
import wx from "weixin-js-sdk";
import { MessageBox } from "mint-ui";

export default {
  name: "ArbrownScanCode",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      code: "",
      flag: ""
    };
  },
  methods: {
    //产生随机数
    random(l) {
      let rand = "";
      for (let i = 0; i < l; i++) {
        let r = Math.floor(Math.random() * 10);
        rand += r;
      }
      return rand;
    },
    scan() {
      var that = this;
      // wx.scanQRCode({
      //   needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      //   scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      //   success: function(res) {
      //     var result = _.trim(res.resultStr); // 当needResult 为 1 时，扫码返回的结果
      //     if (!result) {
      //       that.sup8.$utils.sss("loadingFirst", 1);

      //       if (result.search("?") != -1) {
      //         var reses= result.split("?");
      //         result=reses[2].substring(1,17);
      //       }
      //     }
      //     console.log("scanresult", result);
      //     // 存储扫码结果
      //     sessionStorage.setItem("ScanResult", JSON.stringify(result));

      //     location.href = `${result}&channel=2&eno=${that.sup8.context.eno}&subscibe=0&scan=1&businesstype=7`;
      //   },
      //   fail: function(e) {
      //     console.log(JSON.stringify(e));
      //   }
      // });

      var result = "http://testh5.sup8.yesno.com.cn/?64948588551474982990883"; // 当needResult 为 1 时，扫码返回的结果
      debugger;
      if (!!result) {
        that.sup8.$utils.sss("loadingFirst", 1);
        if (result.search("/?/") != -1) {
          var reses = result.split("?");
          result = reses[1].substring(1,17);
        }
      }
      console.log("scanresult", result);
      // 存储扫码结果
      sessionStorage.setItem("ScanResult", JSON.stringify(result));
      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`;
    },
    query() {
      var that = this;
      // 访问Nodejs
      apiHelper.decode(
        that.code,
        that.sup8.context.eno,
        function(res) {
          if (res.flag) {
            // 存储数码
            debugger;
            sessionStorage.setItem("ArbrownCode", res.data.Code);
            console.log("this.sup8",this.sup8);
            // this.sup8.$utils.sss("loadingFirst", 1);
            let url = `${location.origin}/?${that.random(1)}${that.code}${that.random(6)}`;
            location.href = `${url}&channel=2&eno=${that.sup8.context.eno}&subscibe=0&scan=1&businesstype=7`;
          } else {
            MessageBox.alert(res.msg || "数码不存在", "提示");
          }
        },
        function(err) {
          console.log("err", JSON.stringify(err));
        }
      );
    }
  },

  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 {
} */

.page {
  height: 100%;
  width: 100%;
}
.logo-header {
  margin-left: 6%;
  background-color: #ffffff;
}
.body {
  background: linear-gradient(#f9fafb, #ffffff);
}
.logo-img {
  width: 30%;
  height: auto;
}
.repairscan-img {
  width: auto;
  height: auto;
  margin-left: 25%;
  margin-top: 30%;
  max-width: 50%;
}
.logo-text {
  vertical-align: super;
  margin-left: 3%;
  font-weight: bold;
  font-size: 0.8rem;
  letter-spacing: 0.01rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.input-query {
  width: 100%;
  margin-left: 4%;
}

.leftrim-div {
  margin-top: 30%;
  margin-left: 16%;
  width: 90%;
  left: 2%;
  float: left;
  border-left: 0.2rem solid #674129;
  border-radius: 0px;
}

.leftrim-div .item-input {
  float: left;
  height: 2rem;
  font-size: 0.6rem;
  border: 0.02rem solid gray;
  border-left: 0.2rem solid #9a613e;
  border-radius: 0px;
  max-width: 100%;
  width: 50%;
}
.input-button {
  width: 17%;
  height: 2.2rem;
  background-color: #1d4c9d;
  border: none;
  color: aliceblue;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 0.2rem;
  border-radius: 0px;
}
.item-input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  /* WebKit browsers 适配谷歌 */
  text-align: center;
  letter-spacing: 0.04rem;
}
.background {
  width: 100%;
  position: absolute;
  bottom: 0px;
}
.background .background-img {
  width: 100%;
}
</style>
