<template>
  <zj-img-verify
    ref="dialogopen"
    :w="catcha.w"
    :h="catcha.h"
    :blocky="catcha.blocky"
    :imgurl="catcha.imgurl"
    :miniimgurl="catcha.miniimgurl"
    :slider-text="catcha.text"
    @success="onSuccess"
    @refresh="onRefresh"
  />
</template>

<script>
import { getAdminUserVerifi } from '@/api/common.js'
export default {
  data() {
    return {
      catcha: {
        blocky: 0,
        imgurl: '',
        miniimgurl: '',
        text: '向右滑动完成拼图',
        h: 200,
        w: 300,
        unionKey: ''
      },
      value: {}
    }
  },
  mounted() {
    this.update()
  },
  methods: {
    update() {
      getAdminUserVerifi().then(res => {
        this.value = res.data
        this.catcha.blocky = res.data.yHeight
        this.catcha.imgurl = 'data:image/png;base64,' + res.data.bigImage
        this.catcha.miniimgurl = 'data:image/png;base64,' + res.data.smallImage
        this.catcha.unionKey = res.data.key
        this.$nextTick(() => {
          if (this.$refs.dialogopen) {
            this.$refs.dialogopen.reset(this.catcha.blocky)
          }
        })
      })
    },
    onSuccess(...p) {
      this.$emit('end', {
        long: p[0],
        success: this.$refs.dialogopen.handleSuccess,
        fail: this.$refs.dialogopen.handleFail,
        value: this.value
      })
    },
    onRefresh(...p) {
      this.update()
    }
  }
}
</script>

<style lang="scss" scoped></style>
