<template>
  <div class="container comp-crossregionsale">
    <div data-v-7d3a2eac class="item-header">
      <img
        data-v-7d3a2eac
        src="http://image.supercarrier8.com/h5_template/1006/bg01.png"
        class="bg-img"
      />
      <div data-v-7d3a2eac>
        <h2 data-v-7d3a2eac class="row item-title">追溯查询</h2>
        <span data-v-7d3a2eac class="row item-subtitle">通过商品标签的数码进行追溯查询</span>
      </div>
      <a data-v-7d3a2eac class="mint-cell mint-field row item-input is-nolabel">
        <div class="mint-cell-left"></div>
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
            <span class="mint-cell-text"></span>
          </div>
          <div class="mint-cell-value">
            <mt-field
              placeholder="请输入追溯码"
              number="true"
              type="number"
              v-model="code"
              class="mint-field-core"
              :disableClear="true"
              @focus.native.capture="inputFocus()"
              @blur.native.capture="loseBlur()"
              :attr="{ oninput: 'if(value.length>50)value=value.slice(0,50)' }"
            />
            <span class="mint-field-state is-default">
              <i class="mintui mintui-field-default"></i>
            </span>
            <div class="mint-field-other">
              <img
                data-v-7d3a2eac
                src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/icon/scan01.png"
                height="36px"
                width="36px"
                class="scan-img"
                @click="btnScan"
              />
              <button
                data-v-7d3a2eac
                class="mint-button btn-query mint-button--primary mint-button--normal"
                @click="btnQuery"
              >
                <label class="mint-button-text">查询</label>
              </button>
            </div>
          </div>
        </div>
        <div class="mint-cell-right"></div>
      </a>
    </div>

    <div style="margin:auto;width:90%">
      <div class="item" v-if="isShowProduct=='1'">
        <div class="title">
          <img :src="img1" class="imgs" />产品信息
        </div>
        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">产品代码</span>
          <span class="item-span2">{{model.ProductModel}}</span>
        </div>
        <div class="content" style>
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">产品描述</span>
          <span class="item-span2">{{model.ProductName}}</span>
        </div>

        <div style="clear:both"></div>
      </div>
      <div class="item" v-if="isShowProduction=='1'">
        <div class="title">
          <img :src="img1" class="imgs" />
          生产信息
        </div>
        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">生产单号</span>
          <span class="item-span2">{{model.WorkorderNo}}</span>
        </div>
        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">生产批次</span>
          <span class="item-span2">{{model.WorkorderBatchno}}</span>
        </div>
        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">生产日期</span>
          <span class="item-span2">{{model.WorkorderProductionDate}}</span>
        </div>
        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">工厂名称</span>
          <span class="item-span2">{{model.FactoryName}}</span>
        </div>
      </div>
      <div class="item" v-if="isShowIn=='1'">
        <div class="title">
          <img :src="img1" class="imgs" />
          入库信息
        </div>
        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">入库单号</span>
          <span class="item-span2">{{model.InReceiptNO}}</span>
        </div>
        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">入库日期</span>
          <span class="item-span2">{{model.InCREATEDATE}}</span>
        </div>
        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">入库仓库</span>
          <span class="item-span2">{{model.InReceiptReceiverName}}</span>
        </div>
      </div>
      <div class="item" v-if="isShowOut=='1'">
        <div class="title">
          <img :src="img1" class="imgs" />
          出库信息
        </div>
        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">出库单号</span>
          <span class="item-span2">{{model.ReceiptNO}}</span>
        </div>

        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">客户代码</span>
          <span class="item-span2">{{model.ReceiptReceiverNo}}</span>
        </div>

        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">客户名称</span>
          <span class="item-span2">{{model.ReceiptReceiverName}}</span>
        </div>
        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">客户地址</span>
          <span class="item-span2">{{model.ReceiptAddress}}</span>
        </div>

        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">出库时间</span>
          <span class="item-span2">{{model.ReceiptCREATEDATE}}</span>
        </div>

        <div class="content">
          <img :src="img2" class="imgs" style="float:left" />
          <span class="item-span1">发货单位</span>
          <span class="item-span2">{{model.ReceiptSenderName}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import $ from "jquery";
import Vue from "vue";
import apiHelper from "../../assets/js/apiHelper";
import _appConf from "../../app.conf";
import eventBus from "../../assets/js/eventBus.js";
import _stringResource from "../../assets/js/stringResource.js";
import { Toast } from "mint-ui";
import wx from "weixin-js-sdk";
import "element-ui/lib/theme-chalk/index.css";
//import ElementUI, { MessageBox } from "element-ui";
import ElementUI from "element-ui";
import { MessageBox } from "mint-ui";
Vue.use(ElementUI);

export default {
  name: "RetrospectiveQuery",
  props: ["comp", "cfg", "selectedPage", "sup88"],
  data() {
    return {
      img1: "http://image.supercarrier8.com/h5_template/1003/icon009.png",
      img2: "http://image.supercarrier8.com/h5_template/1003/icon002.png",
      code: "",
      memberType: "",
      openid: "",
      decodeVer: "",
      isShowProduct: "0",
      isShowProduction: "0",
      isShowIn: "0",
      isShowOut: "0",
      httpPrefix: "",
      model: {
        ProductModel: "", //12NC
        ProductName: "", //商品名称
        WorkorderNo: "", //生产单号
        WorkorderBatchno: "", //生产批次
        WorkorderProductionDate: "", //生产日期
        FactoryName: "", //工厂名称
        RECEIPT_NO: "", //入库单号
        InReceiptNO: "", //入库单号
        InCREATEDATE: "", //入库创建时间
        InReceiptReceiverName: "", //收货单位
        ReceiptNO: "", //出库单号
        ReceiptCREATEDATE: "", //出库创建时间
        ReceiptSenderName: "", //发货单位

        ReceiptAddress: "", //客户地址
        ReceiptReceiverNo: "", //客户代码
        ReceiptReceiverName: "" //客户名称
      }
    };
  },
  methods: {
    btnQuery: function() {
      if (!this.code) {
        Toast("请输入数码");
        return;
      }
      this.Decode(false, this.code, this.code);
    },
    btnScan: function() {
      console.log("扫一扫");
      let that = this;
      //cb("020914803397");//中商一级码
      //cb("http://testh5.sup8.yesno.com.cn/?6020902010012634374466103BD9730"); //中商二级码 带链接
      //cb("020902010012634374466103");//中商二级码 不带链接
      //cb("http://him56.com/Signify56/680191001685"); //外码 带链接 12位
      //cb("http://him56.com/Signify56/123456789012345678"); //外码 带链接 12位
      //cb("680191001685"); //外码 不带链接
      //cb("123456789012345678");//不带链接外码  18位
      //cb("http://him56.com/Signify56/123456789012345678901234"); //外码 带链接 24位
      //cb("1234567890"); //不带链接外码  10位
      //http://him56.com/Signify56/
      //cb("http://testh5.sup8.yesno.com.cn/?602091405146425B2C1");
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function(res) {
          let url = _.trim(res.resultStr); // 当needResult 为 1 时，扫码返回的结果
          cb(url);
        },
        error: function(e) {
          console.log(e);
        }
      });
      function cb(url) {
        var isNeedDecode = true;
        if (
          url.indexOf("http") == -1 ||
          url.indexOf(that.sup8._appConf.baseConfig.publicPath) == -1
        ) {
          isNeedDecode = false;
        }
        if (!isNeedDecode) {
          that.code = url
            .split("/")
            [url.split("/").length - 1].replace("?", "");
          that.Decode(true, that.code, url);
        } else {
          apiHelper.decodeUrl(url, that.sup8.context.eno, function(res) {
            if (res.flag || res.errorCode == 300103) {
              that.code = res.data.Code;
              that.Decode(true, that.code, url);
            } else {
              that.model = {
                ProductModel: "",
                ProductName: "",
                WorkorderNo: "",
                WorkorderBatchno: "",
                WorkorderProductionDate: "",
                FactoryName: "",
                RECEIPT_NO: "",
                InReceiptNO: "",
                InCREATEDATE: "",
                InReceiptReceiverName: "",
                ReceiptNO: "",
                ReceiptCREATEDATE: "",
                ReceiptSenderName: ""
              };
              Toast("未查询到信息");
            }
          });
        }
      }
    },
    Decode: function(isScan, code, url) {
      var that = this;
      if (code) {
        that.model = {
          ProductModel: "",
          ProductName: "",
          WorkorderNo: "",
          WorkorderBatchno: "",
          WorkorderProductionDate: "",
          FactoryName: "",
          RECEIPT_NO: "",
          InReceiptNO: "",
          InCREATEDATE: "",
          InReceiptReceiverName: "",
          ReceiptNO: "",
          ReceiptCREATEDATE: "",
          ReceiptSenderName: ""
        };

        var getconfig = function() {
          that.$layerLite.loading.open();

          apiHelper.getProductParamsByConfig_xnf(
            that.sup8.context.eno,
            code,
            "ProductModel|ProductName|WorkorderNo|WorkorderBatchno|WorkorderProductionDate|FactoryName|RECEIPT_NO|131073_ReceiptNO|131073_CREATEDATE|131073_ReceiptReceiverName|ReceiptNO|ReceiptCREATEDATE|ReceiptSenderName|ReceiptAddress|ReceiptReceiverNo|ReceiptReceiverName",
            that.decodeVer,
            function(res) {
              that.$layerLite.loading.close();

              that.decodeVer = "";
              if (res && res.flag && res.data) {
                if (res.data.length <= 0) {
                  Toast("未查询到信息");
                } else {
                  _.forEach(res.data, function(item) {
                    that.model[item.Key.replace("131073_", "In")] = item.Value;
                  });
                }
              }
            }
          );
        };
        that.getDecodeVer(url);
        if (code.length == 12 && that.decodeVer == "-100") {
          MessageBox.confirm('请问您手上的标签左上角是否有"揭"字？', {
            confirmButtonText: "是",
            cancelButtonText: "否"
          })
            .then(action => {
              //有揭是中商的码，否则外码
              that.getDecodeVer(code, "0");
              getconfig();
            })
            .catch(err => {
              if (err == "cancel") {
                that.getDecodeVer(code, "xnf_versions_02");
                getconfig();
              }
            });
        } else {
          that.getDecodeVer(code, that.decodeVer);
          getconfig();
        }
      }
    },
    RoleView: function() {
      this.isShowProduct = 0;
      this.isShowProduction = 0;
      this.isShowIn = 0;
      this.isShowOut = 0;

      // 0 消费者
      // 1 店员
      // 2 店长
      // 3 经销商负责人
      // 4 经销商业务员
      // 5 企业业务员
      if (this.memberType == 0) {
        this.isShowProduct = 1;

        // this.isShowProduct = 1;
        // this.isShowProduction = 1;
        // this.isShowIn = 1;
        // this.isShowOut = 1;
      } else if (this.memberType == 1) {
        this.isShowIn = 1;
        this.isShowOut = 1;
      } else if (this.memberType == 2) {
        this.isShowIn = 1;
        this.isShowOut = 1;
      } else if (this.memberType == 3) {
        this.isShowIn = 1;
        this.isShowOut = 1;
      } else if (this.memberType == 4) {
        this.isShowIn = 1;
        this.isShowOut = 1;
      } else if (this.memberType == 5) {
        this.isShowProduct = 1;
        this.isShowProduction = 1;
        this.isShowIn = 1;
        this.isShowOut = 1;
      }
    },
    getOpenId: function() {
      if (sessionStorage.wxUser) {
        this.sup8.context.wxUser = JSON.parse(sessionStorage.wxUser);
      } else if (this.sup8.urlparams.userInfo) {
        let wxUser = JSON.parse(this.sup8.urlparams.userInfo);
        sessionStorage.setItem("wxUser", JSON.stringify(wxUser));
        this.sup8.context.wxUser = wxUser;
      } else {
        let url = location.href;
        url = encodeURIComponent(url);
        let eno = this.sup8.context.eno;
        let scopeType = "snsapi_base";
        //location.href = `http://ccn-mit.imwork.net/OAuth/GetOAuth?enterpriseNo=${eno}&scopeType=${scopeType}&redirectUrl=${url}`;
        location.href = `${this.sup8._appConf.baseConfig.wechat}/OAuth/GetOAuth?enterpriseNo=${eno}&scopeType=${scopeType}&redirectUrl=${url}`;
      }
      console.log(this.sup8.context.wxUser.openid);
      if (!this.openid) {
        this.openid = this.sup8.context.wxUser.openid;
      }
    },
    getMemberType: function(openid) {
      var that = this;
      apiHelper.getUserMemberType(
        this.openid,
        this.sup8.context.eno,
        function(res) {
          that.memberType = res.data.MemberType;
          that.RoleView();
        },
        function(res) {
          debugger;
        }
      );
    },
    inputFocus() {
      if (event.target.tagName === "INPUT") {
        this.code = "";
      }
    },
    // 解决ios12.1，微信6.7.4按钮焦点上移问题
    loseBlur() {
      let top = document.body.scrollTop;
      if (top != 0) {
        top = top - 1;
      }
      document.body.scrollTop = top;
    },
    getDecodeVer(url, ver) {
      var that = this;
      if (ver) {
        that.decodeVer = ver;
        return;
      }

      if (url.indexOf("http") == -1 && that.code.length == 12) {
        that.decodeVer = "-100";
        return;
      }

      //带中商链接的 || 不带链接24位的 为中商的码
      if (
        url.indexOf(that.sup8._appConf.baseConfig.publicPath) != -1 ||
        (url.indexOf("http") == -1 && that.code.length == 24)
      ) {
        that.decodeVer = "0";
      }
      //18位的 为越海的码
      else if (that.code.length == 18) {
        that.decodeVer = "xnf_versions_01";
      }
      //带链接并且数码是10,16,20,12位的 || 不带链接，数码是10,16,20,12位的 为宝供的码
      else if (
        (url.indexOf("http") != -1 &&
          (that.code.length == 10 ||
            that.code.length == 12 ||
            that.code.length == 16 ||
            that.code.length == 20)) ||
        (url.indexOf("http") == -1 &&
          (that.code.length == 10 ||
            that.code.length == 16 ||
            that.code.length == 20 ||
            that.code.length == 12))
      ) {
        that.decodeVer = "xnf_versions_02";
      } else {
        that.decodeVer = "0";
      }
    }
  },
  created: function() {
    this.getOpenId();
    if (this.openid) {
      this.getMemberType(this.openid);
    }
    //this.code = this.sup8.context.code;
    // this.memberType = this.sup8.memberType.MemberType;
    // var wxUser = sessionStorage.getItem("wxUser");
    // this.openid = JSON.parse(wxUser).openid;
  },

  mounted: function() {
    this.RoleView();
  }
};
</script>

