<!-- 窜货查询组件-->
<template>
  <div class="container comp-crossregionsale">
    <div class="item-header">
      <img class="bg-img" :src="comp.props.bgImg.val">

      <div v-if="product.Name==''">
        <h2 class="row item-title">窜货查询</h2>
        <span class="row item-subtitle">通过商品标签的数码进行窜货查询</span>
      </div>

      <div v-else>
        <img class="row product-img" :src="product.ImgUrl">
        <span class="row product-name">{{product.Name||'-'}}</span>
        <span class="row enter-name">{{model.EnterpriseName}}</span>
      </div>

      <mt-field
        class="row item-input"
        v-model="code"
        type="number"
        placeholder="查询数码"
        :disableClear="true"
        @focus.native.capture="inputFocus()"
        @blur.native.capture="loseBlur()"
      >
        <img
          class="scan-img"
          src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/icon/scan01.png"
          height="36px"
          width="36px"
          @click="scan()"
        >
        <mt-button class="btn-query" type="primary" @click="query()">查询</mt-button>
      </mt-field>
    </div>

    <div class="item-info">
      <div class="left">
        <div class="title">{{model.ReceivingName||'末级经销商'}}</div>
        <div class="info">发货时间：{{model.SenderTime||'-'}}</div>
        <div class="info">营销区域：{{model.SellArea||'-'}}</div>
      </div>
      <div class="right">
        <div class="title">
          <img
            class="location"
            src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/icon/location.png"
          >当前所在地
        </div>
        <div class="info">{{location||'-'}}</div>
      </div>
    </div>

    <div v-show="hasResult" class="item-result">
      <div v-show="model.BugsellState===0" class="left">
        <img src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/icon/success.png">
        {{model.msg}}
      </div>
      <div v-show="model.BugsellState==1||model.BugsellState==2" class="left" style="color:#E43232">
        <img src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/icon/error.png">
        {{model.msg}}
      </div>
      <!-- 查询无结果 -->
      <div v-show="model.BugsellState==-1" class="no-result">
        <span>{{model.msg}}</span>
      </div>

      <!-- <div>{{model.ReceivingName}}销售的{{model.ProductName}}商品，在{{location}}地区，确认发生窜货</div> -->

      <div v-if="model.BugsellState==0||model.BugsellState==1" class="right" @click="mark()">窜货稽查</div>
      <div v-else-if="model.BugsellState==2" class="right">查看详情</div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import apiHelper from "../assets/js/apiHelper.js";
