<template>
    <!-- 设备右侧点击图例按钮显示的图例弹框 -->
    <div class='box'>
        <div class='legend-box' v-if='isShow'>
            <a-table :columns='columns' :data-source='data' :row-selection='rowSelection' :pagination='false' size='small' />
            <div class='switch-btn'>
                <a-switch @change='changeSwitch' size='small' />&nbsp;&nbsp;隐藏数量为0的项目
            </div>
            <div class='remark'>
                注：1.主要设备房包括:制冷机房、生活水泵房、消防泵房
                <p>2.图例后 的数字,代表此位置的数量</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;3.B2-1至B2-8为防火分区编号</p>
            </div>
        </div>
        <div v-if='!isShow && showPic' class='pic-box'>
            <img src='@/assets/imgs/eq.jpg' alt />
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: false,
            showPic: false,
            columns: [
                {
                    title: '项目',
                    dataIndex: 'projectName',
                    key: 'projectName'
                },
                {
                    title: '数量',
                    dataIndex: 'count',
                    key: 'count'
                },
                {
                    title: '单位',
                    dataIndex: 'unit',
                    key: 'unit'
                },
                {
                    title: '图例',
                    dataIndex: 'legend',
                    key: 'legend'
                }
            ],
            data: [
                {
                    projectName: '建筑面积',
                    count: '18500',
                    unit: 'm2',
                    legend: '——'
                },
                {
                    projectName: '建筑面积',
                    count: '18500',
                    unit: 'm2',
                    legend: '——'
                },
                {
                    projectName: '建筑面积',
                    count: '18500',
                    unit: 'm2',
                    legend: '——'
                },
                {
                    projectName: '建筑面积',
                    count: '18500',
                    unit: 'm2',
                    legend: '——'
                },
                {
                    projectName: '建筑面积',
                    count: '18500',
                    unit: 'm2',
                    legend: '——'
                },
                {
                    projectName: '建筑面积',
                    count: '18500',
                    unit: 'm2',
                    legend: '——'
                },
                {
                    projectName: '建筑面积',
                    count: '18500',
                    unit: 'm2',
                    legend: '——'
                },
                {
                    projectName: '建筑面积',
                    count: '18500',
                    unit: 'm2',
                    legend: '——'
                },
                {
                    projectName: '建筑面积',
                    count: '18500',
                    unit: 'm2',
                    legend: '——'
                },
                {
                    projectName: '建筑面积',
                    count: '18500',
                    unit: 'm2',
                    legend: '——'
                }
            ],
            rowSelection: {
                onChange: (selectedRowKeys, selectedRows) => {
                    //console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
                },
                onSelect: (record, selected, selectedRows) => {
                    //console.log(record, selected, selectedRows)
                },
                onSelectAll: (selected, selectedRows, changeRows) => {
                    //console.log(selected, selectedRows, changeRows)
                }
            }
        }
    },
    computed: {},
    methods: {
        changeSwitch(checked) {
            //console.log(`a-switch to ${checked}`)
        },
        open() {
            this.isShow = !this.isShow
        },
        openPic() {
            this.showPic = !this.showPic
        }
    }
}
</script>


<style lang="less" scoped>
.box {
    .legend-box {
        width: 387px;
        height: 546px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
        border-radius: 2px;
        border: 1px solid rgba(228, 229, 231, 1);
        position: fixed;
        z-index: 2;
        right: 80px;
        top: 164px;
        padding: 16px 0;
        overflow-y: auto;
        .switch-btn {
            position: absolute;
            bottom: 78px;
            right: 16px;
            color: #646c73;
        }
        .remark {
            position: absolute;
            bottom: 16px;
            left: 16px;
            p {
                padding-left: 28px;
                margin-bottom: 0;
            }
        }
    }
    .pic-box {
        width: 387px;
        height: 346px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
        border-radius: 2px;
        border: 1px solid rgba(228, 229, 231, 1);
        position: fixed;
        z-index: 2;
        right: 80px;
        top: 405px;
        padding: 16px 0;
        overflow-y: auto;
    }
}
</style>
<style lang="less" >
.box {
    .legend-box {
        th {
            background: rgba(2, 91, 170, 0.1) !important;
            font-size: 12px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: border;
            color: #000;
        }
    }
}
</style>

