<!--
 * @Description: 滑块验证码对话框组件
 * @Author: laoliu
 * @Date: 2022-04-22 09:08:31
 * @LastEditTime: 2022-11-08 16:48:10
-->
<template>
    <el-dialog :visible.sync="visible" :width="(imgWidth + 40) + 'px'" title="滑动校验"
      :close-on-click-modal="false" @open="refreshImage" :before-close='handleCancel'
      append-to-body>
      <div class="pt-images-verification" :style="'width:' + imgWidth + 'px'">
        <pt-images-verification :vcodeImg="vcodeImg" :validateFunc="handleValidate" 
          @refresh="refreshImage" @success="handleSuccess" />
      </div>
    </el-dialog>
</template>

<script>
import slideBlockVcode from "./SlideBlockVcode.vue";

export default {
  name: 'SliderVcodeDialog',
  props: ["visible"],
  components: {
		'pt-images-verification': slideBlockVcode, 
	},

  data() {
    return {
      imgWidth: 460,
			vcodeImg: {},
      imgVcode: '',
    }
  },

  methods: {
    async refreshImage() {
      let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_GET_SLIDE_IMAGE_VCODE, this.imgWidth);
      await this.appAxios("GET", url).then(result => {
        if (result != null) {
          this.vcodeImg = result.data;
        }
      })
    },

    // 验证成功
		handleSuccess(){
      this.showSlideBlock = false;
      this.vcodeImg = {};
      this.$emit("close-dialog", true, this.imgVcode);
		},

    handleValidate(offsetX) {
      return new Promise((resolve, _reject) => {
        this.imgVcode = offsetX;
        let param = {vcode: offsetX};
        this.appAxios("GET", this.commonUrl.URL_VERIFY_SLIDE_IMAGE_VCODE, param).then(result => {
            if (result != null) {
                resolve(result.data ? "success": null);
            }
          })
			});
    },

    handleCancel() {
      this.$emit("close-dialog", false);
    }
  },
}
</script>

<style scoped>
.pt-images-verification {
	margin: -20px 0 -15px 0;
}
</style>