<script setup>
/**
 * 复选框
 * @description
 *
 * @property {String}			title       显示的文字
 */
import {ref, watch} from "vue";

const props = defineProps({
  checkData:{type:Object,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([]);
function checkedHandle(item,index){
  const posIndex = checked.value.indexOf(index)
  if(posIndex !== -1){
    checked.value.splice(posIndex,1);
  }else{
    checked.value.push(index)
  }
  emit('update:modelValue',(posIndex === -1));
  emit('change',{ele:item,checked:(posIndex === -1)});
}
</script>
<template>
  <view class="m-checkbox-group">
    <view class="m-checkbox">
      <view class="item row align-center" v-for="(item,index) in checkData" @click="checkedHandle(item,index)">
        <view class="box border-box mr-1" :style="{borderColor:(checked.indexOf(index) !== -1)?activeColor:borderInActiveColor}">
          <view class="icon" :style="{backgroundColor:(checked.indexOf(index) !== -1)?activeColor:inActiveColor}"></view>
        </view>
        <view class="label"><m-text :text="item.label" :size="labelStyle.size" :line-height="labelStyle.lingHeight" :color="labelStyle.color"></m-text></view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.box{
  width:32rpx;
  height:32rpx;
  padding:5rpx;
  border-radius:50%;
  border:3rpx solid;
  .icon{
    width:100%;
    height:100%;
    border-radius:50%;
    background:transparent;
  }
}
</style>
