<template>
    <div class='equipment-facilities'>
        <!-- 左侧菜单 -->
        <SystemMenu class='left' @chooseSystem='changeSystem' />
        <div class='right'>
            <div class='top'>
                <!-- <van-cell :title='`消防电系统原理示意图`' :border='false' is-link :value='`19条`' @click='handleClick' />
                <van-cell :title='`消防喷淋系统示意图`' :border='false' is-link value='无' @click='handleClick' />
                <van-cell :title='`消防窗喷系统示意图`' :border='false' is-link value='无' @click='handleClick' />
                <van-cell :title='`配电室低压柜及出线明细`' :border='false' is-link value='无' @click='handleClick' />
                <van-cell :title='`消防泵房引出管路分布图`' :border='false' is-link value='无' @click='handleClick' />
                <van-cell :title='`楼层分布+其他数据`' :border='false' is-link value='无' @click='handleClick' />-->
                <van-cell
                    v-for='(item,index ) in listData[smsxt]'
                    :key='index'
                    :title='item.text'
                    :border='false'
                    is-link
                    value='无'
                    @click='handleClick(item)'
                />
            </div>
            <!-- 分割线 -->
            <div class='divider'></div>
            <!-- 设备卡片 -->
            <div class='card-container'>
                <m-card class='card' :type='item' name='消防主机' :total='50' :numer='3' v-for='item in 5' :key='item' @click.native='goToEquipment(item)' />
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import { Cell } from 'vant'
Vue.use(Cell)
import SystemMenu from '@/components/systemMenu'
import MCard from '@/components/equipmentFacilities/Card'
export default {
    name: 'EquipmentFacilities',
    props: {},
    components: { SystemMenu, MCard },
    data() {
        return {
            smsxt: '1001', //系统值,默认供电系统
            listData: {
                //上部列表数据
                1001: [
                    //供电
                    { text: '供电系统原理图', dataType: 'img', id: '' },
                    { text: '机房平面布置图', dataType: 'room', id: '' },
                    { text: '配电室低压柜及出现明细', id: '' },
                    { text: '楼层分布', dataType: 'floor', id: '' },
                    { text: '电井控制商铺范围', id: '' },
                ],
                1002: [
                    //暖通
                    { text: '空调系统原理图', type: 'img', id: '' },
                    { text: '分水器之路分布图', id: '' },
                    { text: '机房平面布置图', id: '' },
                    { text: '楼层分布', id: '' },
                ],
                1003: [
                    //消防
                    { text: '消防电系统原理示意图', id: '' },
                    { text: '消防喷淋系统示意图', id: '' },
                    { text: '消防窗喷系统示意图', id: '' },
                    { text: '消火栓系统示意图', id: '' },
                    { text: '消防泵房引出管理分布图', id: '' },
                    { text: '机房平面布置图', id: '' },
                    { text: '楼层分布+附加数据', id: '' },
                ],
                1004: [
                    //弱电
                    { text: '门禁管理系统原理图', id: '' },
                    { text: 'BA楼宇智能化系统原理图', id: '' },
                    { text: '机房平面布置图', id: '' },
                    { text: '楼层分布', id: '' },
                ],
                1005: [
                    //给排水
                    { text: '给水系统原理示意图', id: '' },
                    { text: '排水系统原理示意图', id: '' },
                    { text: '机房平面布置图', id: '' },
                    { text: '楼层分布', id: '' },
                ],
                1006: [
                    //电梯
                    { text: '扶梯原理图', id: '' },
                    { text: '直梯原理图', id: '' },
                    { text: '楼层分布', id: '' },
                ],
                1007: [
                    // 燃气
                    { text: '燃气系统原理示意图', id: '' },
                    { text: '楼层分布', id: '' },
                ],
                1008: [
                    // 土建
                    { text: '建筑立面图', id: '' },
                    { text: '石材铺装', id: '' },
                ],
            },
        }
    },
    beforeMount() {},
    mounted() {},
    methods: {
        /**
         * 左侧菜单切换事件
         * @param { String } text 系统名称
         * @param { String } category 系统拼音简称  NTXT ...
         * @param { String }  smsxt 系统id? 1001 - 1008
         */
        changeSystem({ text, categoryId, smsxt }) {
            console.log(text, categoryId, smsxt)
            this.smsxt = smsxt
        },
        handleClick(item) {
            console.log(item)
        },
        goToEquipment(data) {
            console.log(data)
        },
    },
}
</script>
<style lang='less' scoped>
.equipment-facilities {
    width: 100%;
    height: calc(100% - 100px);
    padding: 0;
    display: flex;
    .left {
        width: 80px;
        height: 100%;
    }
    .right {
        flex: 1;
        height: 100%;
        padding: 16px 16px 16px 12px;
        overflow: auto;
        .top {
            width: 100%;
            /deep/ .van-cell {
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                background: #f8f9fa;
                border-radius: 4px;
                margin-bottom: 4px;
                .van-cell__value {
                    width: 40px;
                    flex: none;
                }
            }
        }
        .divider {
            border-bottom: 1px solid #e6e6e6;
            margin: 20px 0;
        }
        .card-container {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            flex-flow: wrap;
            .card {
                flex: 1;
                width: 48%;
                margin: 2% 1%;
                min-width: 48%; // 加入这两个后每个item的宽度就生效了
                max-width: 48%; // 加入这两个后每个item的宽度就生效了
                height: 110px;
            }
        }
    }
}
</style>