<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <Timeinterval ref="interval" :interval="3"></Timeinterval>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="administratione">查询</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="text" @click="closeHandle">
                            条件筛选
                            <i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                        </el-button>
                    </el-form-item>
                </el-form>
                <div class="container" id="container">
                    <i @click="closeHandle" class="el-icon-circle-close coles"></i>
                    <el-form :inline="true" :model="form" label-width="90px" class="">
                        <Area @click="handleNodeClick" class="box"></Area>

                        <!-- <div style="display: flex;"> -->
                        <el-form-item label="终端状态:" class="box">
                            <el-select
                                v-model.trim="form.runFlag"
                                placeholder="请选择终端状态"
                                multiple
                                collapse-tags
                                clearable
                            >
                                <el-option
                                    v-for="item in terminalStatus"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="通讯状态:" class="box">
                            <el-select
                                v-model.trim="form.comFlag"
                                placeholder="请选择通讯状态"
                                multiple
                                collapse-tags
                                clearable
                            >
                                <el-option
                                    v-for="item in communication"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="厂家:" class="box">
                            <el-select
                                v-model.trim="form.manufacturer"
                                placeholder="请选择厂家"
                                multiple
                                collapse-tags
                                clearable
                            >
                                <el-option
                                    v-for="item in manufactor"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="{
                                        label: item.name,
                                        value: item.id,
                                        name: item.name,
                                        id: item.id,
                                        code: item.code,
                                        sort: item.sort
                                    }"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="筛选数据:">
                            <el-input
                                style="width: 300px"
                                v-model.trim="form.searchValue"
                                placeholder="根据变电站,终端编号,型号或网络参数查询"
                                clearable
                                class="text"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <template>
                    <!-- <div style="float: right; margin-right: 5px">
            <span style="font-weight: 600">终端评价说明:&nbsp;</span>
            <span style="color: green">在线率≥90%：优&nbsp;&nbsp;</span>
            <span style="color: orange">60%<在线率<90%：良&nbsp;&nbsp;</span>
            <span style="color: red">在线率<60%：差</span>
          </div> -->
                    <el-table
                        stripe
                        :data="
                            administrationeData.slice((form.pageNum - 1) * form.pageSize, form.pageNum * form.pageSize)
                        "
                        :height="height"
                        border
                        style="width: 100%"
                        header-cell-class-name="table_header"
                        highlight-current-row
                    >
                        <el-table-column prop="number" label="序号" width="80">
                            <template scope="scope">
                                <span>{{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <template v-for="(item, index) in tableHeaderAdministration">
                            <el-table-column
                                v-if="item.prop == 'onlineEvaluate'"
                                :prop="item.prop"
                                :label="item.label"
                                :key="index"
                                :min-width="item.width"
                                show-overflow-tooltip
                                :sort-method="sortJ"
                                sortable
                            >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.onlineEvaluate == null">/</span>
                                    <el-tag
                                        v-else-if="scope.row.onlineEvaluate * 100 < 60"
                                        style="color: #cc0000; font-weight: bold"
                                    >
                                        差
                                    </el-tag>
                                    <el-tag
                                        v-else-if="
                                            90 > scope.row.onlineEvaluate * 100 && scope.row.onlineEvaluate * 100 > 60
                                        "
                                        style="color: #ffcc33; font-weight: bold"
                                    >
                                        良
                                    </el-tag>
                                    <el-tag
                                        v-else-if="scope.row.onlineEvaluate * 100 > 90"
                                        style="color: #339966; font-weight: bold"
                                    >
                                        优
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column
                                v-else
                                :prop="item.prop"
                                :label="item.label"
                                :key="index"
                                :min-width="item.width"
                                show-overflow-tooltip
                                :sortable="item.sortable"
                            ></el-table-column>
                        </template>
                    </el-table>
                    <el-pagination
                        align="right"
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="form.pageNum"
                        :page-sizes="[20, 30, 40, 50]"
                        :page-size="form.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        class="mt10"
                    ></el-pagination>
                </template>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getAdministrationeData, getRuntimeData, dictDataCacheData } from '@/api/administratione'
import { dicData } from '@/assets/commjs/dictypeData'
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/TimePicker/index4'
export default {
    components: { Area, Timeinterval },
    data() {
        return {
            vh: '',
            view: false,
            form: {
                runFlag: [],
                comFlag: [],
                manufacturer: '',
                deptIndex: '',
                pageNum: 1,
                pageSize: 20,
                serverName: 'event-boot',
                searchBeginTime: '',
                searchEndTime: '',
                searchValue: '',
                statisticalType: {}
            },
            item: ['', ''],
            height: null,
            isLoading: false,
            //终端状态数据
            terminalStatus: [
                {
                    id: 0,
                    label: '投运'
                },
                {
                    id: 1,
                    label: '热备用'
                },
                {
                    id: 2,
                    label: '停运'
                }
            ],
            //通讯状态状态数据
            communication: [
                {
                    id: 1,
                    label: '正常'
                },
                {
                    id: 0,
                    label: '中断'
                }
            ],
            //厂家数据
            manufactor: [],
            //监测覆盖率报表表头
            tableHeaderAdministration: [
                { prop: 'areaName', label: '区域', width: 100 },
                { prop: 'gdName', label: '供电公司' },
                { prop: 'bdName', label: '变电站' },
                { prop: 'devName', label: '终端编号' },
                { prop: 'loginTime', label: '投运时间', sortable: true, width: 110 },
                { prop: 'manufacturer', label: '厂家' },
                { prop: 'devType', label: '型号' },
                { prop: 'ip', label: '网络参数', width: 150 },
                { prop: 'port', label: '端口' },
                { prop: 'runFlag', label: '终端状态' },
                { prop: 'comFlag', label: '通讯状态' },
                { prop: 'updateTime', label: '最新数据', width: 160, sortable: true },
                { prop: 'onlineEvaluate', label: '评价' }
            ],
            administrationeData: [],
            device: '',
            total: 0
        }
    },
    created() {
        this.form.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        // this.getDictDataCache();
        this.getclassificationData()
    },
    mounted() {
        this.device = window.devicePixelRatio

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.administratione()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 158
        },
        sortJ(a, b) {
            return (
                (a.onlineEvaluate == null ? -1 : a.onlineEvaluate) - (b.onlineEvaluate == null ? -1 : b.onlineEvaluate)
            )
        },
        //获取类型
        getclassificationData() {
            //厂家
            this.manufactor = dicData('Dev_Manufacturers', [])
        },
        //序号
        rowClassName({ row, rowIndex }) {
            row.number = rowIndex + 1
        },
        // 切换选项
        handleNodeClick(data) {
            // console.log(data);
            this.form.deptIndex = data.id
        },
        closeHandle() {
            if (this.view) {
                this.view = false
            } else {
                this.view = true
            }
            //console.log('关闭和展开');
            const dom = document.getElementById('container')
            const closeDom = document.getElementsByClassName('close')[0]
            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
                dom.className = 'container expend'
            } else {
                dom.className = 'container close-container'
            }
        },
        //方法调用终端运行管理数据接口
        administratione() {
            this.$emit('Loading', true)
            ;(this.form.pageNum = 1), (this.item = this.$refs.interval.timeValue)
            this.form.searchBeginTime = this.item[0]
            this.form.searchEndTime = this.item[1]
            getRuntimeData(this.form).then(res => {
                this.$emit('Loading', false)
                // console.log(res);
                this.administrationeData = res.data
                this.total = res.data.length
            })
        },
        cellStyle(row) {
            if (row.columnIndex == 10) {
                if (row.row.runFlag == '投运') {
                    return 'color:green;'
                }
            }
            if (row.columnIndex == 11) {
                if (row.row.comFlag == '中断') {
                    return 'color:red;'
                } else if (row.row.comFlag == '正常') {
                    return 'color:green;'
                }
            }
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.form.pageSize = val
            // this.administratione();
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.form.pageNum = val
            // this.administratione();
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    // padding: 10px;
}
::v-deep .box {
    .el-input {
        width: 150px;
    }
}
::v-deep .el-pagination__editor {
    width: 50px;
}
.text {
    width: 210px;
}
.container {
    /* margin: auto; */
    top: 0px;
    right: 0;
    width: 50%;
    height: 0px;
    z-index: 2000;
    position: absolute;
    background-color: #e4e7ebb9;
    overflow: auto;
    scroll-behavior: smooth;
    -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: block;
}
.expend {
    animation: expend ease 5s forwards;
}
.close-container {
    animation: no-expend ease 1s forwards;
}
@keyframes expend {
    from {
        top: 0px;
        height: auto;
    }
    to {
        height: auto;
        top: 0px;
    }
}
@keyframes no-expend {
    from {
        height: 20%;
        top: 0px;
    }
    to {
        top: 0px;
        height: 0px;
    }
}
.coles {
    position: absolute;
    right: 0;
    font-size: 20px;
    cursor: pointer;
}
</style>
