'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _sfc_main = {
  name: "dragVerify",
  props: {
    isPassing: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 250
    },
    height: {
      type: Number,
      default: 40
    },
    text: {
      type: String,
      default: "swiping to the right side"
    },
    successText: {
      type: String,
      default: "success"
    },
    background: {
      type: String,
      default: "#eee"
    },
    progressBarBg: {
      type: String,
      default: "#76c61d"
    },
    completedBg: {
      type: String,
      default: "#76c61d"
    },
    circle: {
      type: Boolean,
      default: false
    },
    radius: {
      type: String,
      default: "4px"
    },
    handlerIcon: {
      type: String
    },
    successIcon: {
      type: String
    },
    handlerBg: {
      type: String,
      default: "#fff"
    },
    textSize: {
      type: String,
      default: "14px"
    },
    textColor: {
      type: String,
      default: "#333"
    },
    imgsrc: {
      type: String
    },
    showTips: {
      type: Boolean,
      default: true
    },
    successTip: {
      type: String,
      default: "\u9A8C\u8BC1\u901A\u8FC7"
    },
    failTip: {
      type: String,
      default: "\u9A8C\u8BC1\u5931\u8D25"
    },
    diffDegree: {
      type: Number,
      default: 10
    },
    minDegree: {
      type: Number,
      default: 90
    },
    maxDegree: {
      type: Number,
      default: 270
    }
  },
  mounted: function() {
    const dragEl = this.$refs.dragVerify;
    dragEl.style.setProperty("--textColor", this.textColor);
    dragEl.style.setProperty("--width", Math.floor(this.width / 2) + "px");
    dragEl.style.setProperty("--pwidth", -Math.floor(this.width / 2) + "px");
  },
  computed: {
    handlerStyle: function() {
      return {
        width: this.height + "px",
        height: this.height + "px",
        background: this.handlerBg
      };
    },
    message: function() {
      return this.isPassing ? "" : this.text;
    },
    successMessage: function() {
      return this.isPassing ? this.successText : "";
    },
    dragVerifyStyle: function() {
      return {
        width: this.width + "px",
        height: this.height + "px",
        lineHeight: this.height + "px",
        marginTop: "20px",
        background: this.background,
        borderRadius: this.circle ? this.height / 2 + "px" : this.radius
      };
    },
    dragVerifyImgStyle: function() {
      return {
        width: this.width + "px",
        height: this.width + "px",
        position: "relative",
        overflow: "hidden",
        "border-radius": "50%"
      };
    },
    progressBarStyle: function() {
      return {
        background: this.progressBarBg,
        height: this.height + "px",
        borderRadius: this.circle ? this.height / 2 + "px 0 0 " + this.height / 2 + "px" : this.radius
      };
    },
    textStyle: function() {
      return {
        height: this.height + "px",
        width: this.width + "px",
        fontSize: this.textSize
      };
    },
    factor: function() {
      if (this.minDegree == this.maxDegree) {
        return Math.floor(1 + Math.random() * 6) / 10 + 1;
      }
      return 1;
    }
  },
  data() {
    return {
      isMoving: false,
      x: 0,
      isOk: false,
      showBar: false,
      showErrorTip: false,
      ranRotate: 0,
      cRotate: 0,
      imgStyle: {}
    };
  },
  methods: {
    checkimgLoaded: function() {
      var minDegree = this.minDegree;
      var maxDegree = this.maxDegree;
      var ranRotate = Math.floor(minDegree + Math.random() * (maxDegree - minDegree));
      this.ranRotate = ranRotate;
      this.imgStyle = {
        transform: `rotateZ(${ranRotate}deg)`
      };
    },
    dragStart: function(e) {
      if (!this.isPassing) {
        this.isMoving = true;
        this.x = e.pageX || e.touches[0].pageX;
      }
      this.showBar = true;
      this.showErrorTip = false;
      this.$emit("handlerMove");
    },
    dragMoving: function(e) {
      if (this.isMoving && !this.isPassing) {
        var _x = (e.pageX || e.touches[0].pageX) - this.x;
        var handler = this.$refs.handler;
        handler.style.left = _x + "px";
        var progressBar = this.$refs.progressBar;
        progressBar.style.width = _x + this.height / 2 + "px";
        var cRotate = Math.ceil(_x / (this.width - this.height) * this.maxDegree * this.factor);
        this.cRotate = cRotate;
        var rotate = this.ranRotate - cRotate;
        this.imgStyle = {
          transform: `rotateZ(${rotate}deg)`
        };
      }
    },
    dragFinish: function(e) {
      if (this.isMoving && !this.isPassing) {
        if (Math.abs(this.ranRotate - this.cRotate) > this.diffDegree) {
          this.isOk = true;
          this.imgStyle = {
            transform: `rotateZ(${this.ranRotate}deg)`
          };
          var that = this;
          setTimeout(function() {
            var handler = that.$refs.handler;
            var progressBar = that.$refs.progressBar;
            handler.style.left = "0";
            progressBar.style.width = "0";
            that.isOk = false;
          }, 500);
          this.showErrorTip = true;
          this.$emit("passfail");
        } else {
          this.passVerify();
        }
        this.isMoving = false;
      }
    },
    passVerify: function() {
      this.$emit("update:isPassing", true);
      this.isMoving = false;
      var handler = this.$refs.handler;
      handler.children[0].className = this.successIcon;
      this.$refs.progressBar.style.background = this.completedBg;
      this.$refs.message.style["-webkit-text-fill-color"] = "unset";
      this.$refs.message.style.animation = "slidetounlock2 3s infinite";
      this.$refs.progressBar.style.color = "#fff";
      this.$refs.progressBar.style.fontSize = this.textSize;
      this.$emit("passcallback");
    },
    reset: function() {
      this.reImg();
      this.checkimgLoaded();
    },
    reImg: function() {
      this.$emit("update:isPassing", false);
      const oriData = this.$options.data();
      for (const key in oriData) {
        if (Object.prototype.hasOwnProperty.call(oriData, key)) {
          this[key] = oriData[key];
        }
      }
      var handler = this.$refs.handler;
      var message = this.$refs.message;
      handler.style.left = "0";
      this.$refs.progressBar.style.width = "0";
      handler.children[0].className = this.handlerIcon;
      message.style["-webkit-text-fill-color"] = "transparent";
      message.style.animation = "slidetounlock 3s infinite";
      message.style.color = this.background;
    },
    refreshimg: function() {
      this.$emit("refresh");
    }
  },
  watch: {
    imgsrc: {
      immediate: false,
      handler: function() {
        this.reImg();
      }
    }
  }
};

exports.default = _sfc_main;
