<template>
  <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 class="btn-div">
        <button class="btn_againquery" @click="scan()">再次查询</button>
      </div>
    </div>

    <div class="body">
      <div class="line"></div>
      <div class="top-msg">
        <span class="msg-top">
          尊敬的用户您好：
          <br />
        </span>
        <span class="msg-body">
          <br />您查询的数码为：
          <span class="msg-code" v-text="code"></span>
          <br />
          <span v-text="reply"></span>
        </span>
      </div>
      <div class="dv-br"></div>
      <div class="check-content">
        <!-- style="display:none" -->
        <div class="check-info">
          <span class="check-info-title">
            客户：
            <span class="check-info-value">{{info.EnterpriseNo}}</span>
          </span>
          <br />
          <span class="check-info-title">
            产品名称：
            <span class="check-info-value">{{info.ProductName}}</span>
          </span>
          <br />
          <span class="check-info-title">
            序列号：
            <span class="check-info-value">{{info.ProductNo}}</span>
          </span>
          <br />
          <span class="check-info-title">
            出库日期：
            <span class="check-info-value">{{info.CreateDate}}</span>
          </span>
          <br />
          <span class="check-info-title">
            质保日期：
            <span class="check-info-value">{{info.qcDate}}</span>
          </span>
          <br />
          <span class="check-info-title">
            质保期限：
            <span class="check-info-value">{{info.qctimelimit}} 年</span>
          </span>
        </div>

        <div class="check-back">
          <div class="check-msg">点击评价反馈，填写宝贵意见。</div>
          <div class="check-btn">
            <button class="btn-eva" @click="eval()">评价反馈</button>
          </div>
        </div>
      </div>
    </div>

    <div class="foot">
      <div class="foot-msg">
        <br />
        <div class="company">公司：{{enterpriseName}}</div>
        <div>网址：{{website}}</div>
        <div>地址：{{address}}</div>
        <div>布朗全国统一服务热线：{{phone}}</div>
        <br />
      </div>
    </div>

    <div class="navigation-bar">
      <div class="navigation-line"></div>
      <div class="navigation-div">
        <span class="navigation-btn" :class="{'click':btn=='1'}" @click="about()">关于布朗</span>
        <span class="navigation-btn" :class="{'click':btn=='2'}" @click="query()">追溯查询</span>
        <span class="navigation-btn" :class="{'click':btn=='3'}" @click="qcserveice()">质检服务</span>
      </div>
    </div>
  </div>
</template>

<script>
//import $ from "jquery";
// import apiHelper from "../assets/js/apiHelper.js";
import apiHelper from "@/assets/js/apiHelper.js";
import wx from "weixin-js-sdk";

