<template>
    <div>
        <div v-show="showFlag && flags" @ViewReport="ViewReport">
            <el-form :model="form" :inline="true" class="demo-form-inline">
                <!-- <Area @click="handleNodeClick"></Area> -->
                <el-form-item label="筛选数据:">
                    <el-input v-model="form.searchValue" placeholder="请输入需要筛选的数据" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <Timeinterval :interval="3" ref="Timeinterval"></Timeinterval>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="small" icon="el-icon-search" @click="initQuery">查询</el-button>
                    <!-- <el-button type="primary" icon="el-icon-download">导出</el-button> -->
                </el-form-item>
            </el-form>
            <el-row :gutter="20">
                <el-col :span="8" :style="`height: 350px; overflow: hidden;`">
                    <div v-loading="isLoading1" id="electr1" style="height: 100%" />
                </el-col>
                <el-col :span="16" :style="`height: 350px; overflow: hidden;`">
                    <div v-loading="isLoading2" id="electr2" style="height: 100%" />
                </el-col>
            </el-row>
            <el-table
                stripe
                highlight-current-row
                :data="electrList.superviseVoList"
                header-cell-class-name="table_header"
                :height="vh"
                style="width: 100%"
                class="mt10"
                border
            >
                <template v-for="(item, index) in list">
                    <el-table-column
                        show-overflow-tooltip
                        :prop="item.prop"
                        :label="item.label"
                        :min-width="item.width"
                        :key="index"
                        :formatter="formatter"
                    ></el-table-column>
                </template>
                <el-table-column label="操作" width="210">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.progress == 0 || scope.row.progress == 4"
                            size="mini"
                            type="primary"
                            icon="el-icon-bottom"
                            @click="Issued(scope.row)"
                        >
                            下发
                        </el-button>
                        <el-button
                            v-else-if="scope.row.progress != 6"
                            size="mini"
                            type="primary"
                            icon="el-icon-top"
                            @click="ClickUpload(scope.row)"
                        >
                            上传
                        </el-button>
                        <el-button
                            v-if="scope.row.progress != 0"
                            type="primary"
                            icon="el-icon-view"
                            size="mini"
                            @click="Look(scope.row)"
                        >
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                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"
                class="mt10"
            ></el-pagination>
            <!-- 上传 -->
            <uploadFrame
                :title="title"
                v-if="flag"
                :rowList="rowList"
                @handleClose="
                    flag = false
                    initQuery()
                "
            />
            <!-- 查看 -->
            <lookOver
                v-if="flagLook"
                :title="title"
                :rowList="rowList"
                @ViewReport="ViewReport"
                @handleClose="flagLook = false"
            />
        </div>
        <!-- 趋势图 -->
        <TrendChart
            v-if="!showFlag"
            :reportID="reportID"
            @close="
                showFlag = true
                flags = true
            "
        />
        <!-- 报表 -->
        <reportForm
            v-if="!flags"
            :reportID="reportID"
            @close="
                flags = true
                showFlag = true
            "
        />
    </div>
