<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>
import { getjzxxinformationByxmId, getjzxxById, addjzxx, updatejzxx, deletejzxx } from '@/api/ManageApi/index';

export default {
    dicts: ['isno'],
    props: {
        size: {
            type: String,
            default: ''
        },
        xmId: {
            type: [Number, String],
            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: 2, 
                sfydzk: 2,
                sfyqcpd: 2, 
                totalBuildingHeight: 0,
                twoAndFourCg: 0,
                twoAndThreeLmhz: 0,
                updateBy: '',
                updateId: 0,
                updateTime: '',
                xmId: 0,
                zj: 0
            }
        };
    },
    created() {
        this.fetchBuildings();
    },
    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: 2,
                sfydzk: 2,
                sfyqcpd: 2,
                totalBuildingHeight: 0,
                twoAndFourCg: 0,
                twoAndThreeLmhz: 0,
                updateBy: '',
                updateId: 0,
                updateTime: '',
                xmId: this.xmId,
                zj: 0
            };
        },
        fetchBuildings() {
            console.log('Fetching data for xmId:', this.xmId);
            getjzxxinformationByxmId({ xmId: this.xmId })
                .then(response => {
                    console.log('API response:', response);
                    if (response.code === 200 && response.data) {
                        this.buildings = Object.values(response.data); // 将对象转换为数组
                        console.log('Buildings data after assignment:', this.buildings);
                    } else {
                        console.error('数据格式不正确:', response);
                    }
                })
                .catch(error => {
                    console.error('数据获取失败:', error);
                });
        },
        selectBuilding(id) {
            console.log('Selected building ID:', id);
            getjzxxById(id)
                .then(response => {
                    console.log('Building details response:', response);
                    if (response.code === 200 && response.data) {
                        this.selectedBuilding = response.data; // 将详细信息赋值给 selectedBuilding
                        console.log('Selected building data:', this.selectedBuilding);
                    } else {
                        console.error('数据格式不正确:', response);
                    }
                })
                .catch(error => {
                    console.error('数据获取失败:', error);
                });
        },
        handleAddBuilding() {
            const api = this.buildingForm.id ? updatejzxx : addjzxx; // 根据是否有ID判断是新增还是更新
            const form = {
                ...this.buildingForm
            };
            api(form)
                .then(response => {
                    if (response.code === 200) {
                        this.$message.success(form.id ? '更新成功' : '新增成功');
                        this.dialogVisible = false;
                        this.fetchBuildings(); // 刷新楼栋列表
                    } else {
                        this.$message.error(form.id ? '更新失败' : '新增失败');
                    }
                })
                .catch(error => {
                    console.error(form.id ? '更新失败:' : '新增失败:', error);
                    this.$message.error(form.id ? '更新失败' : '新增失败');
                });
        },
        handleDelete(id) {
            console.log('Deleting building with ID:', id); // 调试信息

            this.$confirm('你确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deletejzxx([id]) // 传递一个包含ID的数组
                    .then(response => {
                        if (response.code === 200) {
                            this.$message.success('删除成功');
                            this.fetchBuildings(); // 刷新楼栋列表
                        } else {
                            this.$message.error('删除失败');
                        }
                    })
                    .catch(error => {
                        console.error('删除失败:', error);
                        this.$message.error('删除失败');
                    });
            }).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>