<template>
    <div>
        <!-- 过滤筛选: <el-input v-model="search" clearable size="small" style="width: 250px" placeholder="筛选数据"/>
     <el-button @click="exportExcel" style="float:right;margin-bottom:10px" size="small" type="primary">导出Excel文件</el-button>
    <el-button @click="exporeCSV(tables)" size="small" type="primary" style="float:right;margin-right:10px;margin-bottom:10px">导出CSV文件</el-button> -->
        <el-select
            v-show="false"
            v-model="ExpandedNum"
            @change="handleExpandNumChange"
            placeholder="选择展开级别"
            size="mini"
            style="width: 100px; left: 0px"
        >
            <el-option label="不展开" :value="0"></el-option>
            <el-option label="展开1" :value="1"></el-option>
            <el-option label="展开2" :value="2"></el-option>
            <el-option label="展开3" :value="3"></el-option>
        </el-select>
        <u-table
            stripe
            class="xshou"
            ref="plTreeTable"
            header-cell-class-name="table_header"
            fixed-columns-roll
            :data="tableData"
            :row-height="rowHeight"
            :height="vth"
            :treeConfig="{
                children: 'children',
                iconClose: 'el-icon-arrow-right',
                iconOpen: 'el-icon-arrow-down',
                expandAll: true
            }"
            @toggle-tree-expand="toggleTreeExpand"
            use-virtual
            row-id="id"
            border
        >
            <u-table-column
                min-width="200"
                prop="name"
                :label="typedata"
                :treeNode="true"
                :showOverflowTooltip="true"
                :show-overflow-tooltip="true"
            ></u-table-column>
            <!-- <u-table-column min-width='150' align="center" prop="voltageLevel" v-if="dydj" label="电压等级" sortable >
                                   <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="120" 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="80"
                align="center"
                prop="dataName"
                :show-overflow-tooltip="true"
                label="终端名称"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.dataName == null" type="primary" size="small">/</span>
                    <span v-if="scope.row.dataName != null" type="primary" size="small">{{ scope.row.dataName }}</span>
                </template>
            </u-table-column>
            <u-table-column min-width="80" 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="deviceName" label="终端名称" sortable >
                                    <template slot-scope="scope">
                                      <span v-if="(scope.row.deviceName==null)" type="primary" size="small">/</span>
                                      <span v-if="(scope.row.deviceName!=null)" type="primary" size="small">{{scope.row.deviceName}}</span>
                                     
                                    </template>
                                </u-table-column> -->
            <u-table-column min-width="80" align="center" prop="state" label="通讯状态" sortable>
                <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: #cc0000; color: #fff"
                        size="small"
                    >
                        中断
                    </el-tag>
                    <el-tag
                        type="primary"
                        v-if="scope.row.comFlag == 1"
                        style="background: #339966; color: #fff"
                        size="small"
                    >
                        正常
                    </el-tag>
                </template>
            </u-table-column>
            <u-table-column
                min-width="120"
                align="center"
                prop="updateTime"
                label="最新数据时间"
                :show-overflow-tooltip="true"
                sortable
            >
                <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="80" align="center" prop="onlineRate" label="在线率(%)" sortable>
                <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="80" align="center" prop="valueOver" label="评估" sortable>
                <template slot-scope="scope">
                    <el-tag
                        v-if="scope.row.onlineRate == 3.14159"
                        type="primary"
                        size="small"
                        style="background: #cccccc; color: #fff"
                    >
                        暂无评估
                    </el-tag>
                    <el-tag
                        v-if="scope.row.onlineRate >= 90 && scope.row.onlineRate != 3.14159"
                        type="primary"
                        size="small"
                        style="background: #339966; color: #fff"
                    >
                        优秀
                    </el-tag>
                    <el-tag
                        v-if="
                            60 <= scope.row.onlineRate && scope.row.onlineRate < 90 && scope.row.onlineRate != 3.14159
                        "
                        type="primary"
                        size="small"
                        style="background: #ffcc33; color: #fff"
                    >
                        合格
                    </el-tag>
                    <el-tag
                        v-if="scope.row.onlineRate < 60 && scope.row.onlineRate != 3.14159"
                        type="primary"
                        size="small"
                        style="background: #cc0000; color: #fff"
                    >
                        不合格
                    </el-tag>
                </template>
            </u-table-column>
        </u-table>
        <!-- <pagination :pageData="pageData" @changePageNum="changePageNum" @changePageSize="changePageSize"></pagination> -->
    </div>
