<template>
    <div>
        <el-tabs v-model="actname" type="border-card" class="demo-tabs">
            <el-tab-pane label="表一" name="0">
                <tableone ref="tableoneRef" :udata="state.uitem.buildUse"></tableone>
            </el-tab-pane>
            <el-tab-pane label="表二" name="1">
                <tabletwo ref="tabletwoRef" :uitem="state.uitem.buildTrade"></tabletwo>
            </el-tab-pane>
            <el-tab-pane label="表三" name="2">
                <tablethree ref="tablethreeRef" :uitem="state.uitem.buildStructure"></tablethree>
            </el-tab-pane>
            <el-tab-pane label="表四" name="3">
                <tablefour ref="tablefourRef" :uitem="state.uitem.buildRange"></tablefour>
            </el-tab-pane>
            <el-tab-pane label="表五" name="4">
                <tablefive ref="tablefiveRef" :uitem="state.uitem.buildObjects"></tablefive>
            </el-tab-pane>
            <el-tab-pane label="表六" name="5">
                <tablesix ref="tablesixRef" :uitem="state.uitem.buildSecond"></tablesix>
            </el-tab-pane>
            <el-tab-pane label="表七" name="6">
                <tableseven ref="tablesevenRef" :uitem="state.uitem.buildTotal"></tableseven>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
  
<script setup lang="ts">
import {
    defineAsyncComponent,
    ref,
    reactive,
    onMounted,
    defineProps,
    nextTick,
    computed,
    watch,
} from "vue";
// 表一
const tableone = defineAsyncComponent(
    () => import("/@/views/district/constructTemple/one.vue")
);
// 表二
const tabletwo = defineAsyncComponent(
    () => import("/@/views/district/constructTemple/two.vue")
);
// 表三
const tablethree = defineAsyncComponent(
    () => import("/@/views/district/constructTemple/three.vue")
);
// 表四
const tablefour = defineAsyncComponent(
    () => import("/@/views/district/constructTemple/four.vue")
);
// 表五
const tablefive = defineAsyncComponent(
    () => import("/@/views/district/constructTemple/five.vue")
);

// 表六
const tablesix = defineAsyncComponent(
    () => import("/@/views/district/constructTemple/six.vue")
);

// 表七
const tableseven = defineAsyncComponent(
    () => import("/@/views/district/constructTemple/seven.vue")
);

let tableoneRef = ref(),
    tabletwoRef = ref(),
    tablethreeRef = ref(),
    tablefourRef = ref(),
    tablefiveRef = ref(),
    tablesixRef = ref(),
    tablesevenRef = ref();

const actname = ref("0");
const setvalue = (e: any) => {
    state.uitem = e
    nextTick(() => {
        tableoneRef.value.setvalue(e.buildUse)
        tabletwoRef.value.setvalue(e.buildTrade)
        tablethreeRef.value.setvalue(e.buildStructure)
        tablefourRef.value.setvalue(e.buildRange)
        tablefiveRef.value.setvalue(e.buildObjects)
        tablesixRef.value.setvalue(e.buildSecond)
        tablesevenRef.value.setvalue(e.buildTotal)
    })

}

const getvalue = () => {
    state.uitem.buildUse = tableoneRef.value.getvalue()
    state.uitem.buildTrade = tabletwoRef.value.getvalue()
    state.uitem.buildStructure = tablethreeRef.value.getvalue()
    state.uitem.buildRange = tablefourRef.value.getvalue()
    state.uitem.buildObjects = tablefiveRef.value.getvalue()
    state.uitem.buildSecond = tablesixRef.value.getvalue()
    state.uitem.buildTotal = tablesevenRef.value.getvalue()
    return state.uitem;
}

// 定义变量内容
const state = reactive<any>({
    uid: "",
    uitem: {
        // 表一
        buildUse: {},
        // 表二
        buildTrade: {},
        // 表三
        buildStructure: {},
        // 表四
        buildRange: {},
        // 表五
        buildObjects: {},
        // 表六
        buildSecond: {},
        // 表七
        buildTotal: {},
    },
});

//这里需要暴露出去不然父组件调用不到这个方法
defineExpose({
    getvalue,
    setvalue
})
</script>
<style lang="scss">
.ors {
    display: flex;
    flex-direction: column;
    background-color: #ecf2fe;
    padding: 20px;
    margin-bottom: 10px;

    .orsitem {
        display: flex;
        align-items: center;
        padding-left: 20px;
        padding-bottom: 5px;

        b {
            flex: 0 0 5%;
            color: #001330;
        }
    }
}

.table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;

    tr {
        td {
            border: 1px solid #c0c0c0;
            padding: 10px;
            text-align: center;
        }

        .text-left {
            text-align: left;
            padding-left: 10px;
        }
    }
}
</style>
  