<template>
    <div>
        <bt-messages id="app1"/>
        <h3>Switch Test</h3>
        <div class="grids">
            <div class="row">
                <div class="cell c20">Switch Normal -- {{sw1}}</div>
                <div class="cell c20"><bt-switch id="sw1" v-model="sw1" showlabel/></div>
                <div class="cell c60">
                    <button @click="toggleSw('enable')">Enable</button>
                    <button @click="toggleSw('disable')">Disable</button>
                </div>
            </div>
            <div class="row">
                <div class="cell c20">Switch Disabled</div>
                <div class="cell c20"><bt-switch id="sw2" v-model="sw2" texton="Switched On" textoff="Switched Off" showlabel disabled/></div>
                <div class="cell c60"><button @click="sw2 = (sw2 == 'YES' ? 'NO' : 'YES')">Toggle this</button></div>
            </div>
            <div class="row">
                <div class="cell c20">Switch No Label</div>
                <div class="cell c20"><bt-switch id="sw3" v-model="sw3"/></div>
                <div class="cell c60"></div>
            </div>
            <div class="row">
                <div class="cell c20">bt-barloader Color</div>
                <div class="cell c20"><bt-barloader>Some loader testtttstss ....</bt-barloader></div>
                <div class="cell c60">
                    <bt-radio id="rad1" name="radGRP" value="RAD1" v-model="rad1">bt-radio 1</bt-radio>
                    <bt-radio id="rad2" name="radGRP" value="RAD2" v-model="rad1">bt-radio 2</bt-radio>
                    <bt-radio id="rad3" name="radGRP" value="RAD3" v-model="rad1" :disabled="true">bt-radio 3</bt-radio>
                    <bt-radio id="rad4" name="radGRP1" value="RAD4" v-model="rad2">bt-radio 4</bt-radio>
                </div>
            </div>
            <div class="row">
                <div class="cell c20">bt-barloader Black</div>
                <div class="cell c20"><bt-barloader color="black">Some loader ytryrey ....</bt-barloader></div>
                <div class="cell c60">
                    <bt-checkbox id="check1" name="chkGRP" value="CHECK1" v-model="chk1">bt-checkbox 1</bt-checkbox>
                    <bt-checkbox id="check2" name="chkGRP" value="CHECK2" v-model="chk1">bt-checkbox 2</bt-checkbox>
                    <bt-checkbox id="check3" name="chkGRP" value="CHECK3" v-model="chk1" :disabled="true">bt-checkbox 3</bt-checkbox>
                    <bt-checkbox id="check4" name="chkGRP" value="CHECK4" v-model="chk1">bt-checkbox 4</bt-checkbox>
                </div>
            </div>
            <div class="row">
                <div class="cell c20">bt-barloader White</div>
                <div class="cell c20" style="background-color:grey"><bt-barloader color="white">Some loader fsdfsf ....</bt-barloader></div>
                <div class="cell c60">
                    <bt-radiobutton id="rdb1" :options="options" v-model="rad3" mega title="Choose an option"/>
                </div>
            </div>
            <div class="row">
                <div class="cell c20">bt-spinloader</div>
                <div class="cell c20"><bt-spinloader>Sihii sonnther loading text ...</bt-spinloader></div>
                <div class="cell c60">
                    <bt-checkboxbutton id="chb1" title="Choose relevant options" mega :options="options" v-model="chk2" v-validate="'required'" :message="errors.first('chb1')"/>
                </div>
            </div>
        </div>
        <router-link to="/">Back to Home</router-link>
    </div>
</template>

<script>
export default {
	name: 'TestSwitch',
	inject: ['$validator'],
	data() {
		return {
			sw1: 'YES',
			sw2: 'YES',
			sw3: 'NO',
			rad1: null,
			rad2: null,
			chk1: [],
			chk2: [],
			rad3: null,
			options: [{ value: 123, label: 'Option 123' }, { value: 1234, label: 'Option 1234' }, { value: 1235, label: 'Option 1235' }, { value: 1236, label: 'Option 1236' }]
		}
	},
	mounted() {
		this.$events.emit('showMessage', { id: 'app1', type: 'info', message: 'Information message!' })
		this.$events.emit('showMessage', { id: 'app1', type: 'warn', message: 'Warning message!', title: 'Warning title' })
		this.$events.emit('showMessage', { id: 'app1', type: 'error', message: 'Error message!', important: true })
		this.$events.emit('showMessage', { id: 'app1', type: 'info', message: 'Another info message!', important: true })
		this.$events.emit('showMessage', { id: 'app1', type: 'success', message: 'Success message!', important: true })
		this.$events.emit('showMessage', { id: 'app1', type: 'warn', message: 'Some message  with a <a class="msgLink" data-attr="SOMEEVENTNAME">link</a> to fire some event', important: true })
	}
}
</script>
