<template>
  <div>
    <div class="big-box" id="BigBox"
     v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
      <img class="codeimg" :src="imgCodeUrl" alt="">
      <div class="click-box" @click="clickBox"></div>
    </div>
    <div class="wordList">
      请在上图依次点击:
      <i>{{wordList[0]}}</i>
      <i>{{wordList[1]}}</i>
      <i>{{wordList[2]}}</i>
      <span class="restcode" @click="getCodeImage">换一换</span>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  export default {
    data() {
      return {
        rndNum: '', //随机数
        imgCodeUrl: '', //图片地址
        cssCode: '', //验证码样式
        isSubmit: true, //提交开关
        zuobiaoNum: 0, //点击数
        zuobiaoArr: [], //坐标数组
        tempElement: [] ,//记录追加标签，删除时使用
        wordList: [] ,// 要选择的文字
        uuid: '',
        loading: true
      }
    },
    created() {
//       this.getCodeImage() //获取验证码
    },
    methods: {
      // 获取图片验证码
      getCodeImage() {
        this.zuobiaoNum = 0
        this.zuobiaoArr = []
        let BigBox = document.getElementById("BigBox");
        for (let i = 0; i < this.tempElement.length; i++) {
          BigBox.removeChild(this.tempElement[i]);
        }
        this.tempElement = []
        axios.get('api/portal/v1/captcha/clickWord',{ params:{_t: Date.parse(new Date()) / 1000} }).then(res =>{
          console.log(res);
          this.loading = false
          this.imgCodeUrl = "data:image/gif;base64," + res.data.data.dataVO.originalImageBase64
          this.wordList = res.data.data.dataVO.wordList
          this.uuid = res.data.data.uuid
        })
        this.rndNum = this.getRndNum()
      },
      //获取随机数,
      getRndNum() {
        return Math.random()
          .toString()
          .split('.')[1]
      },
      clickBox(event) {

        this.zuobiaoArr[this.zuobiaoNum] = event.offsetX + ',' + event.offsetY
        this.zuobiaoArr[this.zuobiaoNum] = { 'x':  parseInt(event.offsetX)-20, 'y': parseInt(event.offsetY)-20 }
        this.zuobiaoNum++

        let BigBox = document.getElementById("BigBox");
        let addSpan = document.createElement("span");
        addSpan.innerText = this.zuobiaoNum
        addSpan.setAttribute('style', 'left: ' + event.offsetX + 'px; top:' + event.offsetY + 'px;')

        BigBox.appendChild(addSpan)
        this.tempElement.push(addSpan)

        if (this.zuobiaoNum == 3) {
          let data = {
            uuid: this.uuid,
            verifyCode: '['
          }
          for (var i = 0; i < this.zuobiaoArr.length; i++) {
            data.verifyCode +=  "{'x':" + this.zuobiaoArr[i].x + ",'y':" + this.zuobiaoArr[i].y + "}"
          }
          data.verifyCode = data.verifyCode + ']'
          console.log(this.zuobiaoArr,data)
          this.$emit("login", data)
          data = qs.stringify(data)
        }
      }
    },
  }
</script>

<style lang="scss">
  .big-box {
    position: relative;
    width: 100%;
    height: 200px;
    background-size: 100% 100%;

    .codeimg{
      width: 100%;
      height: 100%;
    }

    .click-box {
      width: 100%;
      height: 200px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 92;
    }

    span {
      position: absolute;
      width: 40px;
      height: 40px;
      line-height: 40px;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      text-align: center;
      font-size: 20px;
      border-radius: 50%;
      z-index: 1;
      transform: translateX(-50%) translateY(-50%);
    }
  }
  .wordList{
    font-size: 18px;
    padding-top: 5px;
    i{
      padding: 0 8px;
      color: #018ad2;
    }
    .restcode{
      float: right;
      color: #018ad2;
      cursor: pointer;
    }
  }
</style>