</template>
<script>
// import {getheight} from '../../assets/commjs/common'
// import pagination from '../components/pagination/index'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import json2csv from 'json2csv'
export default {
    computed: {
        // 实时监听表格
        // tables: function() {
        //     const search = this.search
        //     if (search) {
        //         return this.tableData.filter(dataNews => {
        //             return Object.keys(dataNews).some(key => {
        //                 return String(dataNews[key]).toLowerCase().indexOf(search) > -1
        //             })
        //         })
        //     }
        //     return this.tableData
        // }
    },
    data() {
        return {
            vth: null,
            rowKey: 0,
            ExpandedNum: 3,
            rowHeight: 20,
            expandID: [],
            search: '',
            typedata: '电网拓扑',
            dydj: false,
            tableheight: undefined,
            pageData: {
                pageNum: 3,
                pageSize: 15,
                total: 100
            }
        }
    },
    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 = '终端厂家'
            } else if (a == 'Voltage_Level') {
                this.typedata = '电压等级'
            } else if (a == 'Load_Type') {
                this.typedata = '干扰源类型'
            }
        },
        tableData: function (a, b) {
            if (a.length > 0) {
                this.tableData = a
                //this.expandID=[]
                this.handleExpandNumChange()
            }
        }
    },

    components: {
        // pagination
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.handleExpandNumChange()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vth = window.sessionStorage.getItem('appheight') - 115 + 'px'
        },
        //判断需要展开层级
        handleExpandNumChange() {
            if (this.ExpandedNum > 0) {
                this.setExpandKeys(this.tableData)
            }
        },
        //层级展开递归方法
        setExpandKeys(dataList, n) {
            if (!n) n = 1
            for (let i = 0; i < dataList.length; i++) {
                if (n <= this.ExpandedNum) {
                    //this.expandID=[]
                    this.expandID.push(`${dataList[i].id}`)
                    if (dataList[i].hasOwnProperty('children')) {
                        const children = dataList[i].children
                        this.setExpandKeys(children, n + 1)
                    }
                }
            }
        },
        toggleTreeExpand() {},
        // 判断是否IE浏览器
        MyBrowserIsIE() {
            let isIE = false
            if (navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1) {
                // ie浏览器
                isIE = true
            }
            if (navigator.userAgent.indexOf('Trident') > -1) {
                // edge 浏览器
                isIE = true
            }
            return isIE
        },
        //创建a标签下载
        createDownLoadClick(content, fileName) {
            const link = document.createElement('a')
            link.href = encodeURI(content)
            link.download = fileName
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
        },
        exporeCSV(rows) {
            try {
                const result = json2csv.parse(rows, {
                    // fields: fields,
                    excelStrings: true
                })
                if (this.MyBrowserIsIE()) {
                    // IE10以及Edge浏览器
                    var BOM = '\uFEFF'
                    // 文件转Blob格式
                    var csvData = new Blob([BOM + result], { type: 'text/csv' })
                    navigator.msSaveBlob(csvData, `导出数据.csv`)
                } else {
                    let csvContent = 'data:text/csv;charset=utf-8,\uFEFF' + result
                    // 非ie 浏览器
                    this.createDownLoadClick(csvContent, `导出数据.csv`)
                }
            } catch (err) {
                alert(err)
            }
        },
        exportExcel() {
            /* generate workbook object from table */
            let wb = XLSX.utils.table_to_book(document.querySelector('#rebateSetTable'))
            /* get binary string as output */
            let wbout = XLSX.write(wb, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            })
            try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '数据表.xlsx')
            } catch (e) {
                if (typeof console !== 'undefined') {
                } //console.log(e, wbout);
            }
            return wbout
        },
        changePageNum(data) {
            this.pageData.pageNum = data
            alert('父组件当前页' + this.pageData.pageNum)
        },
        changePageSize(data) {
            this.pageData.pageSize = data
            alert('父组件当前条数' + this.pageData.pageSize)
        }
    }
}
</script>
<style lang="scss" scoped>
.xshou {
    cursor: pointer;
}
// ::v-deep .u-table__body-wrapper {
//     height: calc(100% - 30px) !important;
//     //overflow-x: scroll !important;
// }
// ::v-deep.plTableBox
//   .el-table--striped
//   .el-table__body
//   tr.el-table__row--striped
//   td {
//   background-color: $whirt !important;
// }
// ::v-deep.plTableBox
//   .el-table--striped
//   .el-table__body
//   tr.el-table__row--striped.current-row
//   td {
//   background-color: $current-blue !important;
//   color: #fff !important;
// }
</style>
