<template>
    <div>
    <v-layout align-center row>
        <v-flex xs2>
            <v-icon @click="changeX('Y')" v-if="xcbx === 'N'" large>radio_button_unchecked</v-icon>
            <v-icon @click="changeX('N')" v-if="xcbx === 'Y'" large>highlight_off</v-icon>
        </v-flex>
        <v-flex xs10 class="v-label theme--light">{{xlabel}}</v-flex>
    </v-layout>
    </div>
</template>

<script>
module.exports = {
    props : ['xdatalabel','xdatacbx'],
    computed :{
        xcbx: {
            get() {
                return this.xdatacbx
            },
            set(val) {
                this.$emit('update-data-cbx', val)
            }
        },
        xlabel(){
            if (this.xdatalabel)
                return this.xdatalabel;

            return "";
        }
    },
    methods : {
        changeX(value){
            this.xcbx = value
            this.$emit('update-data-cbx', value)
            
        }
    }
}
</script>
