<template>
<div class="captcha-box">
    <div class="captcha-box-header">
        <span>请将下列图片点击翻转至正确方向</span>
        <a href="javascript:;" class="img-check-refresh" @click="captchaRefresh">换一批</a>
    </div>
    <div class="captcha-box-content">
        <div class="item" 
            v-for="block in blocks" 
            :key="block.posX"
            :style="{
                'background-image': `url(${imgSrc})`,
                'background-position': `${block.posX}px ${block.posY}px`
            }"
            @click="captchaClick(block)"></div>
    </div>
</div>
</template>
<script>
import _ from 'lodash';

export default {
    name: 'captcha-box',
    data() {
        return {
            captchaSrc: '/Api/captcha.jpg',
            random: Math.random(),
            blocks: []
        };
    },
    created() {
        this.blocks = [{
            val: 0,
            posX: 0,
            posY: 0
        }, {
            val: 0,
            posX: -60,
            posY: 0
        }, {
            val: 0,
            posX: -120,
            posY: 0
        }, {
            val: 0,
            posX: -180,
            posY: 0
        }];
    },
    computed: {
        imgSrc() {
            return `${this.captchaSrc}?r=${this.random}`;
        }
    },
    methods: {
        captchaClick(block) {
            block.val = (block.val + 1) % 4;
            block.posY = (block.posY - 60) % 240;
            let vals = _.map(this.blocks, b => {
                return b.val;
            });

            this.$emit('change', vals);
        },
        captchaRefresh() {
            this.random = Math.random();
        }
    }
};
</script>
<style lang="scss">
.captcha-box {
    margin: 0 auto;
    width: 270px;
}

.captcha-box-header {
    color: #b0b0b0;

    a {
        color: #ff1901;
        float: right;
    }
}

.captcha-box-content {
    display: flex;

    .item {
        flex: auto;
        cursor: pointer;
        margin-right: 10px;
        width: 60px;
        height: 60px;
        overflow: hidden;
        border: solid 1px #ccc;
        background-size: 240px;

        &:last-child {
            margin-right: 0;
        }
    }
}
</style>