<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" class="ml10" icon="el-icon-search" @click="onsubmit">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="Reset">重置</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="问题来源:" class="box1">
                    <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-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 mb10">
                    <el-button type="primary" icon="el-icon-s-claim" @click="toExamine" size="mini">审核</el-button>
                    <el-button type="primary" icon="el-icon-s-claim" @click="historyFn" size="mini">
                        历史审核记录
                    </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"
                >
                    <el-table-column type="selection" width="55"></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>
                <el-pagination
                    background
                    align="right"
                    @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"
                    class="mt10"
                ></el-pagination>
            </el-col>
        </el-row>

        <el-dialog
            :close-on-click-modal="false"
            title="问题审核"
            v-if="dialogVisible"
            :visible.sync="dialogVisible"
            width="70%"
            :before-close="handleClose"
        >
            <SectionTwoPage :addData="multipleSelection[0]" :onlineDetailsData="onlineDetailsData" />
            <el-divider content-position="left" style="font-size: 18px; font-weight: bolder">审核意见</el-divider>

            <el-form :model="dateForm" ref="dateForm" label-width="100px">
                <el-form-item
                    prop="opinion"
                    label="审核意见:"
                    :rules="[{ required: true, message: '请输入审核意见', trigger: 'blur' }]"
                >
                    <el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="dateForm.opinion"></el-input>
                </el-form-item>
            </el-form>
            <div style="display: flex; justify-content: center; margin-top: 10px">
                <el-button type="primary" class="ml20" @click="adopt(1)">通 过</el-button>
                <el-button type="primary" class="ml20" @click="adopt(0)">不 通 过</el-button>
                <el-button type="primary" class="ml20" @click="handleClose">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 历史审核记录 -->
        <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="isLoading1"
                header-cell-class-name="table_header"
            >
                <el-table-column
                    prop="reportProcess"
                    label="审核节点"
                    :formatter="formatter"
                    :show-overflow-tooltip="true"
                ></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 {
    getIssues,
    getAbnormalDetail,
    getExcessiveDetail,
    getComplaintDetail,
    getGeneralSurveyDetail,
    checkPowerQuality,
    queryCheckTrack
} from '@/api/Process-supervision/electricitymanagement/electricitymanagement'
import SectionTwoPage from './components/SectionTwoPage.vue'
export default {
    components: { Area, Timeinterval, SectionTwoPage },
    data() {
        return {
            vh: '',
            queryMaintenanceData: [],
            dialogVisible: false,
            SectionTwoPage: false,
            onlineDetailsData: {},
            height: null,
            height1: null,
            view: false,
            isLoading: false,
            isLoading1: false,
            history: false,
            formData: {
                orgNo: '',
                problemSources: '',
                reportProcess: '',
                problemName: '',
                reportProcessStatus: 'Auditt',
                dataType: '3', //	时间类型（年：1；季：2；月：3）
                pageNum: 1,
                pageSize: 20
            },
            dateForm: {
                opinion: ''
            },

            //问题来源
            problemData: [],
            //填报进度
            fillingProgress: [],
            historyData: [],
            multipleSelection: [],

            device: '',

            total: 0, // 总条数
            fvh: ''
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.Dictionaries()

        this.onsubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.height = window.sessionStorage.getItem('appheight') - 205
            this.height1 = window.sessionStorage.getItem('appheight') - 290
        },
        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'
            }
        },
        // 字典表
        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'])
        },

        handleChange(file) {
            // console.log((file.name.split('.')).splice(0,1).toString());
            this.causeAnalysisData.documentName = file.name.split('.').splice(0, 1).toString()
        },

        //查询
        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
            })
        },

        //审核
        toExamine() {
            if (this.multipleSelection.length == 1) {
                // this.SectionTwoPage = false;
                // getAbnormalDetail(this.multipleSelection[0].powerQualityProblemNo).then(

                if (this.multipleSelection[0].problemSources == '在线监测告警') {
                    getExcessiveDetail(this.multipleSelection[0].powerQualityProblemNo).then(res => {
                        this.onlineDetailsData = res.data
                    })
                } else if (this.multipleSelection[0].problemSources == '普测超标') {
                    getGeneralSurveyDetail(this.multipleSelection[0].powerQualityProblemNo).then(res => {
                        this.onlineDetailsData = res.data
                    })
                } else if (this.multipleSelection[0].problemSources == '用户投诉') {
                    getComplaintDetail(this.multipleSelection[0].powerQualityProblemNo).then(res => {
                        this.onlineDetailsData = res.data
                    })
                } else if (this.multipleSelection[0].problemSources == '设备异常') {
                    getAbnormalDetail(this.multipleSelection[0].powerQualityProblemNo).then(res => {
                        this.onlineDetailsData = res.data
                    })
                }
                setTimeout(() => {
                    this.dialogVisible = true
                }, 0)
            } else {
                this.$message({
                    message: this.multipleSelection.length == 0 ? '请选择1条数据!' : '只能选择1条数据!',
                    type: 'warning'
                })
            }
        },

        // 通过
        adopt(checkResult) {
            this.$refs.dateForm.validate(valid => {
                if (valid) {
                    checkPowerQuality({
                        checkComment: this.dateForm.opinion,
                        checkPerson: JSON.parse(window.sessionStorage.getItem('Info')).name,
                        checkResult: checkResult,
                        powerQualityProblemNo: this.onlineDetailsData.powerQualityProblemNo,
                        reportProcess: this.multipleSelection[0].reportProcess
                    }).then(res => {
                        if (res.code == 'A0000') {
                            this.$message({
                                message: '审核成功!',
                                type: 'success'
                            })
                            this.handleClose()
                            this.onsubmit()
                        } else {
                            this.$message({
                                message: res.message,
                                type: 'success'
                            })
                        }
                    })
                }
            })
        },

        // 取消
        handleClose() {
            this.dialogVisible = false

            this.dateForm.opinion = ''
        },
        //历史审核记录
        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'
                })
            }
        },

        // 切换选项
        handleNodeClick(data) {
            this.formData.orgNo = data.id
        },
        //勾选
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        //重置
        Reset() {
            this.formData = {
                dataDate: '',
                orgNo: '', //所属单位
                problemName: '', //	问题名称
                problemSources: '', //	问题来源
                reportProcess: '', //填报进度
                reportProcessStatus: 'Auditt', //	审核状态
                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()
        },
        //序号
        rowClassName({ row, rowIndex }) {
            row.number = rowIndex + 1
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.pageSize = val
            this.onsubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val
            this.onsubmit()
        },
        // 字典处理
        formatter(row, column) {
            let title = ''
            this.fillingProgress.forEach(item => {
                if (item.code == row.reportProcess) {
                    title = item.name
                }
            })
            return title
        },
        formatterType(row, column) {
            let title = ''
            dicData('Audit_Status', ['Load_Type']).forEach(item => {
                if (item.code == row.type) {
                    title = item.name
                }
            })
            return title
        }
    }
}
</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: 0;
    }
}
::v-deep .box {
    .el-input {
        width: 140px;
    }
}
::v-deep .box1 {
    .el-input {
        width: 100%;
    }
}
::v-deep .box2 {
    .el-textarea {
        width: 1000px;
    }
}
::v-deep .box3 {
    .el-textarea {
        width: 1200px;
    }
}
::v-deep .el-card {
    height: 40px;
}
.button {
    float: right;
    margin-right: 5px;
}

::v-deep .el-dialog .el-dialog__body {
    max-height: 100%;
    padding: 10px;
}

::v-deep .swiper {
    .el-divider--horizontal {
        margin: 10px 0;
    }
}

.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>
