<!--
 * @Description : 复选框组
 * @Author      : jinxin
 * @Date        : 2023-02-18 15:04:54
-->
<template>
    <div class="lc_title_box">
       <div class="lc_title_box_title">
            <p>{{ title }}</p>
       </div>
       <div class="checkbox_group">
            <span v-for="(item,index) in checkboxlist" :key="index">
                <vxe-checkbox v-model="item.status" :content="item.name" @change="changeEmit()"></vxe-checkbox>
            </span>
       </div>
    </div>
</template>

<script>
import { defineComponent,reactive } from 'vue'

export default defineComponent({
    props:{
        title:String,
        checkboxlist:Array
    },
    emits:['emitCheckoutValue'],
    setup(props,context){
        let data = reactive({})
        const changeEmit = () => {
            context.emit('emitCheckoutValue',props.checkboxlist)
        }
        return{
            data,
            props,
            changeEmit
        }
    }
})
</script>

<style scoped>
.lc_title_box_title{
    display:flex;
    justify-content:left;
    align-items:center;
}
.lc_title_box_title span:nth-child(1){
    height:12px;
    margin-right:8px;
}

.checkbox_group{
    margin:16px 0;
}
.checkbox_group span{
    margin-right: 16px;
}
</style>