<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-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" >
          <el-table-column align="center" prop="name" label="区域" width="180"></el-table-column>
          <el-table-column align="center"  prop="lx" label="类型"></el-table-column>
          <el-table-column align="center" prop="flx" label="分类型"></el-table-column>
          <el-table-column align="center" prop="bdzgs" label="变电站个数"></el-table-column>
          <el-table-column align="center" prop="zdgs" label="终端个数"></el-table-column>
          <el-table-column align="center" prop="jcdgs" label="监测个数"></el-table-column>
           :header-cell-style="{background:'#6d7f93',color:'white'}"
    </el-table> -->

        <el-table
            class="xshou"
            :data="ptableDate"
            align="center"
            border
            :height="`${vth}`"
            highlight-current-row
            header-cell-class-name="table_header"
            :style="`height:${vh}`"
            :span-method="objectOneMethod"
        >
            <el-table-column width="80" align="center" show-overflow-tooltip prop="num" label="序号"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="name" label="区域"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="lx" label="类型"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="flx" label="分类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.lx == '标准电压等级'">{{ scope.row.flx }}kV</span>
                    <span v-else>{{ scope.row.flx }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="bdzgs" label="变电站个数(个)">
                <template slot-scope="scope">
                    <span style="color: blue">{{ scope.row.bdzgs }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="zdgs" label="终端个数(个)">
                <template slot-scope="scope">
                    <span style="color: #08c0c0">{{ scope.row.zdgs }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="jcdgs" label="监测点个数(个)">
                <template slot-scope="scope">
                    <span style="color: rgb(8, 201, 8)">{{ scope.row.jcdgs }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { mapActions } from 'vuex'
import store from '@/store'
import defaultSettings from '@/settings'
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: {
        settings() {
            return this.$store.state.settings
        },
        ...mapActions({
            changeSetting: 'settings/changeSetting'
        })
        // 实时监听表格
        // 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 {
            vh: null,
            vth: null,
            search: '',
            typedata: '电网拓扑',
            tableheight: undefined,
            device: 1,
            tableData: []
        }
    },
    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 = '干扰源类型'
            }
        }
    },
    props: {
        classvalue: {
            type: String,
            default: undefined
        },
        ptableDate: {
            type: Array,
            default: []
        },
        loading: {
            type: Boolean,
            default: false
        }
    },
    components: {
        pagination
    },
    created() {},
    mounted() {
        //this.device=window.devicePixelRatio

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 55 + 'px'
            this.vth = window.sessionStorage.getItem('appheight') - 55
        },
        //判断计算合并单元格
        objectOneMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 1) {
                const _row = this.setTable(this.ptableDate).one[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
            if (columnIndex === 2) {
                const _row = this.setTable(this.ptableDate).two[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
        },
        //设置表格
        setTable(tableData) {
            let spanOneArr = [],
                spanTwoArr = [],
                concatOne = 0,
                concatTwo = 0
            tableData.forEach((item, index) => {
                if (index === 0) {
                    spanOneArr.push(1)
                    spanTwoArr.push(1)
                } else {
                    if (item.name === tableData[index - 1].name) {
                        //第一列需合并相同内容的判断条件
                        spanOneArr[concatOne] += 1
                        spanOneArr.push(0)
                    } else {
                        spanOneArr.push(1)
                        concatOne = index
                    }
                    if (item.lx === tableData[index - 1].lx) {
                        //第二列和需合并相同内容的判断条件
                        spanTwoArr[concatTwo] += 1
                        spanTwoArr.push(0)
                    } else {
                        spanTwoArr.push(1)
                        concatTwo = index
                    }
                }
            })
            return {
                one: spanOneArr,
                two: spanTwoArr
            }
        },
        // 判断是否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
        },
        sortchange() {}
    }
}
</script>
<style scoped>
.xshou {
    cursor: pointer;
}
</style>
<style lang="scss" scoped>
// ::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
//   background: #ffffff00 !important;
//   color: #000 !important;
// }
</style>