import { MessageBox } from "mint-ui";
import wx from "weixin-js-sdk";
import Cookie from '../assets/js/libs/js.cookie';
// import _ from 'lodash';
import { Indicator } from 'mint-ui';
import eventBus from "@/assets/js/eventBus.js";
export default {
  name: "CompCrossRegionSale",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      code: "",
      location: "",
      geo: undefined,
      hasResult: false, // 是否有查询结果，
      model: {
        flag: false, // 是否为正常销售
        BugsellState: -1,//0:正常，1:疑似窜货，2:稽查窜货，-1:其他情况
        msg: "",
        Code: "",
        SenderTime: "",
        SellArea: "",
        location: "",
        EnterpriseName: "",
        ProductId: ""
      },
      product: {
        Name: "",
        ImgUrl: ""
      }
    };
  },
  methods: {
    // 判断当前是否为登录状态
    checkLogin() {
      if(sessionStorage.getItem('loginInfo')){
        if(JSON.parse(sessionStorage.getItem('loginInfo')).isLogin){
          return true;
        }
      }
    },

    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;
    },
    // inputBlur() {
    //   if (!this.code) {
    //     this.code = this.model.Code;
    //   }
    // },
    query() {
      let reg = /^[0-9]\d*$/;
      if(reg.test(this.code)){
        if(this.code.length>16 || this.code.length<12){
          Toast("数码长度不正确");
          return;
        }
      }else{
        Toast("请输入正确的数码");
        return;
      }

      let that = this;
      let eno = this.sup8.context.eno;
      let code = this.code;
      let aCode = this.geo.adcode;
      // this.model.Code=code;
      that.hasResult = true;
      Indicator.open();
      apiHelper.crossQuery(code,eno,aCode, function(res) {
        Indicator.close();
        if(res.errorCode == "300103"){
          MessageBox("提示", "该数码已超出数码保管期");
        }
        if(res.flag&&res.data!==undefined){
          that.model = res.data;
          switch (that.model.BugsellState) {
            case 0:
              that.model.msg = "正确销售";
              break;
            case 1:
              that.model.msg = "疑似窜货";
              break;
            case 2:
              that.model.msg = "稽查窜货";
              break;
            default:
              that.model.msg = res.msg || "数码不正确";
          }

          // 获取产品信息
          if (that.model.ProductId && that.model.Code) {
            apiHelper.getProductInfo(
              that.model.Code,
              eno,
              "",
              that.model.ProductId,
              function(res1) {
                if(res1.flag&&res1.data!==undefined){
                  that.product = res1.data;
                }else{
                  that.product = {
                    Name: "",
                    ImgUrl: ""
                  };
                }
              }
            );
          }
        }else{
          that.model={
            flag: false, // 是否为正常销售
            BugsellState: -1,
            msg: res.msg,
            Code: that.code,
            SenderTime: "",
            SellArea: "",
            location: "",
            EnterpriseName: "",
            ProductId: ""
          };
          that.product = {
            Name: "",
            ImgUrl: ""
          };
        }
      },
      function(res){
        Indicator.close();
        that.model={
          flag: false, // 是否为正常销售
          BugsellState: -1,
          msg: "操作异常",
          Code: that.code,
          SenderTime: "",
          SellArea: "",
          location: "",
          EnterpriseName: "",
          ProductId: ""
        };
        that.product = {
          Name: "",
          ImgUrl: ""
        };
      }
      );
    },

    scan() {
      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 || res.errorCode == 300103) {
              that.sup8.$utils.updateContext(
                that.sup8.context,
                res.data
              );
            that.code = res.data.Code;
            that.query();
          } else {
            that.model={
              flag: false, // 是否为正常销售
              BugsellState: -1,
              msg: res.msg,
              Code: that.code,
              SenderTime: "",
              SellArea: "",
              location: "",
              EnterpriseName: "",
              ProductId: ""
            };
          }
        });
      }
      // let url = "http://localhost:8080/?10553588037007981AEBBE6";
      // let url = 'http://localhost:8080/?13335529714982955A2D3F2';
      //  cb(url);
      // return;


      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);
        }
      });
    },
    // 将数码标记为窜货
    mark() {
      let that = this;
      MessageBox.confirm("确定要将此数码标记为窜货?").then(action => {
        Indicator.open();
        apiHelper.crossConfirm(
          that.model.Code,
          that.sup8.context.eno,
          that.model.ProductId,
          that.geo.adcode,
          function(res) {
            Indicator.close();
            if(res.flag && res.data!==undefined){
              // MessageBox("提示", res.data);
              MessageBox("提示", `${that.model.ReceivingName}销售的${that.model.ProductName}商品，在${that.location}地区，确认发生窜货。`);
              that.model = Object.assign({}, that.model, { BugsellState: 2, msg: "稽查窜货" });
            }else{
              // MessageBox("提示", res.msg);
              MessageBox("提示", "当前操作发生异常");
            }
          },
          function(res){
            Indicator.close();
            MessageBox("提示", "当前操作发生异常");
          }
        );

      });
	},
	getGeo(){
		if (this.sup8.context.geo) {
			this.geo = this.sup8.context.geo.addressComponent;
			this.location = this.geo.province + this.geo.city + this.geo.district;
		}
		if (this.sup8.context.code) {
			this.code = this.sup8.context.code;
			this.query();
		}
	}
  },
  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:
          debugger
        // 判断用户是否登录  没登陆的跳转到登录页
        if (!this.checkLogin()) {
          let newPage = _.find(that.cfg.pages, { type: "6" });
          if (newPage) {
            that.$emit("changeData", {
              selectedPage: newPage
            });
          }
        }else{
			if (this.sup8.context.geo) {
				this.getGeo();
			} else {
				eventBus.subscribe("gpsDone", data => {
					this.getGeo();
				});
			}
			// if (this.sup8.context.geo) {
			// 	this.geo = this.sup8.context.geo.addressComponent;
			// 	this.location = this.geo.province + this.geo.city + this.geo.district;
			// }
			// if (this.sup8.context.code) {
			// 	this.code = this.sup8.context.code;
			// 	this.query();
			// }
        }
        break;
      default:
        break;
    }
  },
  mounted: function() {
    // console.log("CompCrossRegionSale:mounted:this.comp", this.comp);
    // var that = this;
  }
};
</script>

<style scoped>
.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: .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: .8rem;
  /* font-weight: bolder; */
}
.item-result .no-result img {
  width: 1.1rem;
  vertical-align: middle;
}
.item-result .no-result span {
  vertical-align: middle;
}
</style>
