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

            <el-form-item>
                <Timeinterval :interval="3" ref="interval"></Timeinterval>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="resetFn">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="text" @click="closeHandle">
                    条件筛选
                    <i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                </el-button>
            </el-form-item>
        </el-form>

        <div class="container" id="container">
            <i @click="closeHandle" class="el-icon-circle-close coles"></i>
            <el-form :inline="true" style="margin-top: 10px" label-width="110px" class="">
                <el-form-item label="问题来源:">
                    <el-select v-model="formData.problemSources" clearable placeholder="请选择">
                        <el-option
                            v-for="item in problemData"
                            :key="item.code"
                            :label="item.label"
                            :value="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="填报进度:">
                    <el-select v-model="formData.reportProcess" clearable placeholder="请选择">
                        <el-option
                            v-for="item in fillingProgress"
                            :key="item.code"
                            :label="item.label"
                            :value="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="审核状态:">
                    <el-select v-model="formData.reportProcessStatus" clearable placeholder="请选择">
                        <el-option
                            v-for="item in auditStatus"
                            :key="item.code"
                            :label="item.label"
                            :value="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="问题名称:">
                    <el-input
                        v-model="formData.problemName"
                        clearable
                        placeholder="请填写"
                        style="width: 100%"
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>

        <el-row>
            <el-col :span="24">
                <div class="button">
                    <el-button type="primary" icon="el-icon-circle-plus" @click="newlyAdded" size="mini">
                        新增
                    </el-button>
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="filling">填报</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-delete" @click="deleteFn">删除</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-s-claim" @click="fileFn">归档</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-pie-chart" @click="historyFn">
                        历史审核记录
                    </el-button>
                </div>
                <el-table
                    stripe
                    :data="queryMaintenanceData"
                    :height="height"
                    border
                    style="width: 100%"
                    v-loading="isLoading"
                    header-cell-class-name="table_header"
                    @selection-change="handleSelectionChange"
                    :row-class-name="rowClassName"
                    :cell-style="cellStyle"
                >
                    <el-table-column type="selection" width="35"></el-table-column>
                    <el-table-column prop="number" label="序号" width="100" :show-overflow-tooltip="true">
                        <template scope="scope">
                            <span>{{ (formData.pageNum - 1) * formData.pageSize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orgName" label="所属单位" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column
                        prop="problemSources"
                        label="问题来源"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        prop="powerQualityProblemNo"
                        label="问题编号"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        prop="problemName"
                        label="问题名称"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        prop="dataDate"
                        label="问题新建时间"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        prop="reportProcess"
                        label="填报进度"
                        :formatter="formatter"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        prop="reportProcessStatus"
                        label="审核状态"
                        :formatter="formatterStatus"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column label="详情">
                        <template slot-scope="scope">
                            <!-- <span
                v-if="
                  scope.row.reportProcess != 'Not_Reported' &&
                  scope.row.reportProcess != 'Archived'
                "
                type="primary"
                size="small"
                style="color: blue; text-decoration: underline"
                @click="seeFn(scope.row)"
                >查看</span
              > -->
                            <el-button
                                type="primary"
                                size="mini"
                                v-if="
                                    scope.row.reportProcess != 'Not_Reported' && scope.row.reportProcess != 'Archived'
                                "
                                @click="seeFn(scope.row)"
                            >
                                查看
                            </el-button>
                            <span v-else type="primary" size="small">-</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    align="right"
                    class="mt10"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="formData.pageNum"
                    :page-sizes="[20, 30, 40, 50, 100]"
                    :page-size="formData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </el-col>
        </el-row>

        <!-- 新增 -->
        <NewlyAdd v-if="showNewlyAdded" @handleClose="showNewlyAdded = false" @onSubmit="onSubmit" ref="NewlyAdd" />
        <!-- 未通过弹窗 -->
        <el-dialog :close-on-click-modal="false" title="未通过审批意见查看" :visible.sync="failed" width="50%">
            <el-divider content-position="left" style="font-size: 18px; font-weight: bolder">审核意见</el-divider>
            <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="textarea"></el-input>
        </el-dialog>
        <!-- 填报弹窗(原因分析()) -->
        <CauseAnalysisJP
            v-if="showCauseAnalysisJP"
            @handleClose="showCauseAnalysisJP = false"
            @onSubmit="onSubmit"
            ref="CauseAnalysisJP"
            :addData="multipleSelection[0]"
        />

        <!-- 填报弹窗(计划整改措施) -->
        <PlannedRectification
            v-if="showPlannedRectification"
            @handleClose="showPlannedRectification = false"
            @onSubmit="onSubmit"
            ref="PlannedRectification"
            :addData="multipleSelection[0]"
        />

        <!-- 填报弹窗(实际采取措施) -->
        <ActualMeasures
            v-if="showActualMeasures"
            @handleClose="showActualMeasures = false"
            @onSubmit="onSubmit"
            ref="ActualMeasures"
            :addData="multipleSelection[0]"
        />

        <!-- 填报弹窗(成效分析) -->
        <Effectiveness
            v-if="showEffectiveness"
            @handleClose="showEffectiveness = false"
            @onSubmit="onSubmit"
            ref="Effectiveness"
            :addData="multipleSelection[0]"
        />
        <!-- 详情(在线监测超标问题) -->
        <MonitoringDetails
            v-if="showMonitoringDetails"
            ref="MonitoringDetails"
            :detailsList="detailsList"
            @handleClose="showMonitoringDetails = false"
        />

        <!-- 详情(普测超标问题) -->
        <GeneralSurveyDetails
            v-if="showGeneralSurveyDetails"
            ref="GeneralSurveyDetails"
            :detailsList="detailsList"
            @handleClose="showGeneralSurveyDetails = false"
        />

        <!-- 详情(用户投诉问题) -->
        <ComplaintDetails
            v-if="showComplaintDetails"
            ref="ComplaintDetails"
            :detailsList="detailsList"
            @handleClose="showComplaintDetails = false"
        />

        <!-- 详情(运维异常问题) -->

        <ExceptionDetails
            v-if="showExceptionDetails"
            ref="ExceptionDetails"
            :detailsList="detailsList"
            @handleClose="showExceptionDetails = false"
        />

        <!-- 历史审核记录 -->
        <el-dialog :close-on-click-modal="false" title="历史审核记录" :visible.sync="history" width="70%">
            <el-table
                stripe
                :data="historyData"
                :height="height1"
                border
                style="width: 100%"
                v-loading="isLoading4"
                header-cell-class-name="table_header"
            >
                <el-table-column
                    prop="reportProcess"
                    label="审核节点"
                    :show-overflow-tooltip="true"
                    :formatter="formatter"
                ></el-table-column>
                <el-table-column
                    prop="type"
                    label="审核结果"
                    :formatter="formatterType"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column prop="checker" label="审核人" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="orgName" label="审核人单位" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="dataDate" label="审核时间" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="description" label="审核意见" :show-overflow-tooltip="true"></el-table-column>
            </el-table>

            <div style="display: flex; justify-content: center; margin-top: 10px">
                <el-button type="primary" class="ml20" @click="history = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
import { dicData } from '@/assets/commjs/dictypeData'
import Timeinterval from './components/Timeinterval.vue'
import CauseAnalysisJP from './components/CauseAnalysisJP.vue'
import PlannedRectification from './components/PlannedRectification.vue'
import ActualMeasures from './components/ActualMeasures.vue'
import Effectiveness from './components/Effectiveness.vue'
import MonitoringDetails from './components/MonitoringDetails.vue'
import GeneralSurveyDetails from './components/GeneralSurveyDetails.vue'
import ComplaintDetails from './components/ComplaintDetails.vue'
import ExceptionDetails from './components/ExceptionDetails.vue'
import NewlyAdd from './components/NewlyAdd'
import {
    getIssues,
    deleteIssues,
    archive,
    queryCheckTrack
} from '@/api/Process-supervision/electricitymanagement/electricitymanagement'
import { login } from '@/api/user'
export default {
    components: {
        Area,
        Timeinterval,
        NewlyAdd,
        CauseAnalysisJP,
        PlannedRectification,
        ActualMeasures,
        Effectiveness,
        MonitoringDetails,
        GeneralSurveyDetails,
        ComplaintDetails,
        ExceptionDetails
    },
    data() {
        return {
            detailsList: {},
            showNewlyAdded: false,
            showCauseAnalysisJP: false,
            showPlannedRectification: false,
            showActualMeasures: false,
            showEffectiveness: false,
            showMonitoringDetails: false,
            showGeneralSurveyDetails: false,
            showComplaintDetails: false,
            showExceptionDetails: false,
            height: null,
            height1: null,
            view: false,
            height3: null,
            isLoading: false,

            isLoading4: false,
            failed: false,

            ordinaryAdd: false,

            causeAnalysis1: false,
            rectificationMeasures: false,
            takeSteps: false,
            effectivenessAnalysis: false,
            onlineDetails: false,
            ordinaryDetails: false,
            userDetails: false,
            operationDetails: false,
            history: false,
            textarea: '原因分析报告不完整,请补充完整后重新提交！',
            formData: {
                dataDate: '',
                orgNo: '', //所属单位
                problemName: '', //	问题名称
                problemSources: '', //	问题来源
                reportProcess: '', //填报进度
                reportProcessStatus: '', //	审核状态
                dataType: '3', //	时间类型（年：1；季：2；月：3）
                pageNum: 1,
                pageSize: 20
            },
            addData: {
                company: '杭州公司本部',
                problem: '',
                name: ''
            },
            questionNo: '',

            //问题来源
            problemData: [],
            //填报进度
            fillingProgress: [],
            //审核状态
            auditStatus: [],

            queryMaintenanceData: [],
            total: 0,

            historyData: [],
            multipleSelection: [],

            device: '',
            fvh: ''
        }
    },
    created() {},
    mounted() {
        this.device = window.devicePixelRatio
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.Dictionaries()
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 205
            this.height1 = window.sessionStorage.getItem('appheight') - 360
        },
        closeHandle() {
            if (this.view) {
                this.view = false
            } else {
                this.view = true
            }
            //console.log('关闭和展开');
            const dom = document.getElementById('container')
            const closeDom = document.getElementsByClassName('close')[0]
            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
                dom.className = 'container expend'
            } else {
                dom.className = 'container close-container'
            }
        },
        // 新增
        newlyAdded() {
            this.showNewlyAdded = true
            setTimeout(() => {
                this.$refs.NewlyAdd.add = true
            }, 0)
        },
        // 字典表
        Dictionaries() {
            this.formData.orgNo = JSON.parse(window.sessionStorage.getItem('Info')).deptId
            // /问题来源
            this.problemData = dicData('Problem_Sources', ['Load_Type'])
            //  填报进度 /:
            this.fillingProgress = dicData('Fill_Progress', ['Load_Type'])
            // 审核状态  :
            this.auditStatus = dicData('Audit_Status', ['Load_Type'])
        },
        // 详情
        seeFn(row) {
            this.detailsList = row

            if (row.problemSources == '在线监测告警') {
                this.showMonitoringDetails = true
                setTimeout(() => {
                    this.$refs.MonitoringDetails.onlineDetails = true
                }, 0)
            } else if (row.problemSources == '普测超标') {
                this.showGeneralSurveyDetails = true
                setTimeout(() => {
                    this.$refs.GeneralSurveyDetails.onlineDetails = true
                }, 0)
            } else if (row.problemSources == '用户投诉') {
                this.showComplaintDetails = true
                setTimeout(() => {
                    this.$refs.ComplaintDetails.onlineDetails = true
                }, 0)
            } else if (row.problemSources == '设备异常') {
                this.showExceptionDetails = true
                setTimeout(() => {
                    this.$refs.ExceptionDetails.onlineDetails = true
                }, 0)
            } else {
                this.$message({
                    message: '暂无数据！！！',
                    type: 'warning'
                })
            }
        },

        //查询
        onSubmit() {
            this.isLoading = true

            this.formData.dataDate = this.$refs.interval.timeValue[0]
            //   this.form.endTime = this.$refs.interval.timeValue[1];
            this.formData.dataType = this.$refs.interval.intervald
            getIssues(this.formData).then(res => {
                this.isLoading = false
                this.queryMaintenanceData = res.data.records
                this.queryMaintenanceData.forEach(item => {
                    item.dataDate = item.dataDate.replace('T', ' ')
                })
                this.total = res.data.total
            })
        },

        //填报
        filling() {
            // reportProcessStatus
            if (this.multipleSelection.length == 1) {
                if (this.multipleSelection[0].reportProcess == 'Not_Reported') {
                    // 原因分析
                    this.showCauseAnalysisJP = true
                    setTimeout(() => {
                        this.$refs.CauseAnalysisJP.causeAnalysis = true
                    }, 0)
                } else if (
                    this.multipleSelection[0].reportProcess == 'Cause_Analysis' &&
                    this.multipleSelection[0].reportProcessStatus == 'Success'
                ) {
                    // 计划整改措施
                    this.showPlannedRectification = true
                    setTimeout(() => {
                        this.$refs.PlannedRectification.rectificationMeasures = true
                    }, 0)
                } else if (
                    this.multipleSelection[0].reportProcess == 'Plan_Measures' &&
                    this.multipleSelection[0].reportProcessStatus == 'Success'
                ) {
                    // 实际采取措施
                    this.showActualMeasures = true
                    setTimeout(() => {
                        this.$refs.ActualMeasures.rectificationMeasures = true
                    }, 0)
                } else if (
                    this.multipleSelection[0].reportProcess == 'Actual_Measures' &&
                    this.multipleSelection[0].reportProcessStatus == 'Success'
                ) {
                    // 成效分析
                    this.showEffectiveness = true
                    setTimeout(() => {
                        this.$refs.Effectiveness.effectivenessAnalysis = true
                    }, 0)
                } else if (
                    this.multipleSelection[0].reportProcess == 'Insights' &&
                    this.multipleSelection[0].reportProcessStatus == 'Success'
                ) {
                    this.$message({
                        message: '填报已结束,无需填报!',
                        type: 'warning'
                    })
                } else {
                    this.$message({
                        message: '审核未通过,不能进行填报',
                        type: 'warning'
                    })
                }
            } else {
                this.$message({
                    message: this.multipleSelection.length == 0 ? '请选择1条数据!' : '只能选择1条数据!',
                    type: 'warning'
                })
            }
        },

        //删除
        deleteFn() {
            if (this.multipleSelection.length == 1) {
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        deleteIssues(this.multipleSelection[0].powerQualityProblemNo).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '删除成功!',
                                    type: 'success'
                                })
                            }
                            this.formData.pageNum = 1
                            this.onSubmit()
                        })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            } else {
                this.$message({
                    message: '请选择1数据,进行删除！！！',
                    type: 'warning'
                })
            }
        },

        //归档
        fileFn() {
            if (this.multipleSelection.length == 1) {
                if (
                    this.multipleSelection[0].reportProcess == 'Insights' &&
                    this.multipleSelection[0].reportProcessStatus == 'Success'
                ) {
                    this.$confirm('是否确认归档?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        archive(this.multipleSelection[0].powerQualityProblemNo).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '归档成功!',
                                    type: 'success'
                                })
                            }

                            this.onSubmit()
                        })
                    })
                } else {
                    this.$message({
                        message: '不满足归档调节，操作失败!',
                        type: 'warning'
                    })
                }
            } else {
                this.$message({
                    message: '请选择1条数据,进行归档!',
                    type: 'warning'
                })
            }
        },

        //历史审核记录
        historyFn() {
            if (this.multipleSelection.length == 1) {
                queryCheckTrack(this.multipleSelection[0].powerQualityProblemNo).then(res => {
                    this.historyData = res.data
                    this.history = true
                })
            } else {
                this.$message({
                    message: this.multipleSelection.length == 0 ? '请选择1条数据!' : '只能选择1条数据!',
                    type: 'warning'
                })
            }
        },

        //勾选
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 区域勾选
        handleNodeClick(data) {
            this.formData.orgNo = data.id
        },

        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.onSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formData.pageNum = val
            this.onSubmit()
        },
        //序号
        rowClassName({ row, rowIndex }) {
            row.number = rowIndex + 1
        },
        //重置
        resetFn() {
            this.formData = {
                dataDate: '',
                orgNo: '', //所属单位
                problemName: '', //	问题名称
                problemSources: '', //	问题来源
                reportProcess: '', //填报进度
                reportProcessStatus: '', //	审核状态
                dataType: '3', //	时间类型（年：1；季：2；月：3）
                pageNum: 1,
                pageSize: 20
            }
            this.$refs.area.form.valueTitle = JSON.parse(window.sessionStorage.getItem('Info')).deptName
            this.formData.orgNo = JSON.parse(window.sessionStorage.getItem('Info')).deptId
            this.$refs.interval.intervald = 3
            this.onSubmit()
        },

        //判断
        cellStyle(row) {
            if (row.row.fillingProgress == '未填报') {
                row.row.auditStatus = '--'
                row.row.plandetails = '--'
            } else if (row.row.fillingProgress == '已归档') {
                row.row.auditStatus = '--'
            }
        },
        // 字典处理
        formatter(row, column) {
            let title = ''
            this.fillingProgress.forEach(item => {
                if (item.code == row.reportProcess) {
                    title = item.name
                }
            })
            return title
        },

        formatterType(row, column) {
            let title = ''
            this.auditStatus.forEach(item => {
                if (item.code == row.type) {
                    title = item.name
                }
            })
            return title
        },
        formatterStatus(row, column) {
            let title = ''
            this.auditStatus.forEach(item => {
                if (item.code == row.reportProcessStatus) {
                    title = item.name
                }
            })
            if (title == '待审核') {
                return (
                    <span type="primary" size="small" style="color: #48d1cc">
                        待审核
                    </span>
                )
            } else if (title == '未通过') {
                return (
                    <span type="primary" size="small" style="color: #dc143c">
                        未通过
                    </span>
                )
            } else if (title == '已通过') {
                return (
                    <span type="primary" size="small" style="color: #9acd32">
                        已通过
                    </span>
                )
            } else if (title == '新建') {
                return (
                    <span type="primary" size="small">
                        新建
                    </span>
                )
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
::v-deep .form {
    .el-form-item {
        margin-bottom: 5px;
    }
}
::v-deep .box {
    .el-textarea {
        width: 1200px;
    }
}
::v-deep .box1 {
    .el-textarea {
        width: 1000px;
    }
}
::v-deep .el-card {
    height: 40px;
}
.button {
    float: right;
    margin-right: 5px;
    margin-bottom: 10px;
}

::v-deep .el-dialog .el-dialog__body {
    max-height: 100%;
    padding: 10px;
}
::v-deep .el-carousel__button {
    width: 10px;
    height: 10px;
    background-color: #037272bc;
    border-radius: 50%;
    opacity: 0.3;
}
::v-deep .swiper {
    .el-divider--horizontal {
        margin: 10px 0;
    }
}

::v-deep .el-checkbox {
    margin-right: 20px !important;
}

.container {
    /* margin: auto; */
    top: 0px;
    right: 0;
    width: 40%;
    height: 0px;
    z-index: 2000;
    position: absolute;
    background-color: #e4e7ebb9;
    overflow: auto;
    scroll-behavior: smooth;
    -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: block;
}
.expend {
    animation: expend ease 5s forwards;
}
.close-container {
    animation: no-expend ease 1s forwards;
}
@keyframes expend {
    from {
        top: 0px;
        height: auto;
    }
    to {
        height: auto;
        top: 0px;
    }
}
@keyframes no-expend {
    from {
        height: 20%;
        top: 0px;
    }
    to {
        top: 0px;
        height: 0px;
    }
}
.coles {
    position: absolute;
    right: 0;
    font-size: 20px;
    cursor: pointer;
}
</style>
