/**
*@author:Guoxiaohuan
*@date:2020.05.29
*@info：图例展示状态
*/
<template>
    <div class='view'>
        <div v-if='systemName=="土建系统"'>
            <el-table
                v-loading='loading'
                ref='dataTable'
                :data='viewTable'
                tooltip-effect='dark'
                style='width:100%;'
                :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 prop label='说明'>
                    <template slot-scope='{row}'>
                        <span>{{'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop label='图例' width='60'>
                    <template slot-scope='{row}'>
                        <div v-if='row.Url' class='Url-img'>
                            <img :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
                        </div>
                        <div v-else>{{'--'}}</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-else>
            <el-table
                v-loading='loading'
                ref='dataTable'
                :data='viewTable'
                tooltip-effect='dark'
                style='width:100%;'
                @selection-change='handleSelectionChange'
                :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='图例' width='55'>
                    <template slot-scope='{row}'>
                        <div v-if='row.Url' class='Url-img'>
                            <img :src='`/serve/topology-wanda/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(swich)'></el-switch>
                <span>隐藏数量为0的项目</span>
            </div>
            <div class='remark' v-if='remarksText'>
                <span class='remark-title'>注：</span>
                <div v-html='remarksText' class='remark-text'></div>
            </div>
        </div>
    </div>
</template>
<script>
import bus from "@/utils/bus.js"
export default {
    props: ['viewTable', 'loading', 'remarksText', 'systemName'],
    data() {
        return {
            swich: true,
            multipleSelection: []
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val
            const tempArr = val.map(t => {
                return t.GraphElementId
            })
            bus.$emit('changeShow', tempArr)
        },
        handleSwich(val) {
            this.$emit('changeSwitch', val)
        },
        setSelected() {
            this.viewTable.forEach(t => {
                this.$refs.dataTable.toggleRowSelection(t, true)
            })
        }
    },
    mounted() {}
}
</script>
<style lang="less" scoped>
.view {
    .swich {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 8px;
        margin-right: 4px;
        margin-bottom: 12px;
        span {
            margin-left: 8px;
        }
    }
    .remark {
        font-size: 12px;
        font-family: MicrosoftYaHeiSemibold;
        color: rgba(31, 35, 41, 1);
        line-height: 16px;
        display: flex;
        .remark-title {
            font-weight: bold;
        }
        .remark-text {
            white-space: normal;
            word-break: break-all;
            p {
                padding: 0;
            }
        }
    }
    .Url-img {
        width: 20px;
        height: 22px;
        line-height: 20px;
        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>