<template>
  <div class="slide-check-wrap">
    <!-- <p class="slide-text">向右滑动完成验证</p>
    <SlideToCheck @slideCallback="slideCallback"/>-->
    <div id="imgScode" />
  </div>
</template>

<script>
import { checkNeedImgCode, getMessageCode } from '@/api/login';
import { mapState, mapActions } from 'vuex';
import { sendEncryptRequest } from '@/utils/encrypt';
export default {
  name: 'SlideCheck',
  props: {
    mobile: {
      type: String,
      default: ''
    },

  },
  computed: {
    ...mapState('home', {
      imgCodeData: state => state.imgCodeData
    })
  },
  mounted() {
    console.log(this.imgCodeData);
    // const {slidingImage, backImage, yHeight} = this.imgCodeData;
    this.initImgCode(this.imgCodeData);
  },

  methods: {
    ...mapActions('home', ['setNeedTimer']),
    getImg(type) {
      const data = {
        mobile: this.mobile,
        jigsawVersion: 'v1'
      };
      sendEncryptRequest(data, params => {
        checkNeedImgCode(params).then(res => {
          this.initImgCode(res.data, type);
        });
      });
    },
    initImgCode(data, type) {
      const _this = this;
      $('#imgScode').imgcode({
            frontimg: 'data:image/png;base64,' + data.slidingImage,
            backimg: 'data:image/png;base64,' + data.backImage,
            yHeight:data.yHeight,
            refreshcallback: function () {
              // 刷新验证码
              _this.getImg(type);
            },
            closecallback: function () {
              // 关闭弹框
              _this.$emit('closeSlideCheckpageDialog');
            },
            callback: function (msg) {

              _this.getMsgCode(_this, msg, data, type);
            }
          });
    },
    refreshImg(type) {
      // const _this = this;
      const data = {
        mobile: this.mobile,
        jigsawVersion: 'v1'
      };
      sendEncryptRequest(data, params => {
        checkNeedImgCode(params).then(res => {
           // eslint-disable-next-line
           this.initImgCode(res.data, type);
          // $('#imgScode').imgcode({
          //   frontimg: 'data:image/png;base64,' + res.data.slidingImage,
          //   backimg: 'data:image/png;base64,' + res.data.backImage,
          //   yHeight: res.data.yHeight,
          //   refreshcallback: function () {
          //     // 刷新验证码
          //     _this.getImg(type);
          //   },
          //   closecallback: function () {
          //     // 关闭弹框
          //     _this.$emit('closeSlideCheckpageDialog');
          //   },
          //   callback: function (msg) {
          //     const $this = this;
          //     _this.getMsgCode($this, msg, res.data, type);
          //   }
          // });
        });
      });
    },
     // eslint-disable-next-line
    getMsgCode($this, msg, data, type) {
      const data1 = {
        mobile: this.mobile,
        flag: this.fromType, // 0登录（默认）1注册 2微信登录绑定手机 3修改手机 4重置密码
        capCode: data.capCode,
        xpos: msg.xpos,
        imageW: msg.imageW
      };
      sendEncryptRequest(data1, params => {
        getMessageCode(params).then(res => {
          if (res.code == '000000') {
            this.$emit('closeSlideCheckpageDialog');
            // 如果是从验证码页面进来,直接关闭页面,开始倒计时
            this.$emit('refreshGetMsg');
            this.setNeedTimer();
          } else {
            $this.getfail(res.message);
          }
        });
      });
      this.$sendBuriedData({
        component_tag: '905#905001'
      });
    }
  }
};
</script>

<style lang="scss">
.slide-check-wrap {
  width: auto;
  height: auto;
  margin: 0 auto;
  .slide-text {
    width: 100%;
    color: #373839;
    font-size: 20px;
    font-weight: 700;
    padding: 30px 0 20px;
  }
}
.code-k-div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(55, 56, 57, 0.6);
  z-index: 999;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
}
.icon-login-bg {
  background-image: url('~@/assets/images/loginicon.png');
  background-repeat: no-repeat;
}
.code-con {
  width: 330px;
  background-color: #fff;
  z-index: 1000;
  -moz-user-select: none;
  /* -webkit-user-select: none;
    align-self: flex-start;
    -webkit-align-self: flex-start; */
  /* margin-top: 30px; */
  border-radius: 6px;
}
.close-dialog {
  text-align: right;
}
.close-dialog-img {
  width: 25px;
  height: 25px;
  margin-right: 15px;
}
.code-img {
  margin: 5px auto;
  padding: 5px 0;
  width: 300px;
  background-color: #f5f6f7;
}
.code-back-img {
  width: 100%;
}
.code-img img {
  display: block;
}
.icon-w-25 {
  display: inline-block;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
}
.icon-push {
  background-position: 81% 75%;
}
.code-push {
  height: 25px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}
.code-btn {
  position: relative;
  height: 30px;
  text-align: center;
  color: #999;
  margin: 16px 10px 24px 10px;
  box-sizing: border-box;
  background-color: #f5f6f7;
  border-radius: 15px;
  border: 1px solid #e1e1e1;
}
.code-btn-m {
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #f5f6f7;
  border: 1px solid #e1e1e1;
  z-index: 5;
  top: -4px;
  left: 5px;
  box-shadow: 0 0 3px #ccc;
  cursor: pointer;
  background-position: 39.5% 50%;
}
.code-btn-img {
  background-image: url('~@/assets/images/arrow.png');
  background-repeat: no-repeat;
}
.code-btn-img.active {
  background-position: 82% 50%;
}
.code-span {
  display: block;
  height: 100%;
  font-size: 14px;
  line-height: 30px;
}
.code-btn-img.error {
  background-position: 6px 50%;
}
.code-img-con {
  position: relative;
}

.code-mask {
  width: 60px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.code-front-img {
  width: 100%;
}
.code-tip {
  padding-left: 10px;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
.code-tip-red {
  color: red;
}
.code-tip-green {
  color: green;
}
</style>
