<template>
    <div class="pd10">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area"></Area>
            </el-form-item>

            <el-form-item style="margin-left: 15px">
                <Timeinterval :interval="3" ref="interval"></Timeinterval>
            </el-form-item>

            <el-form-item  label="监测点名称:" style="margin-left: 15px">
                <el-input v-model="form.userName" clearable placeholder="输入关键字搜索" style="width: 180px" />
            </el-form-item>

            <el-form-item label="完整性筛选:" style="margin-left: 15px">
                <el-select v-model.trim="form.limitValue" clearable collapse-tags placeholder="完整性筛选">
                    <el-option
                        v-for="item in limitValueList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="通讯状态:" style="margin-left: 15px">
                <el-select v-model.trim="form.comFlag" clearable collapse-tags placeholder="通讯状态">
                    <el-option
                        v-for="item in [{value:0,name:'中断'},{value:1,name:'正常'}]"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item style="margin-left: 15px">
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="pageListInit()">查询</el-button>
                <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
            </el-form-item>

        </el-form>

        <el-row>
            <el-col :span="24">
                <div :style="'height:' + height/2+'px;width:100%'" id="container"></div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <vxe-table
                    :data="pageData"
                    :height="height/2"
                    border
                    size="mini"
                    ref="workOrderTable"
                    @sort-change="sortChangeEvent"
                    style="width: 100%"
                    v-loading="isLoading"
                    stripe
                    show-overflow
                    header-cell-class-name="table_header"
                >

                    <template v-for="(item, index) in tableHeaderQualitystatistics">


                        <vxe-table-column
                            align="center"
                            :field="item.prop"
                            :title="item.label"
                            :key="index"
                            :sortable="item.sortable"
                            :min-width="item.width"
                            :formatter="tableDateFilter"
                        >
                            <template v-if="item.prop=='comFlag'" #default="{ row }">

                                <span>
                                <el-tag v-if="row[item.prop] == 1" type="success">正常</el-tag>
                                <el-tag v-else-if="row[item.prop] == 0" type="danger">中断</el-tag>
                                </span>

                            </template>
                        </vxe-table-column>
                    </template>


<!--                    <vxe-table-column
                        key="operate"
                        field=""
                        show-overflow
                        align="center"
                        title="操作"
                        min-width="200px"
                        fixed="right"
                    >
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="open(scope.row)">反馈填写</el-button>

                        </template>
                    </vxe-table-column>-->
                </vxe-table>
                <el-pagination
                    background
                    align="right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[20, 30, 40, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageData.length"
                    class="mt10"
                ></el-pagination>
            </el-col>

        </el-row>



        <el-dialog
            title="工单反馈信息填写"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form style="height: 200px" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                     class="demo-ruleForm pd10">
                <el-form-item label="处理措施" prop="handlingMeasures">
                    <el-input type="textarea" :rows="4" v-model="ruleForm.handlingMeasures"></el-input>
                </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>