export default {
  name: "StartCheck",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      btn:"2",
      code: " ",
      reply: "您查询的是布朗品牌销售的正宗产品，请放心使用！",
      customer: "124544154156",
      ProductModel: "2020-04-01 16:17",
      phone: "021-6278-8781",
      enterpriseName: "上海布朗商行有限公司",
      website: "http://www.arbrown.com.cn",
      address: "上海上海市长宁区长宁路1018号2014室",
      antifakeMsg:
        "尊敬的用户您好：      <br />您查询的数码为：125698565412365      <br />您查询的是布朗品牌销售的XXX产品，谢谢您的使用！",
      info: {
        EnterpriseNo: "",
        ProductNo: "",
        ProductName: "",
        CreateDate: "",
        ProductModel: "",
        qcDate: "",
        qctimelimit: ""
      }
    };
  },
  methods: {
    // 调试code= productno
    getArbrownTraceInfo(code) {
      var that = this;
      // code = that.sup8.codeInfo.Code;
      // that.info.code = code;
      var bindinfo = "";
      var productid = "";
      if (that.sup8.codeInfo.SegmentLogList.length > 0) {
        bindinfo = that.sup8.codeInfo.SegmentLogList[0].Bindinfo;
        productid = JSON.parse(bindinfo).ProductId;
      } else {
      }
      var channel = "";
      var decodestatus = "";
      apiHelper.getAntifakeInfo(
        that.sup8.context.eno,
        productid,
        that.sup8.codeInfo.Code,
        that.sup8.UA.geo.latitude + "," + that.sup8.UA.geo.longitude ||
          that.sup8.UA.ip.cip,
        decodestatus,
        that.sup8.codeInfo.LabelNo,
        that.sup8.context.skulogisticcode,
        function(res) {
          if (res.flag == true) {
          } else {
            that.reply = res.msg;
            $(".check-content").css("display", "none");
          }
        }
      );
    },
    getProductParams() {
      var that = this;
      apiHelper.getProductParams(
        that.sup8.context.eno,
        that.sup8.codeInfo.Code,
        "PRODUCT_NAME_196609|ReceiptReceiverName|ReceiptNO|RECEIPTDATE|receipt_f17|receipt_f16",
        function(res) {
          if (res.flag == true) {
            $.each(res.data, function(i, v) {
              switch (v.Key) {
                case "PRODUCT_NAME_196609":
                  that.info.ProductName = v.Value;
                  break;
                case "ReceiptReceiverName":
                  that.info.EnterpriseNo = v.Value;
                  break;
                case "ReceiptNO":
                  that.info.ProductNo = v.Value;
                  break;
                case "RECEIPTDATE":
                  that.info.CreateDate = v.Value;
                  break;
                case "receipt_f16":
                  that.info.qcDate = v.Value;
                  break;
                case "receipt_f17":
                  if (v.Value == "0.5") {
                    that.info.qctimelimit = "半";
                  } else {
                    that.info.qctimelimit = v.Value;
                  }
                  break;
                default:
                  break;
              }
            });
          }
          console.log("res", res);
        },
        function(error) {
          console.log("error", error);
        }
      );
    },
    // 评价反馈
    eval() {
      this.$parent.changeSelectedPage("Check_2");
    },
    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}/?${that.random(1)}${that.code}${that.random(6)}`;
      location.href = `${result}&channel=2&eno=${that.sup8.context.eno}&subscibe=0&scan=1&businesstype=7`;
    },
    about() {
      this.btn='1';
      this.$parent.changeSelectedPage("Check_7");
    },
    query() {
      this.btn='2';
      this.$parent.changeSelectedPage("Check_1");
    },
    qcserveice() {
       this.btn='3';
      this.$parent.changeSelectedPage("Check_3");
    }
  },
  watch: {},
  created: function() {
    var that = this;
  },

  mounted: function() {
    var that = this;
    that.code = that.sup8.codeInfo.Code;
    that.getArbrownTraceInfo(that.code);
    that.getProductParams();
  }
};
</script>

<style scoped>
.page {
  height: 100%;
}
.logo-header {
  margin-top: 5%;
  margin-left: 6%;
  background-color: #ffffff;
}
.logo-img {
  width: 30%;
  height: auto;
}
.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;
}
.btn-div {
  margin-left: 25%;
  float: right;
  margin-top: 2%;
}
.btn_againquery {
  font-weight: bold;
  font-size: 0.5rem;
  letter-spacing: 0.01rem;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  width: 4.1rem;
  height: 1.5rem;
  border: 0;
  color: white;
  background-color: #1d4c9d;
}
.line {
  background-color: #f9fafb;
  height: 1px;
}
.body {
  background: linear-gradient(#f9fafb, #ffffff);
}
.body .top-msg {
  margin-top: 5%;
  margin-left: 6%;
  max-width: 88%;
  box-sizing: border-box;
  width: 100%;
  height: 13.4%;
  min-height: 3rem;
  font-size: 0.9rem;
}
.top-msg .msg-top {
  margin-top: 5%;
  font-weight: bold;
  font-size: 0.9rem;
  letter-spacing: 0.08rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.msg-body {
  margin-top: 5%;
  font-size: 0.8rem;
  letter-spacing: 0.05rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.msg-body .msg-code {
  color: #864f29;
  font-weight: bold;
  font-size: 0.8rem;
  letter-spacing: 0.05rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.check-content {
  margin-top: 5%;
  margin-left: 6%;
  max-width: 88%;
}
.check-info {
  font-size: 0.8rem;
  letter-spacing: 0.05rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.check-info-title .check-info-value {
  font-weight: bold;
}
.check-back {
  margin-top: 20%;
}
.check-msg {
  font-size: 0.8rem;
  color: #1d4c9d;
}
.btn-eva {
  margin-top: 2%;
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  width: 7rem;
  height: 1.6rem;
  border: 0;
  color: white;
  background-color: #1d4c9d;
}
.foot {
  position: absolute;
  bottom: 4%;
  width: 100%;
  /* margin-top: 34.5%; */
  background-color: #fafbfd;
}
.foot-msg {
  margin-left: 6%;
  max-width: 88%;
  font-size: 0.6rem;
  letter-spacing: 0.01rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.foot-msg .company {
  font-weight: bold;
}
.navigation-bar {
  position: absolute;
  bottom: 0px;
  height: 4%;
  width: 100%;
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: gray;
}
.navigation-div {
  margin-top: 1%;
  margin-left: 5%;
  width: 95%;
  margin-right: 5%;
}
.navigation-btn {
  display: inline-block;
  width: 30%;
  text-align: center;
}
.navigation-line {
  background-color: #fafbfd;
  height: 1px;
}
.click{
  color: #864f29;
}
</style>
