<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="ustitles" v-if="props.list.length!=0">{{ props.form.areaName }}房地产交易信息{{ props.list[0].month }}月月报统计表</div>
        <div class="home-container layout-pd">

            <el-card shadow="hover" class="layout-padding-auto mb10">
                <el-table :data="props.list" style="width: 100%">
                    <el-table-column align="center" label="批准销售商品房">
                        <el-table-column align="center" label="">
                            <el-table-column align="center" prop="approveArea" show-overflow-tooltip width="105">
                                <template #header>
                                    <div class="uname"><span>面积</span><span>（平方米）</span></div>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="其中：住宅">
                            <el-table-column align="center" prop="resApproveArea" show-overflow-tooltip width="105">
                                <template #header>
                                    <div class="uname"><span>面积</span><span>（平方米）</span></div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="" prop="resApproveCount" show-overflow-tooltip
                                width="105">
                                <template #header>
                                    <div class="uname"><span>套数</span><span>（套）</span></div>
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="新建商品房（住宅）成交">
                        <el-table-column align="center" label="90平方米及以下">
                            <el-table-column align="center" prop="resSaleDownArea" show-overflow-tooltip width="105">
                                <template #header>
                                    <div class="uname"><span>面积</span><span>（平方米）</span></div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="" prop="resSaleDownCount" show-overflow-tooltip
                                width="105">
                                <template #header>
                                    <div class="uname"><span>套数</span><span>（套）</span></div>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="90平方米以上">
                            <el-table-column align="center" prop="resSaleUpArea" show-overflow-tooltip width="105">
                                <template #header>
                                    <div class="uname"><span>面积</span><span>（平方米）</span></div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="" prop="resSaleUpCount" show-overflow-tooltip
                                width="105">
                                <template #header>
                                    <div class="uname"><span>套数</span><span>（套）</span></div>
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="商品房累计可售">
                        <el-table-column align="center" label="">
                            <el-table-column align="center" prop="inventoryTotalArea" show-overflow-tooltip width="105">
                                <template #header>
                                    <div class="uname"><span>面积</span><span>（平方米）</span></div>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="其中：住宅">
                            <el-table-column align="center" prop="resInventoryTotalCount" show-overflow-tooltip width="105">
                                <template #header>
                                    <div class="uname"><span>面积</span><span>（平方米）</span></div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="" prop="resInventoryTotalArea" show-overflow-tooltip
                                width="105">
                                <template #header>
                                    <div class="uname"><span>套数</span><span>（套）</span></div>
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="外地人(非潍坊人）购房面积（平方米）">
                        <el-table-column align="center" label="新建商品房">
                            <el-table-column align="center" label="" prop="outArea" width="105">
                            </el-table-column>
                            <el-table-column align="center" label="其中：住宅" prop="resOutArea" width="105">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="二手房">
                            <el-table-column align="center" label="" prop="outSecondArea" width="105">
                            </el-table-column>
                            <el-table-column align="center" label="其中：住宅" prop="resOutSecondArea" width="105">
                            </el-table-column>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="外地人购房占比（%）">
                        <el-table-column align="center" label="新建商品房">
                            <el-table-column align="center" label="" prop="outProportion" width="105">
                            </el-table-column>
                            <el-table-column align="center" label="其中：住宅" prop="resOutProportion" width="105">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="二手房">
                            <el-table-column align="center" label="" prop="outSecondProportion" width="105">
                            </el-table-column>
                            <el-table-column align="center" label="其中：住宅" prop="resOutSecondProportion" width="105">
                            </el-table-column>
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </div>
</template>

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

const props = defineProps({
    form: {
        type: Object,
        default: {},
    },
    list: {
        type: Array,
        default: [],
    },
    typelist: {
        type: Array,
        default: [],
    },
    buslist: {
        type: Array,
        default: [],
    }
});

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

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

::v-deep .el-scrollbar__bar {
    display: block !important;
}

.green {
    color: #02bc34;
}

.red {
    color: #e30f0f;
}

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

.ors {
    display: flex;
    flex-direction: column;
    background-color: #ecf2fe;
    padding: 20px;
    margin-bottom: 10px;
    margin: 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;
    }
}

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

.bgwhite {
    background-color: #fff;
}
</style>