<template>
    <div class="container">
        <!-- 顶部信息 -->
        <div class="containertop">
            <div class="topleft">
                <img src="../../../assets/images/detailsicon/1.png" alt="">
                <span>建筑信息</span>
            </div>
            <div class="topright">
                <el-button type="primary" size="medium" plain
                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="addBuildingTag">
                    <img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="新增"
                        style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
                    新增
                </el-button>
                <el-button type="primary" size="medium" plain
                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;"
                    @click="handleEdit(selectedBuilding)">
                    <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
                        style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
                    编辑
                </el-button>
                <el-button type="primary" size="medium" plain
                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
                    <i class="el-icon-download" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;"></i>
                    导入
                </el-button>
                <el-button type="primary" size="medium" plain
                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
                    <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="导出"
                        style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
                    导出
                </el-button>
            </div>
        </div>
        <!-- 栋数（楼栋名称） -->
        <div class="tagdiv">
            <div class="tagitem" v-for="building in buildings" :key="building.id" @click="selectBuilding(building.id)"
                :class="getTagItemClass(building)">
                <img src="@/assets/images/detailsicon/icon-楼栋@2x.png" alt="">
                <span>{{ building.name }}</span>
                <img src="@/assets/images/detailsicon/icon-gb@2x.png" alt="" @click.stop="handleDelete(building.id)">
            </div>
        </div>
        <!-- 内容区 -->
        <div class="content" v-if="selectedBuilding">
            <div class="descriptionsdiv">
                <el-descriptions class="margin-top" :column="4" border>
                    <el-descriptions-item>
                        <template slot="label">是否为重要楼栋</template>
                        {{ getTextForBoolean(selectedBuilding.sfwzyld) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">层数</template>
                        {{ selectedBuilding.floor }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">总建筑高度（米）</template>
                        {{ selectedBuilding.totalBuildingHeight }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">首层高度（平方米）</template>
                        {{ selectedBuilding.scgd }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">2至4层层高（米）：</template>
                        {{ selectedBuilding.twoAndFourCg }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">4层以上层高(米)：</template>
                        {{ selectedBuilding.fourYscg }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">首层地面荷载(吨/)：</template>
                        {{ selectedBuilding.scdmhz }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">二至三层楼面荷载(吨/平方米)：</template>
                        {{ selectedBuilding.twoAndThreeLmhz }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">标准层面积(千平方米)：</template>
                        {{ selectedBuilding.bzcmj }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">柱距：</template>
                        {{ selectedBuilding.zj }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">是否有吊装口：</template>
                        {{ getTextForBoolean(selectedBuilding.sfydzk) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">是否有汽车盘道：</template>
                        {{ getTextForBoolean(selectedBuilding.sfyqcpd) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">四层及以上楼面荷载(吨/平方米)：</template>
                        {{ selectedBuilding.fourYslmhz }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <!-- 新增楼栋弹窗 -->
        <el-dialog title="新增楼栋" :visible.sync="dialogVisible" width="65%">
            <el-form :model="buildingForm" label-width="230px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="楼栋名称：">
                            <el-input v-model="buildingForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否为重要楼栋：">
                            <el-select v-model="buildingForm.sfwzyld" placeholder="请选择" style="width: 22.5rem;">
                                <el-option v-for="dict in dict.type.isno" :key="dict.value" :label="dict.label"
                                    :value="parseInt(dict.value)"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="首层高度（米）：">
                            <el-input v-model="buildingForm.scgd"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="层数：">
                            <el-input v-model="buildingForm.floor"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="4层以上层高（米）：">
                            <el-input v-model="buildingForm.fourYscg"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="柱距：">
                            <el-input v-model="buildingForm.zj"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="2至4层层高（米）：">
                            <el-input v-model="buildingForm.twoAndFourCg"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="总建筑高度（米）：">
                            <el-input v-model="buildingForm.totalBuildingHeight"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="首层地面荷载（吨/平方米）：">
                            <el-input v-model="buildingForm.scdmhz"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="二至三层楼面荷载（吨/平方米）：">
                            <el-input v-model="buildingForm.twoAndThreeLmhz"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="标准层面积（千平方米）：">
                            <el-input v-model="buildingForm.bzcmj"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否有汽车盘道：">
                            <el-select v-model="buildingForm.sfyqcpd" placeholder="请选择" style="width: 22.5rem;">
                                <el-option v-for="dict in dict.type.isno" :key="dict.value" :label="dict.label"
                                    :value="parseInt(dict.value)"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="是否有吊装口：">
                            <el-select v-model="buildingForm.sfydzk" placeholder="请选择" style="width: 22.5rem;">
                                <el-option v-for="dict in dict.type.isno" :key="dict.value" :label="dict.label"
                                    :value="parseInt(dict.value)"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="四层及以上楼面荷载（吨/平方米）：">
                            <el-input v-model="buildingForm.fourYslmhz"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddBuilding">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    dicts: ['isno'],
    props: {
        size: {
            type: String,
            default: ''
        },
        buildingInfo: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            dialogVisible: false,
            buildings: [],
            selectedBuilding: null,
            buildingForm: {
                bzcmj: 0,
                createBy: '',
                createId: 0,
                createTime: '',
                floor: 0,
                fourYscg: 0,
                fourYslmhz: 0,
                id: 0,
                name: '',
                scdmhz: 0,
                scgd: 0,
                sfwzyld: 0,
                sfydzk: 0,
                sfyqcpd: 0,
                totalBuildingHeight: 0,
                twoAndFourCg: 0,
                twoAndThreeLmhz: 0,
                updateBy: '',
                updateId: 0,
                updateTime: '',
                xmId: 0,
                zj: 0
            }
        };
    },

    watch: {
        buildingInfo: {
            handler(newVal) {
                this.buildings = newVal;
                if (this.buildings.length > 0) {
                    this.selectedBuilding = this.buildings[0];
                } else {
                    this.selectedBuilding = null;
                }
            },
            immediate: true,
            deep: true
        }
    },
    mounted() {
        // 打印 buildingInfo，确认数据是否传递成功
        console.log('buildingInfo in Buildings component:', this.buildingInfo);
    },
    methods: {
        // 翻译1和2
        getTextForBoolean(value) {
            return value === 1 ? '是' : '否';
        },
        // 颜色变化方法
        getTagItemClass(building) {
            return {
                'important-building': building.sfwzyld === 1,
            };
        },
        // 添加建筑信息
        addBuildingTag() {
            this.dialogVisible = true;
            this.buildingForm = {
                bzcmj: 0,
                createBy: '',
                createId: 0,
                createTime: '',
                floor: 0,
                fourYscg: 0,
                fourYslmhz: 0,
                id: 0,
                name: '',
                scdmhz: 0,
                scgd: 0,
                sfwzyld: 0,
                sfydzk: 0,
                sfyqcpd: 0,
                totalBuildingHeight: 0,
                twoAndFourCg: 0,
                twoAndThreeLmhz: 0,
                updateBy: '',
                updateId: 0,
                updateTime: '',
                xmId: this.xmId,
                zj: 0
            };
        },
        selectBuilding(id) {
            console.log('Selected building ID:', id);
            this.selectedBuilding = this.buildings.find(building => building.id === id);
        },
        handleAddBuilding() {
            // 模拟成功
            this.$message.success(this.buildingForm.id ? '更新成功' : '新增成功');
            this.dialogVisible = false;
            // 手动更新 buildings 和 selectedBuilding
            if (this.buildingForm.id) {
                // 更新现有楼栋
                const index = this.buildings.findIndex(building => building.id === this.buildingForm.id);
                if (index !== -1) {
                    this.buildings.splice(index, 1, { ...this.buildingForm });
                }
            } else {
                // 新增楼栋
                this.buildingForm.id = this.buildings.length + 1; // 模拟生成ID
                this.buildings.push({ ...this.buildingForm });
            }
            this.selectedBuilding = { ...this.buildingForm };
        },
        handleDelete(id) {
            console.log('Deleting building with ID:', id); // 调试信息

            this.$confirm('你确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 模拟成功
                this.$message.success('删除成功');
                // 手动删除楼栋
                this.buildings = this.buildings.filter(building => building.id !== id);
                if (this.selectedBuilding && this.selectedBuilding.id === id) {
                    this.selectedBuilding = null;
                }
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        },
        handleEdit(building) {
            this.dialogVisible = true;
            this.buildingForm = { ...building }; // 填充表单数据
        }
    }
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #FFFFFF;
    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.content {
    padding: 1rem;
    display: flex;
}

.containertop {
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: .7rem 0;
    padding: .5rem;
    border-bottom: 1px solid #E5E5E5;
}

.topleft {
    width: 8rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.topleft img {
    width: 0.81rem;
    height: 0.81rem;
}

.topleft span {
    width: auto;
    height: 0.88rem;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 500;
    font-size: 0.88rem;
    color: #3D424C;
    line-height: 0.88rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
}

.descriptionsdiv {
    width: 100%;
    margin-left: 1rem;
    height: auto;
}

.tagdiv {
    padding: 1rem 2rem 1rem 2rem;
    display: flex;
}

.tagdiv img {
    width: 1.4rem;
    height: 1.5rem;
}

.tagdiv span {
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 0.88rem;
    color: #808080;
    line-height: 0.88rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
}

.tagitem {
    width: 6.25rem;
    height: 2rem;
    background: #FAFAFA;
    border-radius: 2.13rem 2.13rem 2.13rem 2.13rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
}

.important-building {
    background-color: rgba(43, 98, 241, 0.1);
}
</style>