<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 label="干扰源类型:" class="box1">
                <el-select v-model="formData.loadType" clearable placeholder="请选择">
                    <el-option
                        v-for="item in interferenceType"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="干扰源用户名称:">
                <el-input v-model="formData.userName" clearable placeholder="请输入关键字"></el-input>
            </el-form-item>

            <el-form-item label="关联干扰源用户名称:">
                <el-input v-model="formData.relationUserName" clearable placeholder="请输入关键字"></el-input>
            </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>

        <el-row>
            <el-col :span="24">
                <div class="button mb10">
                    <el-button type="primary" icon="el-icon-s-claim" @click="planReviewFn">审核</el-button>
                </div>
                <el-table
                    stripe
                    :data="measurementreportData"
                    :height="height"
                    border
                    style="width: 100%"
                    v-loading="isLoading"
                    header-cell-class-name="table_header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <template v-for="(item, index) in tableHeaderMeasurementreport">
                        <el-table-column
                            :prop="item.prop"
                            :label="item.label"
                            :key="index"
                            :formatter="formFilter"
                            :min-width="item.width"
                        ></el-table-column>
                    </template>
                </el-table>
                <el-pagination
                    class="mt10"
                    align="right"
                    background
                    @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>

        <!-- 审核弹窗 -->
        <el-dialog :close-on-click-modal="false" title="实测报告审核" :visible.sync="reportreview" width="1600px">
            <el-divider content-position="left" style="font-weight: bolder; font-size: 18px">基本信息</el-divider>
            <el-form :inline="true" :model="formdata">
                <el-form-item label="所属单位">
                    <el-input v-model="formdata.company" disabled></el-input>
                </el-form-item>

                <el-form-item label="干扰源类型:" class="box1">
                    <el-select v-model="formdata.loadType" clearable placeholder="请选择" disabled>
                        <el-option
                            v-for="item in interferenceType"
                            :key="item.id"
                            :label="item.label"
                            :value="{
                                label: item.name,
                                value: item.id,
                                code: item.code,
                                name: item.name,
                                id: item.id,
                                sort: item.sort
                            }"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="干扰源用户名称:">
                    <el-input v-model="formdata.userName" clearable placeholder="请输入关键字" disabled></el-input>
                </el-form-item>

                <el-form-item label="建档时间">
                    <el-date-picker
                        v-model.trim="formdata.time"
                        type="date"
                        placeholder="选择日期"
                        disabled
                    ></el-date-picker>
                </el-form-item>

                <el-form-item label="关联干扰源用户名称:">
                    <el-input
                        v-model="formdata.relationUserName"
                        clearable
                        placeholder="请输入关键字"
                        disabled
                    ></el-input>
                </el-form-item>

                <el-divider content-position="left" style="font-weight: bolder; font-size: 18px">
                    报告在线查看
                </el-divider>
                <el-form-item class="item" label="报告名称:">
                    <el-input v-model="documentName" clearable placeholder="上传文件名称" disabled></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-download" @click="xz">下载</el-button>
                </el-form-item>
            </el-form>
            <el-divider content-position="left" style="font-weight: bolder; font-size: 18px">审核意见</el-divider>
            <!-- <div style="width: 100%; display: flex; justify-content: center">
                <div class="shyj">{{ textContent }}</div>
            </div> -->
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea"></el-input>
            <div style="display: flex; justify-content: center; margin-top: 10px">
                <el-button type="primary" class="ml20" @click="passFn">通过</el-button>
                <el-button type="primary" class="ml20" @click="failFn">不通过</el-button>
                <el-button type="primary" class="ml20" @click="cancelFn">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
