<template>
    <div>
        <div class="ors">
            <div class="orstitle">
                <SvgIcon name="ele-Notification" class="font15 color" />
                <p>说明</p>
            </div>
            <div class="orsitem">1、尚未开展二手房合同网签的，要通过手工汇总的形式进行数据报送。</div>
            <div class="orsitem">2、成交面积：指当日（前一日14:00至当日14:00，下同）网签的新建商品房（二手房）买卖合同的房屋（住宅）总建筑面积。</div>
            <div class="orsitem">3、成交金额：指当日网签的新建商品房（二手房）及商品住宅（二手住宅）买卖合同总价款。</div>
        </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">{{ props.form.areaName }}房地产交易信息日报统计表</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 label="新建商品房成交套数">
                        <el-table-column prop="saleCount" show-overflow-tooltip label="套数" />
                        <el-table-column prop="saleResCount" show-overflow-tooltip label="其中：住宅" />
                    </el-table-column>
                    <el-table-column label="新建商品房成交面积">
                        <el-table-column prop="saleArea" show-overflow-tooltip label="（㎡）" />
                        <el-table-column prop="saleResArea" show-overflow-tooltip label="其中：住宅" />
                    </el-table-column>
                    <el-table-column label="新建商品房成交金额">
                        <el-table-column prop="saleAmount" show-overflow-tooltip label="（万元）" />
                        <el-table-column prop="saleResAmount" show-overflow-tooltip label="其中：住宅" />
                    </el-table-column>
                    <el-table-column label="二手房成交套数">
                        <el-table-column prop="secondCount" show-overflow-tooltip label="套数" />
                        <el-table-column prop="secondResCount" show-overflow-tooltip label="其中：住宅" />
                    </el-table-column>
                    <el-table-column label="二手房成交面积">
                        <el-table-column prop="secondArea" show-overflow-tooltip label="（㎡）" />
                        <el-table-column prop="secondResArea" show-overflow-tooltip label="其中：住宅" />
                    </el-table-column>
                    <el-table-column label="二手房成交金额">
                        <el-table-column prop="secondAmount" show-overflow-tooltip label="（万元）" />
                        <el-table-column prop="secondResAmount" show-overflow-tooltip label="其中：住宅" />
                    </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;
}


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