<script lang="ts" setup>

import { ElDialog } from 'element-plus';

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

//主表字段
const checkList=ref<string[]>([]) 
//子表字段
const subCheckList=ref<string[]>([]) 

//优化：用来按子表显示子表自动 
const subTables=ref<string[]>([])

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

  //初始化子表的字段
  props.subFields.forEach((val)=>{
    subCheckList.value.push(val.field)
  })
})

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

  //收集子表需要导出的字段
  props.subFields.forEach((val)=>{
    
    if(subCheckList.value.includes(val.field)){
      sub.push(val)
    }
  })
  props.commitFunc(arr,sub)
}
</script>

<template>
  <el-dialog :model-value="true" :style="{height: '60%',width:'60%'}" @close="props.closeFunc">
    <div style="display: flex; flex-direction:column;width: 80%; height: 60%;margin: 20px;">
      <h3>请选择主表单导出的字段</h3>
      <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 v-for="tab in subtabs" style="margin-top: 40px;">
        <h3>{{ tab.label }} : 表导出的字段</h3>
        <el-checkbox-group v-model="subCheckList">
            <el-checkbox v-for="item in props.subFields.filter(val=>val.table===tab.field)" :key="item.field" :label="item.label" :value="item.field" />
        </el-checkbox-group>  
      </div>

    </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>