<template>
    <div style="padding: 0.5%">
        <el-row :gutter="10" style="margin-bottom: 10px">
            <el-col :span="18.5">
                <timepicker
                    @querfromdata="querfromdata"
                    :interval="interval"
                    :treenode="treenode"
                    :tablename="tablename"
                ></timepicker>
            </el-col>
            <el-col :span="5.5" style="float: right">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="通讯状态:">
                        <el-tag style="color: #fff; background: #396" size="mini">正常</el-tag>
                        <el-tag style="color: #fff; background: #c00" size="mini">中断</el-tag>
                    </el-form-item>
                    <el-form-item label="终端在线率:">
                        <el-tag style="width: 33px; color: #fff; background: #396" size="mini">
                            &nbsp;&nbsp;&nbsp;&nbsp;
                        </el-tag>
                    </el-form-item>
                    <el-form-item label=">=90%">
                        <el-tag style="width: 33px; color: #fff; background: #fc3" size="mini">
                            &nbsp;&nbsp;&nbsp;&nbsp;
                        </el-tag>
                    </el-form-item>
                    <el-form-item label="60%~90%">
                        <el-tag style="width: 33px; color: #fff; background: #c00" size="mini">
                            &nbsp;&nbsp;&nbsp;&nbsp;
                        </el-tag>
                    </el-form-item>
                    <el-form-item label=">60%"></el-form-item>
                </el-form>
            </el-col>
            <el-table
                stripe
                :data="tableData"
                border
                v-loading="loading"
                :style="'width: 100%;height:' + tableheight + 'px'"
                :height="tableheight + 'px'"
                row-key="id"
                id="rebateSetTable"
                default-expand-all
                highlight-current-row
                :header-cell-style="{
                    //background:'#5E95E8',
                    //color:'#FFFFFF',
                    height: '25px',
                    top: '0px',
                    padding: '0px'
                }"
                :row-style="{ height: '25px' }"
                :cell-style="{ padding: '0px' }"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
                <el-table-column prop="name" label="拓扑"></el-table-column>
                <!-- <el-table-column prop="info" label="工程信息" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.info==null">/</span>
                  <span v-if="scope.row.info !==null">{{scope.row.info}}</span>
                </template>
            </el-table-column> -->
                <el-table-column prop="comFlag" label="通讯状态" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.comFlag == 1" style="color: #fff; background: #396">正常</el-tag>
                        <el-tag v-if="scope.row.comFlag == 0" style="color: #fff; background: #c00">中断</el-tag>
                        <span v-if="scope.row.comFlag == 2">/</span>
                    </template>
                </el-table-column>
                <el-table-column prop="integrity" label="终端在线率(%)" align="center">
                    <template slot-scope="scope">
                        <el-tag
                            v-if="scope.row.integrity >= 90 && scope.row.integrity !== 3.14159"
                            style="color: #fff; background: #396"
                        >
                            {{ scope.row.integrity }}
                        </el-tag>
                        <el-tag
                            v-if="scope.row.integrity < 60 && scope.row.integrity !== 3.14159"
                            style="color: #fff; background: #c00"
                        >
                            {{ scope.row.integrity }}
                        </el-tag>
                        <el-tag
                            v-if="
                                scope.row.integrity < 90 && scope.row.integrity >= 60 && scope.row.integrity !== 3.14159
                            "
                            style="color: #fff; background: #fc3"
                        >
                            {{ scope.row.integrity }}
                        </el-tag>
                        <el-tag v-if="scope.row.integrity === 3.14159" style="color: #fff; background: #ccc">
                            暂无数据
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>
<script>
import { getheight } from '@/assets/commjs/common'
import api from '@/api/energy/sysconfig'
import timepicker from '../../components/TimePicker/index4'
export default {
    data() {
        return {
            device: 1,
            loading: true,
            tableheight: undefined,
            tableData: [],
            tablename: 'tab1',
            treenode: '',
            interval: 4,
            formData: {},
            formInline: {
                user: '',
                region: ''
            }
        }
    },
    components: {
        timepicker
    },
    created() {},
    mounted() {
        this.device = window.devicePixelRatio
        this.tableheight = window.sessionStorage.getItem('appheight') - 65
    },
    methods: {
        //时间格式转化
        dateFormat(dateData1, dateData2) {
            var timearr = []
            var date = new Date(dateData1)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? '0' + m : m
            var d = date.getDate()
            d = d < 10 ? '0' + d : d
            var h = date.getHours()
            h = h < 10 ? '0' + h : h
            var f = date.getMinutes()
            f = f < 10 ? '0' + f : f
            var s = date.getSeconds()
            s = s < 10 ? '0' + s : s
            this.formData.startTime = y + '-' + m + '-' + d
            timearr.push(this.formData.startTime)
            var date = new Date(dateData2)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? '0' + m : m
            var d = date.getDate()
            d = d < 10 ? '0' + d : d
            var h = date.getHours()
            h = h < 10 ? '0' + h : h
            var f = date.getMinutes()
            f = f < 10 ? '0' + f : f
            var s = date.getSeconds()
            s = s < 10 ? '0' + s : s
            this.formData.endTime = y + '-' + m + '-' + d
            timearr.push(this.formData.endTime)
            return timearr
        },
        querfromdata(data, timehbValue, interval) {
            this.interval = interval
            this.loading = true
            this.timeValue = data
            console.log('日期' + this.timeValue)
            this.timehuanbiValue = timehbValue
            console.log('环比' + this.timehuanbiValue)
            this.periodBeginTime = this.timehuanbiValue[0]
            this.periodEndTime = this.timehuanbiValue[1]
            console.log('开始' + this.periodBeginTime)
            console.log('结束' + this.periodEndTime)
            this.ping = this.periodBeginTime + '至' + this.periodEndTime
            this.dateFormat(this.timeValue[0], this.timeValue[1])
            // this.time = this.formData.searchBeginTime+'至'+this.formData.searchEndTime
            api.getOnlineRateTree(this.formData).then(res => {
                if (res.code === 'A0000') {
                    this.tableData = res.data
                    this.loading = false
                }
            })
        }
    }
}
</script>
<style scoped></style>
