<script setup>

/**
 * 复选框组
 * @description
 *
 * @property {String}			title       显示的文字
 */
import {ref, provide} from "vue";

const props = defineProps({
  checkData:{type:[Object,Array],default:[]},
  labelSize:{type:[String,Number],default:'26rpx'},
  size:{type:[String,Number],default:'32rpx'},
  activeColor:{type:String,default:'#578CF5'},
  inActiveColor:{type:String,default:'transparent'},
  borderInActiveColor:{type:String,default:'#999'},
  labelStyle:{type:Object,default:{}}
});

const emit = defineEmits(['change','update:modelValue']);
const checked = ref([]);

provide('checkboxGroup',{
  emit:emit,
  checked:checked,
  props:props,
  boxStyle:boxStyle
});

function boxStyle (index) {
  return {
    borderColor:(checked.value.indexOf(index) !== -1)?props.activeColor:props.unActiveColor,
    backgroundColor:(checked.value.indexOf(index) !== -1)?props.activeColor:'transparent'
  }
}
</script>
<template>
  <slot></slot>
</template>

<style lang="scss" scoped>

</style>
