<template>
    <div>
        <u-table
            stripe
            ref="plTreeTable"
            header-cell-class-name="table_header"
            fixed-columns-roll
            :data="tableData"
            :row-height="rowHeight"
            :height="vh"
            :treeConfig="{
                children: 'children',
                iconClose: 'el-icon-arrow-right',
                iconOpen: 'el-icon-arrow-down',
                expandAll: true
            }"
            v-loading="loading"
            element-loading-text="数据加载中"
            @toggle-tree-expand="toggleTreeExpand"
            use-virtual
            row-id="id"
            border
        >
            <!-- beautify-table
                header-drag-style -->
            <!--u-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性-->
            <u-table-column
                prop="name"
                :label="typedata"
                :treeNode="true"
                min-width="250"
                :showOverflowTooltip="true"
                :show-overflow-tooltip="true"
            ></u-table-column>
            <u-table-column min-width="150" align="center" prop="voltageLevel" v-if="dydj" label="电压等级">
                <template slot-scope="scope">
                    <span v-if="scope.row.voltageLevel == null" type="primary" size="small">/</span>
                    <span v-if="scope.row.voltageLevel != null" type="primary" size="small">
                        {{ scope.row.voltageLevel }}
                    </span>
                </template>
            </u-table-column>
            <u-table-column min-width="150" align="center" prop="ip" label="网络参数">
                <template slot-scope="scope">
                    <span v-if="scope.row.ip == null" type="primary" size="small">/</span>
                    <span v-if="scope.row.ip != null" type="primary" size="small">{{ scope.row.ip }}</span>
                </template>
            </u-table-column>
            <!-- <u-table-column min-width='150' align="center" prop="name" :show-overflow-tooltip='true' label="名称"  >
    
                                </u-table-column> -->
            <u-table-column min-width="150" align="center" prop="manufacturer" label="厂家">
                <template slot-scope="scope">
                    <span v-if="scope.row.manufacturer == null" type="primary" size="small">/</span>
                    <span v-if="scope.row.manufacturer != null" type="primary" size="small">
                        {{ scope.row.manufacturer }}
                    </span>
                </template>
            </u-table-column>
            <u-table-column min-width="150" align="center" prop="name" :show-overflow-tooltip="true" label="终端名称">
                <template slot-scope="scope">
                    <span v-if="scope.row.name == null" type="primary" size="small">/</span>
                    <span v-if="scope.row.name != null" type="primary" size="small">{{ scope.row.name }}</span>
                </template>
            </u-table-column>
            <u-table-column min-width="150" align="center" prop="comFlag" label="通讯状态">
                <template slot-scope="scope">
                    <span type="primary" v-if="scope.row.comFlag == null" size="small">/</span>
                    <el-tag
                        type="primary"
                        v-if="scope.row.comFlag == 0"
                        style="background: #ff3300; color: #fff"
                        size="small"
                    >
                        中断
                    </el-tag>
                    <el-tag
                        type="primary"
                        v-if="scope.row.comFlag == 1"
                        style="background: #009933; color: #fff"
                        size="small"
                    >
                        正常
                    </el-tag>
                </template>
            </u-table-column>
            <u-table-column
                min-width="150"
                align="center"
                prop="updateTime"
                label="最新数据时间"
                :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.updateTime == null" type="primary" size="small">/</span>
                    <span v-if="scope.row.updateTime != null" type="primary" size="small">
                        {{ scope.row.updateTime }}
                    </span>
                </template>
            </u-table-column>
            <u-table-column min-width="150" align="center" prop="onlineRate" label="在线率(%)">
                <template slot-scope="scope">
                    <span v-if="scope.row.onlineRate == 3.14159" type="primary" size="small">暂无数据</span>
                    <span v-if="scope.row.onlineRate != 3.14159" type="primary" size="small">
                        {{ scope.row.onlineRate.toFixed(2) }}
                    </span>
                </template>
            </u-table-column>
            <u-table-column min-width="150" align="center" prop="valueOver" label="评估">
                <template slot-scope="scope">
                    <el-tag
                        v-if="scope.row.valueOver == 0"
                        type="primary"
                        size="small"
                        style="background: #ff3300; color: #fff"
                    >
                        不合格
                    </el-tag>
                    <el-tag
                        v-if="scope.row.valueOver == 1"
                        type="primary"
                        size="small"
                        style="background: #009933; color: #fff"
                    >
                        合格
                    </el-tag>
                    <!-- <el-tag v-if="(scope.row.onlineRate>=90)" type="primary" size="small" style="background:#009933;color: #fff;">优秀</el-tag>
                                      <el-tag v-if="(60<=scope.row.onlineRate && scope.row.onlineRate<90)" type="primary" size="small" style="background:#ff9933;color: #fff;">合格</el-tag>
                                      <el-tag v-if="(scope.row.onlineRate<60)" type="primary" size="small" style="background:#FF3300;color: #fff;">不合格</el-tag> -->
                </template>
            </u-table-column>
        </u-table>
    </div>
</template>
<script>
export default {
    props: {
        classvalue: {
            type: String,
            default: undefined
        },
        tableData: {
            type: Array,
            default: []
        },
        loading: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        classvalue: function (a, b) {
            if (a === 'Power_Network') {
                this.typedata = '电网拓扑'
            } else if (a === 'Manufacturer') {
                this.typedata = '终端厂家'
            }
        },
        tableData: function (a, b) {
            if (a.length > 0) {
            }
        }
    },
    data() {
        return {
            rowHeight: 20,
            vh: null,
            dydj: false,
            typedata: '电网拓扑'
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vth = window.sessionStorage.getItem('appheight') - 118
            this.vh = window.sessionStorage.getItem('appheight') - 118 + 'px'
        },
        toggleTreeExpand() {}
    }
}
</script>
<style lang="less" scoped>
@import url('../../styles/comStyle.less');
</style>
<style lang="scss" scoped></style>
