<script lang="ts" setup>

import { ElDialog } from 'element-plus';

const props = withDefaults(defineProps<{
  fields:any[],
  commitFunc:(fields:{field:string,label:string}[])=>void, 
  closeFunc:()=>void,  //父级只需销毁组件
}>(),{})

const checkList=ref<string[]>([])

onMounted(()=>{
  props.fields.forEach((val)=>{
    if (val.attribute===''){
      checkList.value.push(val.field)
    }
  })
})

function handleData(){
  const arr:{field:string,label:string}[]=[]
  props.fields.forEach((val)=>{
    if(checkList.value.includes(val.field)){
      arr.push({ field:val.field, label:val.label })
    }
  })
  props.commitFunc(arr)
}
</script>

<template>
  <el-dialog :model-value="true" :style="{height: '60%',width:'60%'}" @close="props.closeFunc">
    <h3>请选择导出的字段</h3>
    <div style="display: flex;height: 60%;margin: 20px;">
      <el-checkbox-group v-model="checkList">
        <template v-for="item in props.fields">
          <el-checkbox v-if="item.attribute===''" :key="item.field" :label="item.label" :value="item.field" />
        </template>
      </el-checkbox-group>
    </div>
    <el-button type="primary" @click="handleData">导出</el-button>
  </el-dialog>
</template>
<style>
    /* dialog的body内容样式设置*/
    .el-dialog__body{
        height: 96%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .el-dialog{
      /* 让整个弹出窗口位置更高一些*/
      --el-dialog-margin-top:7vh; 
    }
    
</style>