<template>
    <div class="pd10">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="uploadGw()">上送网公司</el-button>
                <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="addReport()">新增</el-button>
            </el-form-item>

        </el-form>

        <el-row>
            <el-col :span="24">
                <vxe-table :data="pageData" :height="height" border size="mini" ref="workOrderTable" style="width: 100%"
                    v-loading="isLoading" header-cell-class-name="table_header" @checkbox-all="selectAllChangeEvent"
                    @checkbox-change="handleSelectionChange">
                    <vxe-table-column key="checkboxs" type="checkbox" align="center" width="55"></vxe-table-column>

                    <template v-for="(item, index) in tableData">
                        <vxe-table-column align="center" :field="item.prop" :title="item.label" :key="index"
                            :min-width="item.width" :formatter="tableDateFilter">
                        </vxe-table-column>
                    </template>

                    <vxe-table-column key="uploadStatus" field="uploadStatus" title="状态" fixed="right" align="center"
                        width="100">
                        <template slot-scope="scope">
                            <el-tag type="primary" size="small" style="color: rgba(6,45,241,0.98); background: #ecf5ff"
                                v-if="scope.row.uploadStatus == 0">
                                未上送
                            </el-tag>
                            <el-tag type="primary" size="small" style="color: #34fc3e; background: #f0f9eb"
                                v-if="scope.row.uploadStatus == 1">
                                已上送
                            </el-tag>
                            <el-tag type="primary" size="small" style="color: #991717; background: #f4f4f5"
                                v-if="scope.row.uploadStatus == 2">
                                取消上送
                            </el-tag>
                            <el-tag type="primary" size="small"
                                style="color: rgba(236,143,21,0.92); background: #f4f4f5"
                                v-if="scope.row.uploadStatus == 3">
                                待重新上送
                            </el-tag>

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

                    <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>
                            <el-button type="primary" size="mini" @click="update(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="total"
                    class="mt10"></el-pagination>
            </el-col>
        </el-row>


        <el-dialog :title="diaTitle" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="320px" class="demo-ruleForm pd10">

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="共需增加监测终端总数量" prop="all_terminal_count">
                            <el-input v-model="ruleForm.all_terminal_count"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="共需增加监测终端总投资（万元）" prop="all_terminal_investment">
                            <el-input v-model="ruleForm.all_terminal_investment"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="每台终端需投资（万元）" prop="one_terminal_investment">
                            <el-input v-model="ruleForm.one_terminal_investment"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="监测点合计-应设点数" prop="monitor_expect_num">
                            <el-input v-model="ruleForm.monitor_expect_num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="监测点合计-已设点数" prop="monitor_actual_num">
                            <el-input v-model="ruleForm.monitor_actual_num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="监测点合计-需增设点数" prop="monitor_add_num">
                            <el-input v-model="ruleForm.monitor_add_num"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="换流站监测-应设点数" prop="converter_expect_num">
                            <el-input v-model="ruleForm.converter_expect_num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="换流站监测-需增设点数" prop="converter_actual_num">
                            <el-input v-model="ruleForm.converter_actual_num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="共需增加监测终端总数量" prop="converter_add_num">
                            <el-input v-model="ruleForm.converter_add_num"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="新能源场站并网的110kV及以上变电站监测-应设点数" prop="source_expect_num">
                            <el-input v-model="ruleForm.source_expect_num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="新能源场站并网的110kV及以上变电站监测-已设点数" prop="source_actual_num">
                            <el-input v-model="ruleForm.source_actual_num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="新能源场站并网的110kV及以上变电站监测-需增设点数" prop="source_add_num">
                            <el-input v-model="ruleForm.source_add_num"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="为干扰源和敏感用户密集区供电变电站监测-应设点数" prop="park_expect_num">
                            <el-input v-model="ruleForm.park_expect_num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="为干扰源和敏感用户密集区供电变电站监测-已设点数" prop="park_actual_num">
                            <el-input v-model="ruleForm.park_actual_num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="为干扰源和敏感用户密集区供电变电站监测-需增设点数" prop="park_add_num">
                            <el-input v-model="ruleForm.park_add_num"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="为重要或特殊用户供电变电站监测-应设点数" prop="sensitive_expect_num">
                            <el-input v-model="ruleForm.sensitive_expect_num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="为重要或特殊用户供电变电站监测-已设点数" prop="sensitive_actual_num">
                            <el-input v-model="ruleForm.sensitive_actual_num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="为重要或特殊用户供电变电站监测-需增设点数" prop="sensitive_add_num">
                            <el-input v-model="ruleForm.sensitive_add_num"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="8">
                        <el-form-item label="其他监测-应设点数" prop="other_expect_num">
                            <el-input v-model="ruleForm.other_expect_num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="其他监测-已设点数" prop="other_actual_num">
                            <el-input v-model="ruleForm.other_actual_num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="其他监测-需增设点数" prop="other_add_num">
                            <el-input v-model="ruleForm.other_add_num"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

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

