<template>
    <div class="Inspection">
        <div>
            <el-row>
                <el-col :span="24">
                    <el-form ref="form" :inline="true" :model="form" class="demo-form-inline">
                        <el-form-item label="数据类型:">
                            <el-select v-model.trim="form.dataType" placeholder="请选择数据类型" @change="onSubmit" disabled>
                                <el-option v-for="item in networkList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="监测点名称:">
                            <el-input clearable v-model="form.searchValue" placeholder="请输入监测点名称"></el-input>
                        </el-form-item>
                        <el-form-item label="监测点状态:">
                            <el-select clearable v-model.trim="form.monitorState" placeholder="请选择监测点状态">
                                <el-option v-for="item in options" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="监测点类型:" v-if="activeName == 3">
                            <el-select clearable v-model.trim="form.treeType" placeholder="请选择监测点类型">
                                <el-option v-for="item in Subcategory" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit" class="ml10" size="small" icon="el-icon-search">
                                查询
                            </el-button>

                            <!-- <el-button type="primary" icon="el-icon-download">导出</el-button> -->
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-left: 0; position: relative">
                <i v-if="colSpan == 24" class="el-icon-caret-right" @click="colSpan = 19"></i>
                <el-col v-show="colSpan != 24" class="left" :style="'height:' + (vh + 55) + 'px;'" :span="5">
                    <i class="el-icon-caret-left" v-if="colSpan == 19" @click="colSpan = 24"></i>
                    <el-input placeholder="输入关键字进行过滤" clearable v-model="filterText"
                        style="margin-bottom: 10px"></el-input>

                    <el-tree class="treeEl" :highlight-current="true" :expand-on-click-node="false"
                        :style="'height: ' + (vh - 10) + 'px;overflow-y: auto;'" :data="treeData" :props="defaultProps"
                        node-key="id" default-expand-all :filter-node-method="filterNode" @node-click="handleNodeClick"
                        ref="tree" v-loading="loadingTree"></el-tree>
                </el-col>
                <el-col :span="colSpan" style="padding-right: 0">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="Ⅰ类监测点" name="1">
                            <div v-if="activeName == 1">
                                <el-table stripe highlight-current-row v-loading="loading" :data="tableData" border
                                    style="width: 100%" :height="vh - 35" header-cell-class-name="table_header"
                                    :header-cell-style="thStyleFun" :cell-style="cellStyleFun">
                                    <el-table-column show-overflow-tooltip label="序号" width="60">
                                        <template scope="scope">
                                            <span>{{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column show-overflow-tooltip prop="name" label="监测点名称"
                                        min-width="200"></el-table-column>

                                    <el-table-column show-overflow-tooltip prop="orgName" label="组织机构名称"
                                        width="200"></el-table-column>
                                    <el-table-column show-overflow-tooltip prop="operationName" label="运维单位名称"
                                        min-width="200"></el-table-column>
                                    <el-table-column show-overflow-tooltip prop="powerrName" label="变电站名称"
                                        min-width="200"></el-table-column>

                                    <el-table-column show-overflow-tooltip prop="lineName" label="监测线路名称"
                                        min-width="120"></el-table-column>

                                    <el-table-column show-overflow-tooltip prop="voltageLevel" label="电压等级"
                                        min-width="100" :formatter="formFilter"></el-table-column>
                                    <el-table-column show-overflow-tooltip prop="monitorState" label="监测点状态"
                                        min-width="120" :formatter="formFilter"></el-table-column>
                                    <el-table-column show-overflow-tooltip prop="monitorType" label="监测点类型"
                                        min-width="120" :formatter="formFilter"></el-table-column>
                                    <el-table-column show-overflow-tooltip prop="minShortCircuitCapacity" label="最小短路容量"
                                        min-width="140"></el-table-column>
                                    <el-table-column show-overflow-tooltip prop="powerSupplyEqCapacity" label="供电设备容量"
                                        min-width="120"></el-table-column>
                                    <el-table-column show-overflow-tooltip prop="userAgreementCapacity" label="用户协议容量"
                                        min-width="150"></el-table-column>
                                    <el-table-column show-overflow-tooltip prop="voltageDeviationUpperLimit"
                                        label="电压偏差限值（上）" min-width="180"></el-table-column>
                                    <el-table-column show-overflow-tooltip prop="voltageDeviationLowerLimit"
                                        label="电压偏差限值（下）" min-width="180"></el-table-column>
                                    <el-table-column show-overflow-tooltip prop="potentialTransFormerType"
                                        label="电压互感器类型" min-width="140" :formatter="formFilter"></el-table-column>
                                    <el-table-column show-overflow-tooltip prop="neutralGroundingMode" label="中性点接地方式"
                                        min-width="150" :formatter="formFilter"></el-table-column>
                                    <el-table-column show-overflow-tooltip prop="isSpecialSupplyElectricity"
                                        label="是否用户专线" min-width="150">
                                        <template slot-scope="scope">
                                            <span>{{ scope.row.isSpecialSupplyElectricity == 1 ? '是' : '否' }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column show-overflow-tooltip prop="monitorTag" label="监测点标签"
                                        min-width="150" :formatter="formFilter" />
                                    <el-table-column show-overflow-tooltip prop="monitorObjectType" label="监测对象类型"
                                        min-width="150" :formatter="formFilter" />
                                    <el-table-column show-overflow-tooltip prop="monitorObjectName" label="监测对象名称"
                                        min-width="150" :formatter="formFilter" />
                                    <el-table-column show-overflow-tooltip prop="statisticalInterval" label="统计间隔"
                                        min-width="150" />
                                    <el-table-column show-overflow-tooltip prop="terminalId" label="关联的监测终端编号"
                                        min-width="180" />
                                    <el-table-column show-overflow-tooltip prop="terminalWiringMethod" label="监测终端接线方式"
                                        min-width="150" :formatter="formFilter" />
                                    <el-table-column show-overflow-tooltip prop="isUpToGrid" label="是否上送网公司监测点"
                                        min-width="180">
                                        <template slot-scope="scope">
                                            <span>{{ scope.row.isUpToGrid == 1 ? '是' : '否' }}</span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column fixed="right" label="操作" min-width="260">
                                        <template slot-scope="scope">
                                            <el-button type="primary" icon="el-icon-view" size="mini"
                                                @click="ViewReport(scope.row, 0)">
                                                稳态报表
                                            </el-button>
                                            <el-button type="primary" @click="ViewReport(scope.row, 1)"
                                                icon="el-icon-view" size="mini">
                                                暂态报告
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                    <!-- <el-table-column show-overflow-tooltip prop="whether" label="是否应设点" min-width="100">
            </el-table-column> -->
                                </el-table>
                                <el-pagination background class="mt10" align="right" @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange" :current-page="form.pageNum"
                                    :page-sizes="[20, 30, 40, 50, 100]" :page-size="form.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
        </div>

        <terminalDialog v-if="dialogVisible4" ref="monitor4" :dialogVisible="dialogVisible4" :title="title"
            :formInline="formInline" @monitorClose="monitorClose" />
    </div>
</template>
<script>
import {
    typeTree,
    getOneMonitorByOrgId,
    getTwoMonitorByOrgId,
    getThreeYongMonitorByOrgId,
    getPvDeviceById,
    delDistributionMonitor
} from '@/api/AccountOperation'

import terminalDialog from '@/views/Account-management/components/StandingBook/terminalDialog.vue'

import { dicData } from '@/assets/commjs/dictypeData'

export default {
    components: {
        terminalDialog
    },
    props: {},
    name: 'InspectionPoint',
    data() {
        return {
            value: 0,
            colSpan: 19,
            vh: 0,
            activeName: '1',

            title: '',
            loading: false,
            loadingTree: true,
            formInline: {},
            flag: true,
            form: {
                dataType: 0,
                searchValue: '',
                monitorState: '',
                orgId: '',
                treeType: 0,
                pageNum: 1,
                pageSize: 20
            },
            Subcategory: [
                {
                    id: 0,
                    name: '用电用户'
                },
                {
                    id: 1,
                    name: '发电用户'
                }
            ],
            networkList: [
                {
                    id: 0,
                    name: '主网数据类型'
                },
                {
                    id: 1,
                    name: '配网数据类型'
                }
            ],

            breadList: [], //存储树点击的父节点
            options: [],
            // 监测点类型 数组
            typeList: [],
            tableHeaderPhotovoltaicaccount: [], //编号弹框表格数据
            photovoltaicAccountData: [],
            PMSobtain: false, //编号开关
            dialogVisible1: false, //弹框开关
            dialogVisible2: false, //弹框开关
            dialogVisible3: false, //弹框开关
            shwoMainNetworkAddition: false,
            MainNetworkAddition: false,
            dialogVisible4: false, //弹框开关
            dialogVisible5: false, //弹框开关
            tableData: [],
            multipleSelection: [], //表格多选
            filterText: '',
            treeData: [],
            treeList: null, //保存 树点击节点
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            total: 0
        }
    },
    created() {
        this.Dictionaries()
        this.operationTree()
    },

    mounted() {
        this.options = dicData('Line_State', [])
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.vh = window.sessionStorage.getItem('appheight') - 185
        },
        Dictionaries() {
            // getDicDataByTypeName({ dictTypeName: "监测点类型  " }).then((res) => {
            //   this.typeList = res.data;
            // });
        },

        // 树查询
        async operationTree() {
            this.loadingTree = true
            const data = await typeTree()
            this.treeData = data.data
            this.treeList = this.treeData[0]
            setTimeout(() => {
                this.$refs.tree.setCurrentKey(this.treeData[0].id)
                this.onSubmit()
            }, 0)

            this.loadingTree = false
        },

        handleClick(tab, event) {
            this.form.pageNum = 1
            this.form.pageSize = 20
            this.multipleSelection = []
            this.onSubmit()
        },

        success() {
            this.onSubmit()
            this.monitorClose()
        },
        // 监测点终端名称
        nameClick(row) {
            getPvDeviceById({ id: row.devId }).then(res => {
                this.formInline = res.data
                this.dialogVisible4 = true
            })

            this.title = '电能质量在线监测装置信息 '
        },

        // 弹框关闭
        monitorClose() {
            this.dialogVisible1 = false
            this.dialogVisible2 = false
            this.dialogVisible3 = false
            this.dialogVisible4 = false
            this.shwoMainNetworkAddition = false
            this.MainNetworkAddition = false
            this.PMSobtain = false
            this.onSubmit()
        },
        // 表格查询
        onSubmit() {
            this.form.orgId = this.treeList.id
            this.flag = this.form.treeType == 0 ? false : true

            this.loading = true
            if (this.activeName == 1) {
                getOneMonitorByOrgId(this.form).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total
                    this.loading = false
                })
            } else if (this.activeName == 2) {
                getTwoMonitorByOrgId(this.form).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total
                    this.loading = false
                })
            } else if (this.activeName == 3) {
                // getThreeYongMonitorByOrgId
                getThreeYongMonitorByOrgId(this.form).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total
                    this.loading = false
                })
            }

            // if (this.treeList != null) {
            //   this.form.id = this.treeList.id;
            //   this.form.level = this.treeList.level;
            // }
            // pvLineDetail(this.form).then((res) => {
            //   this.tableData = res.data.records;
            //   this.total = res.data.total;

            // });
        },
        // 新增关闭
        close() {
            this.flg = true
        },
        // 树过滤
        filterNode(value, data, node) {
            if (!value) {
                return true
            }
            let _array = [] //这里使用数组存储 只是为了存储值。
            this.getReturnNode(node, _array, value)
            let result = false
            _array.forEach(item => {
                result = result || item
            })
            return result
        },
        getReturnNode(node, _array, value) {
            let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
            isPass ? _array.push(isPass) : ''
            this.index++
            if (!isPass && node.name != 1 && node.parent) {
                this.getReturnNode(node.parent, _array, value)
            }
        },
        // 树点击事件
        handleNodeClick: function (data, node) {
            this.breadList = []
            this.treeList = data
            this.form.orgId = this.treeList.id
            let selectNode = this.$refs.tree.getNode(node) //  获取点击当节点的dom的信息

            this.getparentsNode(selectNode) //调用递归函数
        },
        // 递归
        getparentsNode(node) {
            if (!node.parent) {
                // for (let i = 0; i <= this.breadList.length; i++) {
                //   this.breadList[i] = `-` + this.breadList[i];
                // }
                this.breadList.forEach((item, ind) => {
                    this.breadList[ind] = ` > ` + item
                })
                this.breadList = this.breadList.join('')
                return
            }

            this.breadList.unshift(node.label)

            this.getparentsNode(node.parent) //调用递归
        },

        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.form.pageSize = val
            this.onSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.form.pageNum = val
            this.onSubmit()
        },

        handleClose() {
            this.dialogVisible5 = false
            this.value = ''
        },

        thStyleFun() {
            return 'text-align:center'
        },
        cellStyleFun() {
            return 'text-align:center'
        },
        // 数据过滤
        formFilter(row, column) {
            if (column.property == 'voltageLevel') {
                let title = ''
                dicData('Dev_Voltage', []).forEach(item => {
                    if (item.id == row.voltageLevel) {
                        title = item.name
                    }
                })
                return title
            } else if (column.property == 'monitorState') {
                let title = ''
                dicData('Line_State', []).forEach(item => {
                    if (item.id == row.monitorState) {
                        title = item.name
                    }
                })
                return title
            } else if (column.property == 'monitorType') {
                let title = ''
                dicData('Line_Type', []).forEach(item => {
                    if (item.id == row.monitorType) {
                        title = item.name
                    }
                })
                return title
            } else if (column.property == 'potentialTransFormerType') {
                let title = ''
                dicData('Voltage_Transformer', []).forEach(item => {
                    if (item.id == row.potentialTransFormerType) {
                        title = item.name
                    }
                })
                return title
            } else if (column.property == 'neutralGroundingMode') {
                let title = ''
                dicData('Neutral_Point', []).forEach(item => {
                    if (item.id == row.neutralGroundingMode) {
                        title = item.name
                    }
                })
                return title
            } else if (column.property == 'monitorObjectType') {
                let title = ''
                dicData('Monitoring_Labels', []).forEach(item => {
                    if (item.id == row.monitorObjectType) {
                        title = item.name
                    }
                })
                return title
            } else if (column.property == 'terminalWiringMethod') {
                let title = ''
                dicData('Dev_Connect', []).forEach(item => {
                    if (item.id == row.terminalWiringMethod) {
                        title = item.name
                    }
                })
                return title
            } else if (column.property == 'monitorTag') {
                let title = ''
                dicData('Monitoring_Labels', []).forEach(item => {
                    if (item.id == row.monitorTag) {
                        title = item.name
                    }
                })
                return title
            } else if (column.property == 'regionalism') {
                let title = ''
                dicData('Area', []).forEach(item => {
                    if (item.id == row.regionalism) {
                        title = item.name
                    }
                })
                return title
            } else if (column.property == 'state') {
                let title = ''
                dicData('Line_State', []).forEach(item => {
                    if (item.id == row.state) {
                        title = item.name
                    }
                })

                return title
            } else if (column.property == 'userType') {
                let title = ''
                dicData('User_Class', []).forEach(item => {
                    if (item.id == row.userType) {
                        title = item.name
                    }
                })

                return title
            } else if (column.property == 'industryType') {
                let title = ''
                dicData('Business_Type', []).forEach(item => {
                    if (item.id == row.industryType) {
                        title = item.name
                    }
                })

                return title
            } else if (column.property == 'electricityType') {
                let title = ''
                dicData('Ele_Class', []).forEach(item => {
                    if (item.id == row.electricityType) {
                        title = item.name
                    }
                })

                return title
            } else if (column.property == 'productionShift') {
                let title = ''
                dicData('Production_Shifts', []).forEach(item => {
                    if (item.id == row.productionShift) {
                        title = item.name
                    }
                })

                return title
            } else if (column.property == 'loadNature') {
                let title = ''
                dicData('Load_Type', []).forEach(item => {
                    if (item.id == row.loadNature) {
                        title = item.name
                    }
                })

                return title
            } else if (column.property == 'highIndustryType') {
                let title = ''
                dicData('High_Cate', []).forEach(item => {
                    if (item.id == row.highIndustryType) {
                        title = item.name
                    }
                })

                return title
            } else if (column.property == 'importanceLevel') {
                let title = ''
                dicData('Importance_Level', []).forEach(item => {
                    if (item.id == row.importanceLevel) {
                        title = item.name
                    }
                })

                return title
            } else if (column.property == 'eccStat') {
                let title = ''
                dicData('Ecc_Stat', []).forEach(item => {
                    if (item.id == row.eccStat) {
                        title = item.name
                    }
                })

                return title
            } else if (column.property == 'sensitiveType') {
                let title = ''
                dicData('Sensitive_User_Type', []).forEach(item => {
                    if (item.id == row.sensitiveType) {
                        title = item.name
                    }
                })

                return title
            } else if (column.property == 'connectionMode') {
                let title = ''
                dicData('Connection_Mode', []).forEach(item => {
                    if (item.id == row.connectionMode) {
                        title = item.name
                    }
                })

                return title
            } else if (column.property == 'gcStat') {
                let title = ''
                dicData('Ecc_Stat', []).forEach(item => {
                    if (item.id == row.gcStat) {
                        title = item.name
                    }
                })

                return title
            } else {
                return row[column.property]
            }
        },
        // 查看报表
        ViewReport(row, flag) {
            if (this.form.dataType == 0) {
                // 主网
                this.$emit('ViewReport', row.id, flag)
                // this.$router.push({
                //   path: "/Statistical-analysis/statisticalReport",
                //   name: "statisticalReport",
                //   params: {
                //     id: row.id,
                //   },
                // });
            } else {
                // 配网
                this.$router.push({
                    path: '/Distributionnetwork-analysis/StatisticalReport',
                    name: 'StatisticalReport',
                    params: {
                        id: row.id
                    }
                })
            }
        }
    },

    computed: {},

    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');

