<template>
  <div :style="{ backgroundColor: comp.props.bgColor.val }">
    <div class="root" :style="style">
      <div v-if="comp.props.theme.val == 1">
        <strong>尊敬的用户您好：</strong>
        <br />
        <span v-if="antifakeInfo.Code"
          >您查询的数码为：{{ antifakeInfo.Code }}</span
        >
        <br />
        <div v-html="antifakeInfo.Content"></div>
      </div>
      <div v-if="comp.props.theme.val == 2" style="padding-top:1rem">
        <div v-html="antifakeInfo.Content"></div>
      </div>
    </div>
  </div>
</template>

<script>
// import $ from "jquery";
import apiHelper from "../assets/js/apiHelper.js";
import eventBus from "../assets/js/eventBus.js";
import _stringResource from "../assets/js/stringResource.js";
import define from "../assets/js/define.js";
import QRCode from "qrcodejs2";
import { Toast } from "mint-ui";

export default {
  name: "CompAntiFake01",
  props: ["comp", "cfg", "selectedPage", "sup88"],
  data() {
    return {
      style: {},
      title: "",
      code: "",
      showInput: false,
      antifakeInfo: {
        Code: "",
        Result: true,
        Content: "正在查询，请稍后..."
      },
      language: "ZH-CN",
      codeColor: {},
      logicColorList: [],
      fourQuadrantList: [],
      url: "",
      codeColorType: 0,
      afInfo: "" // 防伪信息缓存
    };
  },
  methods: {
    searchAntifake(codeInfo) {
      var that = this;

      // if (!codeInfo) {
      // } else
      {
        that.sup8.codeInfo = codeInfo;
        // 如果不是合法的防伪码，不查防伪
        // if (!codeInfo.Code) {
        //   return;
        // }

        that.antifakeInfo.Code = codeInfo.Code;

        // 表示查询的是不是一个新的产品
        var isNewProduct = that.sup8.codeInfo.ProductId !== codeInfo.ProductId;

        function next() {
          apiHelper.getAntifakeInfo(
            codeInfo.EnterpriseNo,
            codeInfo.ProductId,
            codeInfo.Code,
            that.sup8.context.channel,
            that.sup8.context.decodestatus,
            that.sup8.codeInfo.LabelNo,
            that.sup8.codeInfo.SkuLogisticCode,
            function(res) {
              if (res.flag === true && that.antifakeInfo.Result === true) {
                that.afInfo = res.data;
                // that.sup8.antifakeInfo = res.data;
                if (that.sup8.context.logiccolor) {
                  that.getLogicColorConvertInfo();
                } else {
                  that.antifakeInfo.Content = that.afInfo.Content.replace(
                    new RegExp("\\$logicColor\\$", "g"),
                    ""
                  ).replace(new RegExp("\\$fourQuadrant\\$", "g"), "");
                }
              } else {
                that.antifakeInfo = {
                  Result: true,
                  Content: res.msg || "未查询到该码的信息，谨防假冒"
                };
              }

              that.antifakeInfo.Code = codeInfo.Code;
            },
            function(res) {
              that.antifakeInfo = {
                Result: true,
                Content: res.msg || "未查询到该码的信息，谨防假冒"
              };
            },
            that.language
          );
        }

        if (this.sup8.context.geo) {
          next();
        } else {
          eventBus.subscribe("gpsDone", data => {
            next();
          });
        }
      }
    },
    render: function() {
      var that = this;
      switch (that.sup8.env) {
        case that.sup8._def.env.preview:
          break;
        case that.sup8._def.env.run:
          that.searchAntifake(that.sup8.codeInfo);
          break;
        default:
          break;
      }
    },
    initStyle() {
      var that = this;
      that.style = {};
      var CompHeader02 = _.find(that.selectedPage.components, {
        componentViewName: "CompHeader02"
      });

      var CompNavBar = _.find(that.selectedPage.components, {
        componentViewName: "CompNavBar"
      });

      that.style = {
        paddingTop: "0"
      };
      switch (that.sup8.env) {
        case that.sup8._def.env.design:
          break;
        case that.sup8._def.env.preview:
          if (CompHeader02) {
            that.style.paddingTop = "100px";
          }
          if (CompNavBar) {
            that.style.paddingBottom = "110px";
          }
          break;
        case that.sup8._def.env.run:
          if (CompHeader02) {
            that.style.paddingTop = "100px";
          }

          //   if (CompNavBar) {
          //     that.style.paddingBottom = "130px";
          //   }
          break;
      }
    },
    // 获取数码颜色
    getLogicColorConvertInfo() {
      let protocol = location.protocol.substring(
        0,
        location.protocol.length - 1
      );
      let domain = location.host;
      apiHelper.getLogicColorConvertInfo(
        this.sup8.context.eno,
        this.sup8.context.code,
        protocol,
        domain,
        this.sup8.context.logiccolor,
        res => {
          if (res.flag) {
            this.logicColorList = res.data.LogicColor;
            this.fourQuadrantList = res.data.FourQuadrant;
            this.url = res.data.Url;
            if (res.data.AntifakeType == 1) {
              this.codeColorType = 1;
              this.creatCodeColor();
            } else if (res.data.AntifakeType == 2) {
              this.codeColorType = 2;
              this.creatCodeColor();
              this.creatQuadrant();
            } else {
              this.antifakeInfo.Content = this.afInfo.Content.replace(
                new RegExp("\\$logicColor\\$", "g"),
                ""
              ).replace(new RegExp("\\$fourQuadrant\\$", "g"), "");
            }
          }
        },
        e => {}
      );
    },
    // 鉴码辩色
    creatCodeColor() {
      if (this.codeColorType == 1) {
        this.afInfo.Content = this.afInfo.Content.replace(
          new RegExp("\\$fourQuadrant\\$", "g"),
          ""
        );
      }
      if (this.afInfo.Content.indexOf("$logicColor$") == -1) {
        this.antifakeInfo.Content = this.afInfo.Content;
        return;
      }
      let html = "";
      let str = "";
      this.logicColorList.forEach(v => {
        let className = "";
        switch (v.Color) {
          case "红色":
            className = "num-red";
            break;
          case "蓝色":
            className = "num-blue";
            break;
          case "绿色":
            className = "num-green";
            break;
          case "黑色":
            className = "num-black";
            break;
          default:
            className = "num-black";
            break;
        }
        html += `<div class="code-item ${className}">
						<div class="num">${v.Num}</div>
						<div class="color">${this.codeColor[v.Color]}</div>
					</div>`;
      });
      str = '<div class="num-color cl">' + html + "</div>";
      if (this.codeColorType == 1) {
        this.antifakeInfo.Content = this.afInfo.Content.replace(
          new RegExp("\\$logicColor\\$", "g"),
          str
        );
      } else {
        this.afInfo.Content = this.afInfo.Content.replace(
          new RegExp("\\$logicColor\\$", "g"),
          str
        );
      }
    },
    // 四象限
    creatQuadrant() {
      if (this.afInfo.Content.indexOf("$fourQuadrant$") == -1) {
        this.antifakeInfo.Content = this.afInfo.Content;
        return;
      }
      let that = this;
      let html = "";
      let str = "";
      let index = 1;
      this.fourQuadrantList.forEach(v => {
        let className = "";
        switch (v.Color) {
          case "红色":
            className = "bg-red";
            break;
          case "蓝色":
            className = "bg-blue";
            break;
          case "绿色":
            className = "bg-green";
            break;
          case "黑色":
            className = "bg-black";
            break;
          default:
            className = "bg-black";
            break;
        }
        if (index == 2) {
          html = `<span class="${className}"></span>` + html;
        } else {
          html += `<span class="${className}"></span>`;
        }
        index = index + 1;
      });
      let timestr = new Date().getTime();
      str =
        '<div class="four-quadrant"><div class="qrcode-box">' +
        html +
        '<div class="qrcode" id="qrcode' +
        timestr +
        '"></div></div></div>';
      this.antifakeInfo.Content = this.afInfo.Content.replace(
        new RegExp("\\$fourQuadrant\\$", "g"),
        str
      );
      this.$nextTick(() => {
        let qrcode = new QRCode(document.getElementById("qrcode" + timestr), {
          text: that.url,
          width: 200,
          height: 200,
          colorDark: "transparent",
          colorLight: "#fff",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    },
    // 获取系统语言
    getOSlanguage() {
      let language = (
        navigator.browserLanguage || navigator.language
      ).toLowerCase();
      if (language.indexOf("zh") > -1) {
        // 中文
        this.language = "ZH-CN";
        this.codeColor = define.codeColor[this.language];
      } else if (language.indexOf("en") > -1) {
        // 英文
        this.language = "EN-US";
        this.codeColor = define.codeColor[this.language];
      } else if (language.indexOf("ja") > -1) {
        // 日文
        this.language = "JA-JP";
        this.codeColor = define.codeColor[this.language];
      } else if (language.indexOf("ko") > -1) {
        // 韩文
        this.language = "KO-KR";
        this.codeColor = define.codeColor[this.language];
      } else if (language.indexOf("fr") > -1) {
        // 法文
        this.language = "FR-FR";
        this.codeColor = define.codeColor[this.language];
      } else if (language.indexOf("de") > -1) {
        // 德文
        this.language = "DE-DE";
        this.codeColor = define.codeColor[this.language];
      } else if (language.indexOf("ru") > -1) {
        // 俄文
        this.language = "RU-RU";
        this.codeColor = define.codeColor[this.language];
      } else if (language.indexOf("ar") > -1) {
        // 阿拉伯文
        this.language = "AR-SA";
        this.codeColor = define.codeColor[this.language];
      } else if (language.indexOf("es") > -1) {
        // 西班牙文
        this.language = "ES-ES";
        this.codeColor = define.codeColor[this.language];
      } else if (language.indexOf("hi") > -1) {
        // 印度文
        this.language = "HI-IN";
        this.codeColor = define.codeColor[this.language];
      } else {
        this.language = "ZH-CN";
        this.codeColor = define.codeColor[this.language];
      }
    }
  },

  created: function() {
    var that = this;
    that.mergeCompProps(that.comp);
    that.getOSlanguage();
    switch (that.sup8.env) {
      case that.sup8._def.env.design:
        that.antifakeInfo = {
          Code: "xxxxxxxxxxxxxxx",
          Result: true,
          Content: "该商品已被查询1次，首次查询时间为2019-09-18，谨防假冒！"
        };
      case that.sup8._def.env.preview:
        that.antifakeInfo = {
          Code: "xxxxxxxxxxxxxxx",
          Result: true,
          Content: "该商品已被查询1次，首次查询时间为2019-09-18，谨防假冒！"
        };

        that.selectedPage =
          that.selectedPage ||
          _.find(that.cfg.pages, {
            type: that.sup8.context.ptype || "1"
          });

        break;
      case that.sup8._def.env.run:
        break;
      default:
        break;
    }

    that.initStyle();
  },

  mounted: function() {
    var that = this;
    if (that.sup8.antifakeInfo) {
      that.antifakeInfo = that.sup8.antifakeInfo;
    } else {
      that.render();
    }
  }
};
</script>

<style scoped>
.root {
  padding: 1em;
  color: #606060;
}
.root >>> .num-color {
  padding-top: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", SimSun, sans-serif;
  width: 100%;
}
.root >>> .num-color .code-item {
  float: left;
  width: 16.666%;
  text-align: center;
  font-size: 0.875rem;
  /* margin-bottom: 1rem; */
  font-weight: normal;
}
.root >>> .num-color .code-item .num {
  margin-bottom: 3px;
}
.root >>> .num-color .code-item .color {
  height: 2.4rem;
  word-wrap: break-word;
}
.root >>> .num-red {
  color: #ed0d8e;
}
.root >>> .num-blue {
  color: #38bbf1;
}
.root >>> .num-green {
  color: #12a957;
}
.root >>> .num-black {
  color: #221e20;
}
.root >>> .four-quadrant {
  padding: 0.9rem;
}
.root >>> .qrcode-box {
  margin: 0 auto;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.root >>> .qrcode-box span {
  float: left;
  width: 100px;
  height: 100px;
}
.root >>> .qrcode {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
}
.root >>> .bg-red {
  background-color: #ed0d8e;
}
.root >>> .bg-blue {
  background-color: #38bbf1;
}
.root >>> .bg-black {
  background-color: #221e20;
}
.root >>> .bg-green {
  background-color: #12a957;
}
</style>
