<template>
    <el-form :inline="true"  size="small" class="demo-form-inline" >
        <el-form-item :label="$t('message.透析单.病区选择')" >
            <div class="outer" style="display: flex;">
                        <el-checkbox
                            v-model="checkAll"
                            @change="handleCheckAllChange"
                            >{{$t('message.透析单.全选')}}</el-checkbox
                        >
                    <el-checkbox-group style="margin-left: 15px;"
                        v-model="selectWards"
                        @change="handleCheckedCitiesChange"
                    >
                    <el-checkbox  v-for="(ward,index) in props.Wards" :key="index"
                        :label="ward.code">{{ward.groupName}}</el-checkbox>     
                    </el-checkbox-group>
            </div>
        </el-form-item>
        <el-form-item label="">
        </el-form-item>
    </el-form>
  </template>
  
<script lang="ts" setup>
    import { defineProps, defineEmits ,ref } from 'vue'
    const emit = defineEmits(['aboutExeVisible'])
    interface ward {
        groupName:string,
        code:string
    }
    // 声明props
    const props = defineProps({
      Wards: {
        type: Array
      }
    })  
    const checkAll=ref(true)
    const  selectWards=ref<String[]>([])
    // 全选按钮
    const handleCheckAllChange = (val: boolean) => {
        console.log(val)
        if(val){
            props.Wards.forEach((el:any)=>selectWards.value.push(el.code))  
        }else{
            selectWards.value=[]
        }
        emit('aboutExeVisible',selectWards.value);
    }
    // 单选按钮
    const handleCheckedCitiesChange = (value: string[]) => {
             if(value.length===props.Wards.length){
                console.log(value)
                checkAll.value=true
             }else{
                 checkAll.value=false
            }
            emit('aboutExeVisible',selectWards.value);
            
        }

  </script>