<template>
	<checkbox-group @change="checkboxChange" v-if="flag" version="1.0.1">
		<label v-for="(item,index) in keyValues" :key="checkIndex">
			<checkbox :value="item.value" :checked="item.value===viewModel" />{{item.key}}
		</label>
	</checkbox-group>
</template>


<script>
	import mixin from '@/service/mixins'
	import api from '@/service/api'
	import ala from '@/service/ala'
	export default {
		name: 'x-checkbox',
		mixins: [mixin],
		model: {
			prop: 'dataModel',
			event: 'change'
		},
		props: {
			type: {},
			min: {
				default: 0
			},
			max: {
				default: 0
			},
			apiUrl: {}, // Api网址，优 先从Api中获取数据
			dataModel: {}
		},
		data() {
			return {
				keyValues: null,
				flag: false,
				viewModel: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.flag = false
				if (!this.keyValues) {
					this.keyValues = await api.typeKeyValues(this.type, this.apiUrl)
					if (!this.keyValues) {
						this.keyValues = []
					}
				}
				if (this.dataModel) {
					if (typeof this.dataModel === 'string') {
						var data = this.dataModel.split(',')
						this.viewModel = data
					} else {
						this.viewModel = this.dataModel
					}
				}
				this.flag = true
			}
		},
		watch: {
			viewModel: {
				deep: true,
				handler(val) {
					this.$emit('change', this.viewModel)
				}
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