</template>
<script>
import { superviseIndex, dowloadAlarmFormwork } from '@/api/Processsupervision/technology.js'
import reportForm from '@/views/Distributionnetwork-analysis/components/StatisticalReport/components/reportForm'
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/Timeinterval.vue'
import uploadFrame from './uploadFrame'
import lookOver from './lookOver'
import TrendChart from '@/views/Statistical-analysis/steadyStateIndicators/components/TrendChart.vue'
export default {
    components: {
        Area,
        Timeinterval,
        reportForm,
        uploadFrame,
        lookOver,
        TrendChart
    },
    props: {},
    data() {
        return {
            showFlag: true,
            reportID: '',
            flag: false,
            flags: true,
            flagLook: false,
            zoom: '',
            rowList: {},
            isLoading1: false,
            isLoading2: false,
            vh: null,
            form: {
                deptId:JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                searchValue: '',
                pageNum: 1,
                pageSize: 20,
                searchState: '',
                type: ''
            },

            total: 0,
            title: '预警反馈单',
            electrList: {},
            flagClick: true,
            list: [
                { prop: 'name', label: '事务名称', width: 200 },
                { prop: 'type', label: '事务类型', width: 80 },
                { prop: 'createUser', label: '创建人员', width: 100 },
                { prop: 'companyName', label: '创建部门', width: 130 },
                { prop: 'modifyUser', label: '处理人员', width: 100 },
                { prop: 'modifyTime', label: '处理时间', width: 140 },
                { prop: 'progressTime', label: '进行时间(天)', width: 110 },
                { prop: 'progress', label: '流程状态', width: 100 },
                { prop: 'alertType', label: '预警类型', width: 100 }
            ]
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.initQuery()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 525 + 'px'
            let domID1 = document.getElementById('electr1')
            setTimeout(() => {
                ;(domID1.style.width = '100%'),
                    (domID1.style.height = '350px')
            }, 0)
            let domID2 = document.getElementById('electr2')
            setTimeout(() => {
                ;(domID2.style.width = '100%'),
                    (domID2.style.height = '350px')
            }, 0)
        },
        initQuery() {
          this.form.searchBeginTime = this.$refs.Timeinterval.timeValue[0]
          this.form.searchEndTime = this.$refs.Timeinterval.timeValue[1]
          superviseIndex(this.form).then(res => {
            this.flagClick = true
            this.electrList = res.data
            this.total = res.data.total
            this.electr1()
            this.electr2()
          })
        },
        // 组件切换
        ViewReport(id, val) {
            if (val == 0) {
                this.flags = false
            } else {
                this.showFlag = false
            }
            this.reportID = id
        },
        // 下发
        Issued(data) {
            dowloadAlarmFormwork({
                type: data.type,
                supIndex: data.supIndex,
                formworkType: data.progress == 0 ? 0 : 1
            }).then(res => {
              if(res.code === 'A0000'){
                let link = document.createElement('a')
                link.href = res.data //url文件地址
                link.click()
                link.remove()
                this.initQuery()
              }
            })

        },
        // 查看
        Look(row) {
            this.title =
                row.progress == 2
                    ? '预/告警单详情'
                    : row.progress == 3
                    ? '反馈单详情'
                    : row.progress == 4
                    ? '报告详情'
                    : row.progress == 5
                    ? '通知单详情'
                    : row.progress == 6
                    ? '预/告警单详情'
                    : ''
            this.rowList = row
            this.flagLook = true
        },
        // 上传
        ClickUpload(row) {
            this.title =
                row.progress == 2
                    ? '反馈单上传'
                    : row.progress == 3
                    ? '报告上传'
                    : row.progress == 5
                    ? '整改通知反馈单上传'
                    : ''
            this.rowList = row
            this.flag = true
        },
        electr1() {
            let _this = this
            this.isLoading1 = true
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr1')
            setTimeout(() => {
                ;(domID1.style.width = '100%'),
                    (domID1.style.height = '350px')
            }, 0)
            let myChart = echarts.init(domID1)
            let option = {
                title: {
                    text: '商务类型',
                    top: 20,
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                    //
                    //   top: 5,
                },
                tooltip: {
                    //提示框组件
                    trigger: 'axis',

                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                grid: {
                    right: '50px',
                    top: '50px',
                    left: '30px',
                    bottom: '30px'
                },
                //   legend: {
                //     data: ["生产量"],
                //     itemWidth: 16,
                //     itemHeight: 16,
                //     itemGap: 28,
                //     textStyle: {
                //       color: echartsColor.WordColor,
                //       rich: {
                //         a: {
                //           verticalAlign: "middle",
                //         },
                //       },

                //       padding: [2, 0, 0, 0], //[上、右、下、左]
                //     },
                //   },

                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['全部', '预警单', '告警单'],
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor,

                        }
                    }
                ],
                yAxis: [
                    {

                        minInterval: 1,
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barMaxWidth: 30, //最大宽度
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },

                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        },
                        data: [
                            {
                                value: this.electrList.earlyWarnNum + this.electrList.reportWarnNum,
                                id: ''
                            },
                            {
                                value: this.electrList.earlyWarnNum == null ? 0 : this.electrList.earlyWarnNum,
                                id: '0'
                            },
                            {
                                value: this.electrList.reportWarnNum == null ? 0 : this.electrList.reportWarnNum,
                                id: '1'
                            }
                        ]
                    }
                ]
            }
            option && myChart.setOption(option, true)
            window.echartsArr.push(myChart)
            setTimeout(function () {
                myChart.resize()
                myChart.on('click', function (params) {
                    if (_this.flagClick) {
                        _this.form.type = params.data.id + 0
                        _this.initQuery()
                        _this.flagClick = false
                    }
                })
            }, 0)
            this.isLoading1 = false
        },
        electr2() {
            let _this = this
            this.isLoading2 = true
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let echarts = require('echarts')
            let domID2 = document.getElementById('electr2')
            setTimeout(() => {
                ;(domID2.style.width = '100%'),
                    (domID2.style.height = '350px')
            }, 0)
            let myChart = echarts.init(domID2)
            let option = {
                title: {
                    text: '事务流程',
                    top: 20,
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                    //
                    //   top: 5,
                },
                tooltip: {
                    //提示框组件
                    trigger: 'axis',

                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                grid: {
                    right: '30px',
                    top: '50px',
                    left: '50px',
                    bottom: '30px'
                },


                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: [
                            '全部',
                            '开始',
                            '预/告警单下发',
                            '预/告警单反馈',
                            '现场测试',
                            '整改通知单下发',
                            '整改通知单反馈',
                            '完结'
                        ],
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        }
                    }
                ],
                yAxis: [
                    {
                        name: '事务流程',
                        nameTextStyle: {
                            color: echartsColor.WordColor,
                            fontSize: 20,
                            fontWeight: 'bold',
                            padding: [0, 0, 5, 30]
                        },
                        minInterval: 1,
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barMaxWidth: 20, //最大宽度
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },

                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        },
                        data: [
                            {
                                value:
                                    this.electrList.startNum +
                                    this.electrList.alarmTicketIssueNum +
                                    this.electrList.feedbackUploadNum +
                                    this.electrList.feedbackUploadNum +
                                    this.electrList.testReportNum +
                                    this.electrList.reviseNoticeIssueNum +
                                    this.electrList.reviseFeedbackNum +
                                    this.electrList.endNum,
                                id: ''
                            },
                            {
                                value: this.electrList.startNum == null ? 0 : this.electrList.startNum,
                                id: '0'
                            },
                            { value: this.electrList.alarmTicketIssueNum, id: '1' },
                            {
                                value:
                                    this.electrList.feedbackUploadNum == null ? 0 : this.electrList.feedbackUploadNum,
                                id: '2'
                            },
                            {
                                value: this.electrList.testReportNum == null ? 0 : this.electrList.testReportNum,
                                id: '3'
                            },
                            {
                                value:
                                    this.electrList.reviseNoticeIssueNum == null
                                        ? 0
                                        : this.electrList.reviseNoticeIssueNum,
                                id: '4'
                            },
                            {
                                value:
                                    this.electrList.reviseFeedbackNum == null ? 0 : this.electrList.reviseFeedbackNum,
                                id: '5'
                            },
                            {
                                value: this.electrList.endNum == null ? 0 : this.electrList.endNum,
                                id: '6'
                            }
                        ]
                    }
                ]
            }
            option && myChart.setOption(option, true)
            window.echartsArr.push(myChart)
            setTimeout(function () {
                myChart.resize()
                myChart.on('click', function (params) {
                    if (_this.flagClick) {
                        _this.form.searchState = params.data.id
                        _this.initQuery()
                        _this.flagClick = false
                    }
                })
            }, 0)
            this.isLoading2 = false
        },
        // 数据过滤
        formatter(row, column) {
            if (column.property == 'type') {
                return row.type == 0 ? '预警单' : '告警单'
            } else if (column.property == 'alertType') {
                return row.alertType == 0 ? (
                    '无预警'
                ) : row.alertType == 1 ? (
                    '一级预警'
                ) : row.alertType == 2 ? (
                    ' 二级预警'
                ) : row.alertType == 3 ? (
                    <span style="color='red'">超时</span>
                ) : (
                    ''
                )
            } else if (column.property == 'progress') {
                return row.progress == 0 ? (
                    <el-button type="text" class="formatterButton">
                        开始
                    </el-button>
                ) : row.progress == 1 ? (
                    <el-button type="text" class="formatterButton">
                        预/告警单下发
                    </el-button>
                ) : row.progress == 2 ? (
                    <el-button type="text" class="formatterButton">
                        反馈单上传
                    </el-button>
                ) : row.progress == 3 ? (
                    <el-button type="text" class="formatterButton">
                        现场测试
                    </el-button>
                ) : row.progress == 4 ? (
                    <el-button type="text" class="formatterButton">
                        整改通知单下发
                    </el-button>
                ) : row.progress == 5 ? (
                    <el-button type="text" class="formatterButton">
                        整改通知反馈单
                    </el-button>
                ) : row.progress == 6 ? (
                    <el-button type="text" class="formatterButton">
                        完结
                    </el-button>
                ) : (
                    ''
                )
            } else {
                return row[column.property]
            }
        },
        handleSizeChange(e) {
            this.form.pageSize = e
            this.initQuery()
        },
        handleCurrentChange(e) {
            this.form.pageNum = e
            this.initQuery()
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');

.boxDiv {
    display: flex;
    justify-content: space-between;
    line-height: 28px;
}
.formatterButton {
    color: #0cf;

    text-decoration: underline;
}
</style>