<style scoped>
.title {
  padding-top: 5px;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 8px;
  border-bottom: 1px solid #dcdfe6;
}
.content {
  padding: 8px 3px;
  font-size: 14px;
  border-bottom: 1px solid #dcdfe6;
  font-weight: bold;
  overflow: hidden;
}
.imgs {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  padding-right: 4px;
  margin-bottom: 4px;
  padding-top: 2px;
}

.item-header {
  position: relative;
  color: white;
}

.item-header .bg-img {
  height: 100% !important;
  width: 100% !important;
  min-height: 200px;
  z-index: 1;
}

.item-header .row {
  position: absolute;
  z-index: 2;
}

.item-header .item-title {
  top: 16%;
  left: 8%;
  font-weight: normal;
}

.item-header .item-subtitle {
  top: 42%;
  left: 8%;
}

.item-header .product-img {
  top: 30%;
  left: 8%;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}

.item-header .product-name {
  top: 35%;
  left: 30%;
}

.item-header .enter-name {
  top: 45%;
  left: 30%;
  font-size: 0.8rem;
}

.item-header .item-input {
  border-radius: 4px;
  left: 12px;
  right: 12px;
  bottom: 12px;
}
.item-header .item-input .scan-img {
  vertical-align: top;
}
.item-info {
  background-color: white;
  margin: 10px;
  padding: 10px;
  position: relative;
  font-size: 0.9rem;
}
.item-info .info {
  font-size: 0.8rem;
}
.item-info .left {
  /* position: absolute;
  top: 0; */
  display: inline-block;
  width: 60%;
  border-right: 1px solid gainsboro;
  height: 4rem;
}

