<template>
    <view style="border-radius:5px;transition: all .5s;" :style="{width:pix+'px',height:pix+'px',border:'1px solid ' + color}">
        <view :style="{opacity: (count >= maxclk?0:1),background:color,marginTop:top+'px',marginLeft:left+'px'}" @tap="chkxw" style="transition: all .5s; width:20px;height:20px;border-radius: 10px;"></view>
    </view>
</template>

<script>
    //hidden: 加密正确答案，用户答案，验证码，手机号
    //选择验证方式
    //是否短信验证
    //答题验证，请求img图片及加密答案
    //图片验证，请求img图片及加密答案
    //滑动验证，请求img图片及加密目标位置
    //文字验证，请求img图片及加密文字位置
    //
    //短信验证码(上面验证后，才能申请发送)
    var app = getApp();
    export default {
        behaviors: ['uni://form-field-group']
        , props: {
            pix: {
                type: Number
                , default: 100
            }
            , maxclk: {
                type: Number
                , default: 3
            }
        , }
        , data() {
            return {
                count: -1
                , color: ''
                , top: 0
                , left: 0
            };
        }
        , mounted() {
            this.chkxw();
        }
        , methods: {
            chkxw(e) {
                this.count++;
                if (this.count >= this.maxclk) {
                    this.color = '#21c33c';
                }else{
                    this.color = '#cc0000';
                    this.top = parseInt(Math.random() * (this.pix - 20));
                    this.left = parseInt(Math.random() * (this.pix - 20));
                }
                if (!e)
                    return;
                this.$emit('change', {
                    ok: this.maxclk <= this.count
                    , top: this.top
                    , left: this.left
                    , detail: e.detail
                });
            }
			, init(){
				this.count = -1;
				this.chkxw();
			}
        }
    }
</script>

<style scoped>
</style>