/**
*@author:Guoxiaohuan
*@date:2020.05.29
*@info：图例展示状态
*/
<template>
    <div class='view'>
        <el-table
            v-loading='loading'
            ref='dataTable'
            :data='viewTable'
            tooltip-effect='dark'
            style='width:100%'
            @selection-change='handleSelectionChange'
            height='400px'
            :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
        >
            <el-table-column type='selection' width='45'></el-table-column>
            <el-table-column prop='Name' :show-overflow-tooltip='true' label='项目' width='100'>
                <template slot-scope='{row}'>{{row.Name||'--'}}</template>
            </el-table-column>
            <el-table-column prop='Num' label='数量'>
                <template slot-scope='{row}'>
                    <span v-if='row.Num || row.Num==0'>{{row.Num}}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column prop='Unit' label='单位' width='70'>
                <template slot-scope='{row}'>{{row.Unit||'--'}}</template>
            </el-table-column>
            <el-table-column prop='Url' label='图例'>
                <template slot-scope='{row}'>
                    <div v-if='row.Url' class='Url-img'>
                        <img :src='`/serve/Picture/query/${row.Url}`' alt />
                    </div>
                    <div v-else>{{'--'}}</div>
                </template>
            </el-table-column>
        </el-table>
        <div class='swich'>
            <el-switch v-model='swich' @change='handleSwich'></el-switch>
            <span>隐藏数量为0的项目</span>
        </div>
        <div class='remark'>
            <span style='font-weight:bold'>注：</span>
            <!-- <div>
                1.主要设备房包括:制冷机房、生活水泵房、消防泵房
                <br />2.图例后 的数字,代表此位置的数量
                <br />3.图例后 的数字,代表此位置的数量
            </div>-->
            <div v-html='editText'></div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['viewTable', 'loading', 'editText'],
    data() {
        return {
            swich: true,
            multipleSelection: []
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        handleSwich() {
            this.$emit('changeSwitch', this.swich)
        }
    },
    mounted() {}
}
</script>
<style lang="less" scoped>
.view {
    .swich {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 8px;
        margin-right: 0;
        margin-bottom: 12px;
        span {
            margin-left: 8px;
        }
    }
    .remark {
        font-size: 12px;
        font-family: MicrosoftYaHeiSemibold;
        color: rgba(31, 35, 41, 1);
        line-height: 16px;
        margin: 0px 0 16px 0;
        display: flex;
    }
    .Url-img {
        width: 20px;
        height: 22px;
        line-height: 20px;
        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>