<template>
  <MyComponent :data = "config.data" :mesh = "config.mesh" @callfun = "callfun" ></MyComponent>
</template>
  
  <script setup>
  import { ref,defineComponent,defineProps} from 'vue';

  const props = defineProps({
    meshObj: {
      type: Object,
      required: {}
    }
  });

  const { config } = props;

  const callfun = (obj) =>{
    showMsg.value = '参数编码:'+ obj.code +'参数值:' + obj.value;
  }
  
  onMounted(() => {
    // setTimeout(() => {
    //   let meshObj = getMesh()
    //   mesh.value = meshObj.struct
    //   data.value = meshObj.params
    // }, 3000);
  })
  
  const  MyComponent = defineComponent({

    props: {
      data:{
        type: String,
        required: true
      },
      mesh:{
        type: Object,
        required: true
      }
    },

    emits: ['callfun'], // 子组件发送自定义事件
  
    setup(props,{ emit }) {
      return () => {
        return props.mesh != false ? h(props.mesh.type, { id: props.mesh.key, style: props.mesh.type, class: props.mesh.class }, [
            // 第二层 tr
            props.mesh.items.map(tr => {
              return h(tr.type, { style: tr.style, key: tr.rowIndex }, [
                // 第三层 td
                tr.items.map(td => {
                  return td.valueType == 0 ? h(td.type, { key: td.key, style:td.style }, [ td.value ])  : 
                         td.valueType == 1 ? h(td.type, { key: td.key, style:td.style }, [ props.data[td.code] ]) : 
                         td.valueType == 2 ? h(td.type, { key: td.key, style:td.style }, [ 
                            // 第四层
                            td.items.map(content => {
                              return content.valueType == 1 ? h(content.type, { style:content.style } ,props.data[content.code]) :
                                     content.valueType == 3 ? h(content.type, { style:content.style, class:content.class ,onClick: () => emit(content.fun, {code:content.param.value,value:props.data[content.param.value]} ) },content.value) : null
                            })
                         ]) : h(td.type, { key: td.key, style:td.style }, ["???"])
                })
              ])
            })
          ]) : h('span', '正在加载！')
      }
    },
  });
  
  </script>
  
  <style lang='scss' scoped>
  .bg{
    margin: 1rem;
  }
  .tw {
    border-collapse: collapse;
    border: 2px solid rgb(49, 47, 47) ;
    :deep(td) {
      border-collapse: collapse;
      border: 1px solid rgb(29, 28, 28);
      padding: 5px;
    }
    :deep(th) {
      border-collapse: collapse;
      border: 1px solid rgb(29, 28, 28);
      background-color: cornflowerblue;
      padding: 5px;
    }
    :deep(.btn) {
      float: left;
      width: 20px;
      height: 20px;
      margin-left: 5px;
      margin-bottom: 3px;
      background-image: url("../../../assets/icons/png/edit.png");
      background-size: 20px;
    }
  }
  
  </style>
  