<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.basic"></tableone>
            </el-tab-pane>
            <el-tab-pane label="表二" name="1">
                <tabletwo ref="tabletwoRef" :uitem="state.uitem.second"></tabletwo>
            </el-tab-pane>
            <el-tab-pane label="表三" name="2">
                <tablethree ref="tablethreeRef" :uitem="state.uitem.structure"></tablethree>
            </el-tab-pane>
            <el-tab-pane label="表四" name="3">
                <tablefour ref="tablefourRef" :uitem="state.uitem.range"></tablefour>
            </el-tab-pane>
            <el-tab-pane label="表五" name="4">
                <tablefive ref="tablefiveRef" :uitem="state.uitem.objects"></tablefive>
            </el-tab-pane>
            <el-tab-pane label="表六" name="5">
                <tablesix ref="tablesixRef" :uitem="state.uitem.change"></tablesix>
            </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/provincesTemple/one.vue")
);
// 表二
const tabletwo = defineAsyncComponent(
    () => import("/@/views/district/provincesTemple/two.vue")
);
// 表三
const tablethree = defineAsyncComponent(
    () => import("/@/views/district/provincesTemple/three.vue")
);
// 表四
const tablefour = defineAsyncComponent(
    () => import("/@/views/district/provincesTemple/four.vue")
);
// 表五
const tablefive = defineAsyncComponent(
    () => import("/@/views/district/provincesTemple/five.vue")
);

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

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

const actname = ref("0");
const setvalue = (e: any) => {
    state.uitem = e
    nextTick(() => {
        tableoneRef.value.setvalue(e.basic)
        tabletwoRef.value.setvalue(e.second)
        tablethreeRef.value.setvalue(e.structure)
        tablefourRef.value.setvalue(e.range)
        tablefiveRef.value.setvalue(e.objects)
        tablesixRef.value.setvalue(e.change)
    })

}

const getvalue = () => {
    state.uitem.basic = tableoneRef.value.getvalue()
    state.uitem.second = tabletwoRef.value.getvalue()
    state.uitem.structure = tablethreeRef.value.getvalue()
    state.uitem.range = tablefourRef.value.getvalue()
    state.uitem.objects = tablefiveRef.value.getvalue()
    state.uitem.change = tablesixRef.value.getvalue()
    return state.uitem;
}

// 定义变量内容
const state = reactive<any>({
    uid: "",
    uitem: {
        // 表一
        basic: {},
        // 表二
        second: {},
        // 表三
        structure: {},
        // 表四
        range: {},
        // 表五
        objects: {},
        // 表六
        change: {},
    },
});

//这里需要暴露出去不然父组件调用不到这个方法
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>
  