::v-deep .el-dialog .el-dialog__body {
    padding: 10px;
}

::v-deep .el-table .cell {
    text-align: center;
}

.Inspection {
    margin-right: 10px;

    // box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}

// 表格斑马自定义颜色

// .demo-form-inline{
//     overflow: hidden; /* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */
//     transition: all 1s; /* 从最初到鼠标悬停时的过渡 */
//     // border: 1px solid #000;

// }</style>
<style lang="scss" scoped>
.left {
    position: relative;
    padding: 10px 0;
    // overflow-y: auto;
    border: 1px solid #006565 !important;

    .el-icon-caret-left {
        position: absolute;
        top: 50%;
        right: -5px;
        font-size: 16px;
        cursor: pointer;
    }
}

.el-icon-caret-right {
    position: absolute;
    top: 50%;
    left: -5px;
    cursor: pointer;
    font-size: 16px;
}

.tableName {
    color: $themeColor;
    text-decoration: underline;
}

// ::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
//     background-color: #dbf6f6 !important;
//   }
// ::v-deep.el-table__body tr.current-row > td {
//     background: $themeColor !important;
//   }
// ::v-deep.el-table .el-table__body tr.current-row>td, .el-table.el-table--d .el-table__body tr.el-table__row--d.current-row td {
//     background: $themeColor !important;
//     color:#fff
// }
// ::v-deep.el-table__row .hover-row {
//   background: $themeColor !important;
//   color:#fff
// }
// ::v-deep.el-table__row .el-table__row--d .hover-row {
//   background: $themeColor !important;
//   color:#fff}
/*滚动条样式*/
// 鼠标经过颜色改为粉红色
// ::v-deep.el-table__body tr:hover>td{

// background-color: pink !important;

// }

// // 点击之后颜色改为粉红色  如果没有效果 需要给el-table  加上  highlight-current-row  这个属性
// ::v-deep.el-table__body tr.current-row>td{

// background-color: pink !important;

// }
// .treeEl::-webkit-scrollbar {
//   width: 8px;
// }
// .treeEl::-webkit-scrollbar-thumb {
//   border-radius: 4px; /*滚动条的圆角*/
//   background-color: $themeColor; /*滚动条的背景颜色*/
//   opacity: 0.8;
// }
// .treeEl::-webkit-scrollbar-track {
//   box-shadow: inset 0 0 5px rgb(174, 173, 173);
//   border-radius: 2px;
//   background: rgb(177, 175, 175);
// }</style>