import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/Timeinterval.vue'
import {pageList, feedBackAdd, receiveFeedbackInfo} from '@/api/workOrder/workOrder'
import {dicData} from "@/assets/commjs/dictypeData";
import { getMonitorIntegrity } from '@/api/Distributionnetwork/pwUser/pwUser'
import * as echarts from "echarts";
import TemplateFile from '@/views/components/templateFile.vue'
export default {
    components: { TemplateFile, Area, Timeinterval},
    data() {
        return {
            vh: '',
            height: null,
            isLoading: false,
            form: {
                searchEndTime: '',
                maintainerId: '',
                searchBeginTime: '',
                type: '',
                orderStatus:"",
                orgId:'',
                userName:'',
                limitValue:null,
                comFlag:null,
            },
            dialogVisible: false,
            ruleForm: {
                handlingMeasures: ''
            },
            rules: {
                handlingMeasures: [
                    {required: true, message: '请填写处理措施', trigger: 'blur'}
                ]
            },


            limitValueList: [
                {
                    value: 0.99,
                    name: '完整性小于99%'
                },
                {
                    value: 0.98,
                    name: '完整性小于98%'
                },
                {
                    value: 0.97,
                    name: '完整性小于97%'
                },
                {
                    value: 0.96,
                    name: '完整性小于96%'
                },
                {
                    value: 0.95,
                    name: '完整性小于95%'
                },
                {
                    value: 0.9,
                    name: '完整性小于90%'
                }
            ],
            multipleSelection:[],
            userTypeList:[],
            voltageLevelList:[],


            tableHeaderQualitystatistics: [
                {prop: 'id', label: '监测点编号', width: 180},
                {prop: 'name', label: '监测点名称', width: 180},
                {prop: 'orgName', label: '所属组织', width: 180},
                {prop: 'voltageLevel', label: '供电电压', width: 100},
                {prop: 'ifSensitiveUser', label: '是否敏感用户', width: 180},
                {prop: 'userType', label: '用户分类', width: 180},
                {prop: 'comFlag', label: '通讯状态', width: 180},
                {prop: 'integrityRate', label: '数据完整性(%)', width: 180,sortable:true},
            ],
            pageData: [],
            pageNum: 1, // 当前页码
            total: 0, // 总条数
            pageSize: 20 // 每页的数据条数
        }
    },
    created() {
        this.form.orgId = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.userTypeList = dicData("User_Class", [])
        this.voltageLevelList = dicData("Dev_Voltage", [])

        console.log(this.voltageLevelList)
    },
    mounted() {
        this.pageListInit()
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 110
        },
        //获取主网运行指标统计数据
        pageListInit() {
            this.isLoading = true
            this.form.searchBeginTime = this.$refs.interval.timeValue[0]
            this.form.searchEndTime = this.$refs.interval.timeValue[1]
            this.form.pageNum = this.pageNum
            this.form.pageSize = this.pageSize
            getMonitorIntegrity(this.form).then(res => {
                this.pageData = res.data.records
                this.isLoading = false

                this.initEcharts()
            })
        },

        initEcharts(){
            let x = []
            let aSer = []
            this.pageData.forEach(item=>{x.push(item.name+"\n("+item.id+")");aSer.push(Number(item.integrityRate*100).toFixed(2))})
            let myChart = echarts.init(document.getElementById('container'));
            // 指定图表的配置项和数据
            let option = {
                title: {
                    x:'center',
                    textAlign:'center',
                    text: '用户侧数据完整性'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#283b56'
                        }
                    }
                },

                xAxis: {
                    name:'用户测点',
                    data: x,

                },
                yAxis: {
                    name:'完整性(%)',
                    max:100,
                    min:0
                },
                series: [
                    {
                        name: '数据完整性',
                        type: 'bar',
                        data: aSer,
                        barWidth:'20%',

                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                },
                                // 使用回调函数来动态设置颜色
                                color: function (params) {
                                    // params.value 是当前数据项的值
                                    if (params.value >= 90) {
                                        return '#339966'; // 超过90是绿色
                                    } else if (params.value >= 60) {
                                        return '#FFCC33'; // 60到90是黄色
                                    } else {
                                        return '#CC0000'; // 小于60是红色
                                    }
                                }
                            }
                        }

                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        // 切换选项
        handleNodeClick(data) {
            // console.log(data);
            this.form.orgId = data.id
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.pageSize = val
            this.pageListInit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.pageNum = val
            this.pageListInit()
        },
        //重置
        Reset() {
            this.$refs.area.form.valueTitle = '全国'
            this.$refs.interval.intervald = 1
        },
        //导出
        exportEvent() {
            this.$refs.workOrderTable.exportData({
                filename: 'export', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                data: this.pageData
            })
        },



        handleClose() {
            this.resetForm('ruleForm')
            this.dialogVisible = false;
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    feedBackAdd(this.ruleForm).then(res => {
                        this.$message({
                            message: "填写成功!",
                            type: "success",
                        });
                        this.handleClose()
                        this.pageListInit()
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },




        handleSelectionChange(val) {
            this.multipleSelection = val.records
        },
        selectAllChangeEvent(val) {
            this.multipleSelection = val.records
        },

        // 排序
        sortChangeEvent({ column, field, order }) {
            this.form.sortBy = field
            this.form.orderBy = order
            this.pageListInit()
        },

        tableDateFilter(row, column) {
            if (row.column.property == 'ifSensitiveUser') {
                if (1 == row.row.ifSensitiveUser) {
                    return "是"
                } else {
                    return "否"
                }
            } else if (row.column.property == 'userType') {
                let title = ''
                this.userTypeList.forEach(item => {
                    if (item.id == row.row.userType) {
                        title = item.name
                    }
                })
                return title
            } else if (row.column.property == 'integrityRate') {
                return Number(row.row.integrityRate*100).toFixed(2)
            } else if(row.column.property == 'voltageLevel'){
                let title = ''
                this.voltageLevelList.forEach(item => {
                    if (item.id == row.row.voltageLevel) {
                        title = item.name
                    }
                })
                return title
            }else {
                return row.row[row.column.property]
            }
        }

    }
}
</script>
<style lang="less" scoped>
/deep/ .el-tag--success {
    background-color: #f0f9eb !important;
    border-color: #e1f3d8 !important;
    color: #67c23a !important;
}
/deep/ .el-tag--danger {
    background-color: #fef0f0 !important;
    border-color: #fde2e2 !important;
    color: #f56c6c !important;
}
</style>
