<template>
<div style="padding: 10px;background:#ddd;">
    <h4>Horizontal Stepper Default</h4>
    <bt-stepper id="S1" :config="config1"/>
    <h4>Horizontal Stepper Empty Blob</h4>
    <bt-stepper id="S2" :config="config1" emptyBlob/>
    <h4>Horizontal Stepper With Icon</h4>
    <bt-stepper id="S3" :config="config2" @selected="listenClick"/>
    <h4>Horizontal Stepper Progressive</h4>
    <bt-stepper id="S4" :config="config2" progressive :progress="prog1"/>
    <button @click="jumpS1">Jump Horizontal & Vertical</button>
    <table style="width:90%;margin:0 auto;">
        <tr>
            <td style="width:20%"><h4>Vertical Stepper Default/Left</h4></td>
            <td style="width:20%"><h4>Vertical Stepper Empty Blob</h4></td>
            <td style="width:20%"><h4>Vertical Stepper With Icon</h4></td>
            <td style="width:20%"><h4>Vertical Stepper Progressive</h4></td>
            <td style="width:20%"><h4>Vertical Stepper Right</h4></td>
        </tr>
        <tr>
            <td><bt-stepper id="SV1" :config="config1" type="vertical"/></td>
            <td><bt-stepper id="SV2" :config="config1" emptyBlob type="vertical"/></td>
            <td><bt-stepper id="SV3" :config="config2" @selected="listenClick" type="vertical"/></td>
            <td><bt-stepper id="SV4" :config="config2" progressive :progress="prog1" type="vertical"/></td>
            <td><bt-stepper id="SV5" :config="config1" type="vertical-right"/></td>
        </tr>
    </table>
    <router-link to="/">Back to Home</router-link>
</div>
</template>

<script>
export default {
	name: 'StepperTest',
	created() {
		this.fonts = ['search', 'eye', 'eye-slash', 'clock', 'bars-h', 'circle-info', 'circle-exclamation', 'alert', 'times', 'chevron-down']
	},
	data() {
		return {
			count1: 10,
			count2: 7,
			config1: [],
			config2: [],
			prog1: 0
		}
	},
	methods: {
		jumpS1() {
			let count = 0
			let count2 = 0
			setInterval(() => {
				if (count <= this.count1) {
					count++
					this.gen1(count)
				} else {
					count -= this.count1
					this.gen1(count)
				}
			}, 3000)
			setInterval(() => {
				if (count2 <= this.count2) {
					count2++
					this.gen2(count2)
				} else {
					count2 -= this.count2
					this.gen2(count2)
				}
			}, 3000)
		},
		gen1(d) {
			let l = []
			for (let i = 0; i < this.count1; i++) {
				l.push({
					title: `Sample title ${i + 1}`,
					color: i >= d ? 'white' : 'purple'
				})
			}
			this.config1 = l
		},
		gen2(d) {
			let l = []
			for (let i = 0; i < this.count2; i++) {
				l.push({
					title: `Sample long title ${i + 1}`,
					color: i >= d ? 'amber' : 'green',
					icon: ['fabt', this.fonts[i]]
				})
			}
			this.config2 = l
			this.prog1 = (d / this.count2) * 100
		},
		listenClick(a) {
			console.log('Stepper says ', a)
		}
	},
	mounted() {
		this.gen1(0)
		this.gen2(0)
	}
}
</script>