//   import Timeinterval from "../../../components/Timeinterval.vue";
import { dicData } from '@/assets/commjs/dictypeData'
import {
    getLoadTypeRelationList,
    checkLoadTypeUserA
} from '@/api/Process-supervision/interferencemanagement/interferencemanagement'
export default {
    components: { Area },
    data() {
        return {
            vh: '',
            height: null,
            isLoading: false,
            reportreview: false,
            formData: {
                loadType: '',
                userName: '',
                orgNo: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                pageNum: 1,
                pageSize: 20,
                relationUserName: ''
            },
            formdata: {
                company: '',
                time: '',
                loadType: [],
                userName: '',
                relationUserName: ''
            },
            //干扰源类型
            interferenceType: [],
            textarea: '',
            total: null,

            tableHeaderMeasurementreport: [
                { prop: 'orgName', label: '所属单位' },
                { prop: 'loadType', label: '干扰源类型' },
                { prop: 'userName', label: '干扰源用户名称' },
                { prop: 'relationUserName', label: '关联干扰源用户名称' },
                { prop: 'auploadTime', label: '报告提交评估时间' }
            ],
            measurementreportData: [],
            multipleSelection: [],
            fileList: [],
            device: '',
            documentName: ''
        }
    },
    created() {
        this.getclassificationData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.device = window.devicePixelRatio

        this.onsubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 215
        },
        //获取类型
        getclassificationData() {
            //电压等级
            this.interferenceType = dicData('Interference_Source', [])
        },
        //预览
        handleRemove(file, fileList) {
            // console.log(file, fileList,'111111');
        },
        handleChange(file, fileList) {
            // console.log(file.name.split(".").splice(0, 1).toString());
            this.documentName = file.name.split('.').splice(0, 1).toString()
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
                    files.length + fileList.length
                } 个文件`
            )
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}?`)
        },
        //查询
        onsubmit() {
            this.isLoading = true
            getLoadTypeRelationList(this.formData).then(res => {
                this.isLoading = false
                this.measurementreportData = res.data.records
                this.total = res.data.total
            })
        },
        // 数据过滤
        formFilter(row, column) {
            if (column.property == 'loadType') {
                let title = ''
                this.interferenceType.forEach(item => {
                    if (item.value == row.loadType) {
                        title = item.label
                    }
                })
                return title
            } else {
                return row[column.property]
            }
        },
        //审核
        planReviewFn() {
            if (this.multipleSelection.length == 1) {
                this.formdata.company = this.multipleSelection[0].orgName
                this.formdata.loadType = this.multipleSelection[0].loadType
                this.formdata.userName = this.multipleSelection[0].userName
                this.formdata.relationUserName = this.multipleSelection[0].relationUserName
                this.formdata.time = this.multipleSelection[0].recordTime
                this.interferenceType.forEach(item => {
                    if (item.id == this.formdata.loadType) {
                        this.formdata.loadType = item.name
                    }
                })
                this.reportreview = true
            } else {
                this.$message({
                    message: this.multipleSelection.length == 0 ? '请选择1条数据!' : '只能选择1条数据!',
                    type: 'warning'
                })
            }
        },
        xz() {
            window.open(this.multipleSelection[0].ifile)
        },
        //普测计划审核通过
        passFn() {
            checkLoadTypeUserA({
                checkComment: this.textarea,
                checkPerson: JSON.parse(window.sessionStorage.getItem('Info')).id,
                checkResult: 1,
                id: this.multipleSelection[0].id
            }).then(res => {
                if (res.code === 'A0000') {
                    this.$message({
                        message: '审核完成',
                        type: 'success'
                    })
                    this.reportreview = false
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    })
                }
            })
        },
        //普测计划不通过
        failFn() {
            checkLoadTypeUserA({
                checkComment: this.textarea,
                checkPerson: JSON.parse(window.sessionStorage.getItem('Info')).id,
                checkResult: 0,
                id: this.multipleSelection[0].id
            }).then(res => {
                if (res.code === 'A0000') {
                    this.$message({
                        message: '审核完成',
                        type: 'success'
                    })
                    this.reportreview = false
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    })
                }
            })
        },
        //普测计划取消
        cancelFn() {
            this.reportreview = false
        },
        // 切换选项
        handleNodeClick(data) {
            //  console.log(data);
            this.formData.orgNo = data.id
        },
        //勾选
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        //重置
        Reset() {
            this.formData = {
                loadType: '',
                userName: '',
                relationUserName: '',
                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
        },
        //当前页操作
        handleCurrentChange(val) {
            this.formData.pageNum = val
            this.onsubmit()
        },
        //当前页码操作
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.onsubmit()
        }
    }
}
</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;
    }
}
.button {
    float: right;
    margin-right: 5px;
}
::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*height:600px;*/
    max-height: calc(100% - 200px);
    max-width: calc(100% - 30px);
}
::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}
</style>