<script>


import { pmsReportList, addPmsReport, updatePmsReport, uploadGw } from '@/api/pmsUpload/report'
import { dicData } from '@/assets/commjs/dictypeData'

export default {
    components: {},
    data() {
        return {
            vh: '',
            height: null,
            isLoading: false,
            form: {},
            dialogVisible: false,
            diaTitle: '',


            multipleSelection: [],


            tableData: [
                { prop: 'provinceOrgName', label: '省公司', width: 180 },
                { prop: 'all_terminal_count', label: '共需增加监测终端总数量', width: 180 },
                { prop: 'all_terminal_investment', label: '共需增加监测终端总投资（万元）', width: 250 },
                { prop: 'one_terminal_investment', label: '每台终端需投资（万元）', width: 250 },
                { prop: 'monitor_expect_num', label: '监测点合计-应设点数', width: 180 },
                { prop: 'monitor_actual_num', label: '监测点合计-已设点数', width: 180 },
                { prop: 'monitor_add_num', label: '监测点合计-需增设点数', width: 180 },

                { prop: 'converter_expect_num', label: '换流站监测-应设点数', width: 180 },
                { prop: 'converter_actual_num', label: '换流站监测-已设点数', width: 180 },
                { prop: 'converter_add_num', label: '换流站监测-需增设点数', width: 180, showOverflow: true },
                { prop: 'source_expect_num', label: '新能源场站并网的110kV及以上变电站监测-应设点数', width: 250 },
                { prop: 'source_actual_num', label: '新能源场站并网的110kV及以上变电站监测-已设点数', width: 250 },
                { prop: 'source_add_num', label: '新能源场站并网的110kV及以上变电站监测-需增设点数', width: 250 },
                { prop: 'park_expect_num', label: '为干扰源和敏感用户密集区供电变电站监测-应设点数', width: 250 },
                { prop: 'park_actual_num', label: '为干扰源和敏感用户密集区供电变电站监测-已设点数', width: 250 },

                { prop: 'park_add_num', label: '为干扰源和敏感用户密集区供电变电站监测-需增设点数', width: 250 },
                { prop: 'sensitive_expect_num', label: '为重要或特殊用户供电变电站监测-应设点数', width: 250 },
                { prop: 'sensitive_actual_num', label: '为重要或特殊用户供电变电站监测-已设点数', width: 250 },
                {
                    prop: 'sensitive_add_num',
                    label: '为重要或特殊用户供电变电站监测-需增设点数',
                    width: 250,
                    showOverflow: true
                },
                { prop: 'other_expect_num', label: '其他监测-应设点数', width: 180 },
                { prop: 'other_actual_num', label: '其他监测-已设点数', width: 180 },
                { prop: 'other_add_num', label: '其他监测-需增设点数', width: 180 },

            ],
            pageData: [],

            objId: '',

            ruleForm: {

                provinceOrg: '',
                all_terminal_count: null,
                all_terminal_investment: null,
                one_terminal_investment: null,
                monitor_expect_num: null,
                monitor_actual_num: null,
                monitor_add_num: null,
                converter_expect_num: null,
                converter_actual_num: null,
                converter_add_num: null,
                source_expect_num: null,
                source_actual_num: null,
                source_add_num: null,
                park_expect_num: null,
                park_actual_num: null,
                park_add_num: null,
                sensitive_expect_num: null,
                sensitive_actual_num: null,
                sensitive_add_num: null,
                other_expect_num: null,
                other_actual_num: null,
                other_add_num: null

            },

            operateType: 0, //0.新增 1.修改
            rules: {},

            pageNum: 1,
            pageSize: 20,
            total: 0,

        }
    },
    created() {


    },
    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
            let param = {
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            pmsReportList(param).then(res => {
                let tam = []
                this.total = res.data.total
                let temArr = res.data.records
                temArr.forEach(item => {
                    let obj = JSON.parse(item.reportData)
                    obj.provinceOrgName = item.provinceOrgName
                    obj.createTime = item.createTime
                    obj.objId = item.objId
                    obj.uploadStatus = item.uploadStatus
                    tam.push(obj)
                })
                this.pageData = tam

                console.log(this.pageData)
                this.isLoading = false
            })
        },

        addReport() {
            this.diaTitle = '新增电能质量报表'
            this.operateType = 0
            this.dialogVisible = true
        },

        //每页条数改变时触发 选择一页显示多少行
        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
            })
        },

        //工单
        open(row) {
            this.diaTitle = '查看电能质量报表'
            this.dialogVisible = true
            this.operateType = 3
            this.ruleForm = row
        },
        update(row) {
            this.diaTitle = '修改电能质量报表'
            this.objId = row.objId
            this.operateType = 1
            this.dialogVisible = true
            this.ruleForm = row

        },

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

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    let data = {
                        reportType: '01',
                        reportData: JSON.stringify(this.ruleForm)
                    }

                    if (this.operateType == 0) {
                        addPmsReport(data).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '新增成功!',
                                    type: 'success'
                                })
                                this.handleClose()
                                this.pageListInit()
                            }
                        })
                    } else {
                        data.objId = this.objId
                        updatePmsReport(data).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '修改成功!',
                                    type: 'success'
                                })
                                this.handleClose()
                                this.pageListInit()
                            }
                        })
                    }

                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },


        //上报网公司按钮触发
        uploadGw() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    showClose: true,
                    message: '请选择一条报表!!!',
                    type: 'warning'
                })
                return
            }


            this.$confirm('是否确认上送电能质量报表?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let planIds = []
                this.multipleSelection.forEach(item => {
                    planIds.push(item.objId)
                })

                uploadGw(planIds).then(res => {
                    if ((res.code == 'A0000')) {
                        this.$message({
                            type: 'success',
                            message: res.message
                        })
                    }
                    this.onSubmit()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消上送'
                })
            })

        },


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

        tableDateFilter(row, column) {
            if (row.column.property == 'orgLevel') {
                if ('3' == row.row.orgLevel) {
                    return '省'
                } else {
                    return '市'
                }
            } else if (row.column.property == 'orderType') {
                let title = ''
                this.workOrderTypeList.forEach(item => {
                    if (item.code == row.row.orderType) {
                        title = item.name
                    }
                })
                console.log(title)
                return title
            } else if (row.column.property == 'businessType') {
                let title = ''
                this.workBusinessSortList.forEach(item => {
                    if (item.code == row.row.businessType) {
                        title = item.name
                    }
                })
                return title
            } else if (row.column.property == 'orderSource') {
                let title = ''
                this.workOrderSourceList.forEach(item => {
                    if (item.code == row.row.orderSource) {
                        title = item.name
                    }
                })
                return title
            } else if (row.column.property == 'isFeedback') {
                if ('0' == row.row.isFeedback) {
                    return '否'
                } else {
                    return '是'
                }

            } else if (row.column.property == 'uploadStatus') {
                if ('0' == row.row.uploadStatus) {
                    return '否'
                } else {
                    return '是'
                }

            } else {
                return row.row[row.column.property]
            }
        }

    }
}
</script>
<style lang="less" scoped></style>
