<template>
    <div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item style="margin-bottom: 0px">
                <Area @click="handleNodeClick"></Area>
            </el-form-item>
            <el-form-item label="筛选数据:">
                <el-input v-model="formInline.searchValue" clearable size="small" placeholder="请输入变电站名称" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="newlyAdded">新增</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-table
                    stripe
                    :data="tableData"
                    id="rebateSetTable"
                    ref="rebateSetTable"
                    :row-config="{ isCurrent: true, isHover: true }"
                    border
                    :height="`${vth}px`"
                    header-cell-class-name="table_header"
                    :header-cell-style="{
                        height: '25px',
                        padding: '0px'
                    }"
                    :row-style="{ height: '28px' }"
                    :cell-style="{ padding: '0px' }"
                >
                    <el-table-column align="center" prop="number" label="序号" width="80">
                        <template scope="scope">
                            <span>{{ (formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="deptName"
                        label="单位"
                        show-overflow-tooltip
                        min-width="120"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="name"
                        label="变电站"
                        show-overflow-tooltip
                        min-width="120"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="lng"
                        label="经度"
                        show-overflow-tooltip
                        min-width="120"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="lat"
                        label="纬度"
                        show-overflow-tooltip
                        min-width="120"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="type"
                        label="变电站类型"
                        show-overflow-tooltip
                        :formatter="formatterT"
                        min-width="120"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="voltageLevel"
                        label="电压等级"
                        show-overflow-tooltip
                        :formatter="formatterV"
                        min-width="120"
                    ></el-table-column>
                    <el-table-column align="center" label="操作" show-overflow-tooltip min-width="120">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="modify(scope.row)">
                                修改
                            </el-button>
                            <el-button type="primary" icon="el-icon-delete" size="mini" @click="deletes(scope.row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="mt10"
                    align="right"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="formInline.pageNum"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="formInline.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </el-col>
        </el-row>

        <el-dialog
            :close-on-click-modal="false"
            :title="title"
            :visible="dialogVisible"
            width="35%"
            :before-close="handleClose"
        >
            <el-form :inline="true" class="form" ref="form" :rules="rules" :model="form" label-width="100px">
                <Area @click="handleNodemap" ref="Area"></Area>

                <el-form-item label="变电站名称:" prop="name">
                    <el-input v-model="form.name" :disabled="title == '修改'" placeholder="请输入变电站名称"></el-input>
                </el-form-item>

                <el-form-item label="经度:" prop="lng">
                    <el-input
                        v-model="form.lng"
                        onkeyup="value=value.replace(/^\.+|[^\d.]/g,'')"
                        placeholder="请输入经度"
                    ></el-input>
                </el-form-item>
                <el-form-item label="纬度:" prop="lat">
                    <el-input
                        v-model="form.lat"
                        onkeyup="value=value.replace(/^\.+|[^\d.]/g,'')"
                        placeholder="请输入纬度"
                    ></el-input>
                </el-form-item>
                <el-form-item label="变电站类型:" prop="type">
                    <el-select v-model="form.type" placeholder="请选择变电站类型">
                        <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电压等级:" prop="voltageLevel">
                    <el-select v-model="form.voltageLevel" placeholder="请选择电压等级">
                        <el-option
                            v-for="item in voltageLevelList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择变电站:">
                    <el-select v-model="form.substationId" placeholder="请选择变电站">
                        <el-option
                            v-for="item in substation"
                            :key="item.powerId"
                            :label="item.powerName"
                            :value="item.powerId"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="resetForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { pageTable } from '@/api/templateConfiguration'
import {
    substationExpend,
    insert,
    substationDelete,
    substationUpdate,
    getSubstation
} from '@/api/JIBEIDistributed-management/analysismodule'
import Area from '@/views/components/Area/Area.vue'

import { dicData } from '@/assets/commjs/dictypeData'
export default {
    components: { Area },
    data() {
        return {
            vth: null,
            formInline: {
                orgId: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                searchValue: '',
                pageNum: 1,
                pageSize: 20
            },
            form: {
                deptId: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                lat: '',
                lng: '',
                name: '',
                substationId: '',
                type: '',
                voltageLevel: ''
            },
            substation: [],
            rules: {
                lat: [{ required: true, message: '请输入经度', trigger: 'change' }],
                lng: [{ required: true, message: '请输入纬度', trigger: 'change' }],
                name: [{ required: true, message: '请输入变电站名称', trigger: 'blur' }],
                substationId: [{ required: true, message: '请选择变电站', trigger: 'change' }],
                type: [{ required: true, message: '请选择变电站类型', trigger: 'change' }],
                voltageLevel: [{ required: true, message: '请选择电压等级', trigger: 'change' }]
            },

            total: 0,
            title: '',
            isLoading: false,
            dialogVisible: false,
            tableData: [],
            typeList: [],
            voltageLevelList: []
        }
    },
    created() {
        this.getSubstationS()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.typeList = dicData('Substation_Type', [])
        this.voltageLevelList = dicData('Dev_Voltage', [])
        this.query()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vth = window.sessionStorage.getItem('appheight') - 160
        },
        query() {
            this.isLoading = true
            if (this.formInline.searchValue !== '') {
                this.formInline.pageNum = 1
            }

            substationExpend(this.formInline).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
                this.isLoading = false
            })
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formInline.pageSize = val
            this.query1()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formInline.pageNum = val
            this.query1()
        },

        //过滤
        formatterT(row, column) {
            let title = ''
            dicData('Substation_Type', []).forEach(item => {
                if (item.id == row.type) {
                    title = item.name
                }
            })
            return title
        },
        formatterV(row, column) {
            let title = ''
            dicData('Dev_Voltage', []).forEach(item => {
                if (item.id == row.voltageLevel) {
                    title = item.name
                }
            })
            return title
        },

        //分页查询用
        query1() {
            this.isLoading = true

            substationExpend(this.formInline).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
                this.isLoading = false
            })
        },
        handleNodeClick(data) {
            this.formInline.orgId = data.id
        },
        handleNodemap(data) {
            this.form.deptId = data.id
        },
        // 新增
        newlyAdded() {
            ;(this.dialogVisible = true), (this.title = '新增')
            setTimeout(() => {
                this.$refs.Area.form.valueTitle = JSON.parse(window.sessionStorage.getItem('Info')).deptName
                this.form.deptId = JSON.parse(window.sessionStorage.getItem('Info')).deptId
            }, 0)
        },
        // 修改
        modify(e) {
            this.title = '修改'
            this.dialogVisible = true

            setTimeout(() => {
                this.$refs['form'].resetFields()
                this.form = JSON.parse(JSON.stringify(e))
                this.$refs.Area.form.valueTitle = e.deptName
            }, 0)
        },

        getSubstationS() {
            let data = {
                deptCode: '',
                deptId: '',
                generatrixId: '',
                stationId: ''
            }
            getSubstation(data).then(res => {
                if (res.code == 'A0000') {
                    this.substation = res.data
                }
            })
        },
        // 删除
        deletes(e) {
            this.$confirm('请确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    substationDelete([e]).then(res => {
                        if (res.code == 'A0000') {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '删除成功!',
                                    type: 'success'
                                })
                            }
                            this.formInline.pageNum = 1
                            this.formInline.pageSize = 20
                            this.query()
                            this.handleClose()
                        }
                    })
                })
                .catch(() => {})
        },
        // 提交
        resetForm() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.title == '新增') {
                        insert(this.form).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '新增成功!',
                                    type: 'success'
                                })
                                this.formInline.pageNum = 1
                                this.formInline.pageSize = 20
                                this.query()
                                this.handleClose()
                            }
                        })
                    } else if (this.title == '修改') {
                        // substationUpdate
                        substationUpdate(this.form).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '修改成功!',
                                    type: 'success'
                                })
                                this.formInline.pageNum = 1
                                this.formInline.pageSize = 20
                                this.query()
                                this.handleClose()
                            }
                        })
                    }
                }
            })
        },
        handleClose() {
            this.dialogVisible = false
            this.$refs['form'].resetFields()
            setTimeout(() => {
                this.form = {
                    deptId: '',
                    lat: '',
                    lng: '',
                    name: '',
                    type: '',
                    voltageLevel: ''
                }
            }, 0)
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-form-item {
        display: flex;
        width: 48%;
        .el-form-item__content {
            flex: 1 !important;
            .el-select {
                width: 100%;
            }

            .el-date-editor {
                width: 100%;
            }
        }
    }
}
</style>