.item-info .right {
  position: absolute;
  top: 5px;
  display: inline-block;
  width: 32%;
  padding-left: 10px;
  height: 4rem;
}

.item-info .title {
  color: #4c6dba;
  /* font-size: 1rem; */
  margin-top: 5px;
  margin-bottom: 7px;
}

.item-info .location {
  width: 1.1rem;
  height: 1.1rem;
  position: relative;
  top: 3px;
  left: -3px;
}

.item-result {
  background-color: white;
  margin: 10px;
  padding: 10px;
}

.item-result .left {
  display: inline-block;
  width: 60%;
  text-align: center;
  color: #34ad4d;
  font-size: 1.3rem;
  font-weight: bolder;
}

.item-result .right {
  display: inline-block;
  width: 26%;
  background-color: #e0912c;
  border-radius: 4px;
  color: white;
  padding: 1rem;
  text-align: center;
}

.item-result .left img {
  width: 1.8rem;
  position: relative;
  top: 0.4rem;
  left: -0.4rem;
}
.item-result .no-result {
  padding: 10px 0;
  text-align: center;
  color: #e43232;
  font-size: 0.8rem;
  /* font-weight: bolder; */
}
.item-result .no-result img {
  width: 1.1rem;
  vertical-align: middle;
}
.item-result .no-result span {
  vertical-align: middle;
}

.item-span2 {
  color: #606266;
  display: block;
  width: 70%;
  float: left;
  line-height: 1.4rem;
  margin-left: 7px;
}

.item-span1 {
  float: left;
  line-height: 1.4rem;
}
</style>
 
