<template>
    <div>
        <div class="home-container layout-pd">
            <el-card shadow="hover" class="layout-padding-auto mb10">
                <el-descriptions title="基本信息" :column="3" class="des" size="default" border>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">区县名称</div>
                        </template>
                        {{ props.form.areaName }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">报表日期</div>
                        </template>
                        {{ props.form.date }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">报表类型</div>
                        </template>
                        {{ filtername(props.form.type) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">报表状态</div>
                        </template>
                        <div :class="props.form.businessState == 1 ? 'green' : 'red'">
                            {{ filterstate(props.form.businessState) }}
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">添加时间</div>
                        </template>
                        {{ proxy?.$method.formatDate(props.form.createTime) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">最后修改时间</div>
                        </template>
                        {{ proxy?.$method.formatDate(props.form.updateTime) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">退回备注</div>
                        </template>
                        {{ props.form.remark }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
        </div>
        <div class="home-container layout-pd">
            <div class="uscon">
                <el-tabs v-model="actname" type="border-card" class="demo-tabs">
                    <el-tab-pane label="表一" name="0">
                        <tableone :uitem="props.list.basic"></tableone>
                    </el-tab-pane>
                    <el-tab-pane label="表二" name="1">
                        <tabletwo :uitem="props.list.second"></tabletwo>
                    </el-tab-pane>
                    <el-tab-pane label="表三" name="2">
                        <tablethree :uitem="props.list.structure"></tablethree>
                    </el-tab-pane>
                    <el-tab-pane label="表四" name="3">
                        <tablefour :uitem="props.list.range"></tablefour>
                    </el-tab-pane>
                    <el-tab-pane label="表五" name="4">
                        <tablefive :uitem="props.list.objects"></tablefive>
                    </el-tab-pane>
                    <el-tab-pane label="表六" name="5">
                        <tablesix :uitem="props.list.change"></tablesix>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineAsyncComponent, ref } from 'vue';
import { useCurrentInstance } from "/@/method/get";
const { proxy } = useCurrentInstance();

const props = defineProps({
    form: {
        type: Object,
        default: {},
    },
    list: {
        type: Object,
        default: {},
    },
    typelist: {
        type: Array,
        default: [],
    },
    buslist: {
        type: Array,
        default: [],
    }
});
// 表一
const tableone = defineAsyncComponent(
    () => import("/@/views/district/detailprovintemple/tableone.vue")
);
// 表二
const tabletwo = defineAsyncComponent(
    () => import("/@/views/district/detailprovintemple/tabletwo.vue")
);
// 表三
const tablethree = defineAsyncComponent(
    () => import("/@/views/district/detailprovintemple/tablethree.vue")
);
// 表四
const tablefour = defineAsyncComponent(
    () => import("/@/views/district/detailprovintemple/tablefour.vue")
);
// 表五
const tablefive = defineAsyncComponent(
    () => import("/@/views/district/detailprovintemple/tablefive.vue")
);

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

const actname = ref("0");


function filtername(name: string | number) {
    const tylist = props.typelist
    let names: any = tylist.filter((res: any) => {
        return name == res.value
    })
    if (names.length != 0) {
        return names[0].label
    }
}

function filterstate(name: string | number) {
    const tylist = props.buslist
    let names: any = tylist.filter((res: any) => {
        return name == res.value
    })
    if (names.length != 0) {
        return names[0].label
    }
}
</script>

<style lang="scss">
.ctitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}

.green {
    color: #02bc34;
}

.red {
    color: #e30f0f;
}

.ustitles {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
}

.title {
    font-weight: bold;
    font-size: 14px;
    border-left: 3px solid #409efe;
    padding-left: 10px;
    margin-bottom: 20px;
}

.bgwhite {
    background-color: #fff;
}

.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;
        }
    }
}

.orstitle {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #333;
    font-size: 15px;
    margin-bottom: 10px;

    .color {
        color: #2362e1;
        margin-right: 4px;
    }
}

.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;
        }
    }
}

.utable {
    width: 100%;
    background-color: #fff;
}

.utabletitle {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 20px 0;
}

.utabletop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    padding-right: 20px;
    padding-bottom: 20px;
}
</style>