<template>
    <div>
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
            <el-form-item label="信息查询:">
                <el-input v-model.trim="ruleForm.searchValue" placeholder="请输入查询信息" clearable></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" class="pms" icon="el-icon-download">PMS获取数据</el-button>
                <!-- <el-button type="primary" class="ml10" @click="upload" icon="el-icon-upload2">PMS数据上传</el-button> -->
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="pagLine">查询</el-button>
                <!-- <el-button type="primary" icon="el-icon-refresh-right" @click="Reset"
          >重置</el-button
        > -->
                <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
            </el-form-item>
        </el-form>

        <template>
            <span>
                <el-button type="primary" size="mini" class="ml10" icon="el-icon-plus" @click="addFn">新增</el-button>
                <el-button type="primary" size="mini" class="ml10" icon="el-icon-edit" @click="modifyFn">
                    修改
                </el-button>
                <el-button type="primary" size="mini" class="ml10" icon="el-icon-delete" @click="deleteFn">
                    删除
                </el-button>
            </span>
            <vxe-table
                stripe
                :data="lineData"
                :height="height"
                border
                :row-config="{ isCurrent: true, isHover: true }"
                size="mini"
                ref="RouteTable"
                style="width: 100%"
                v-loading="isLoading"
                header-cell-class-name="table_header"
                @checkbox-all="handleSelectionChange"
                @checkbox-change="handleSelectionChange"
                class="mt10"
            >
                <vxe-table-column align="center" type="checkbox" width="55"></vxe-table-column>

                <vxe-table-column
                    v-for="(item, index) in tableHeaderLine"
                    align="center"
                    :field="item.prop"
                    :title="item.label"
                    :min-width="item.width"
                    :key="index"
                    :show-overflow="true"
                    :formatter="formFilter"
                ></vxe-table-column>
            </vxe-table>
            <el-pagination
                background
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="ruleForm.pageNum"
                :page-sizes="[20, 30, 40, 50, 100]"
                :page-size="ruleForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                class="mt10"
            ></el-pagination>
        </template>

        <!-- <PMS_Data
      :PMSobtain="PMSobtain"
      :title="title"
      @Close="Close"
      :Data="lineData"
      :Name="tableHeaderLine"
    ></PMS_Data> -->

        <!-- 新增/修改 -->
        <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="addinformation" width="45%" height="80%">
            <el-form :inline="true" :model="form" label-width="140px" class="form" :rules="rules" ref="rulesform">
                <el-form-item label="线路编号:" prop="id" class="mt10">
                    <el-input
                        v-model="form.id"
                        maxlength="18"
                        placeholder="请输入线路编号"
                        clearable
                        :disabled="disabled"
                    ></el-input>
                </el-form-item>
                <el-form-item label="线路名称:" prop="name" class="mt10">
                    <el-input v-model="form.name" clearable placeholder="请输入线路名称"></el-input>
                </el-form-item>
                <el-form-item label="电压等级:" prop="scale" class="mt10">
                    <el-select v-model="form.scale" clearable placeholder="请选择电压等级" filterable>
                        <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="所属母线:" prop="generatrixName" class="mt10">
                    <el-input v-model="form.generatrixName" clearable placeholder="请输入所属母线"></el-input>
                </el-form-item>

                <el-form-item label="所属电站:" prop="stationId" class="mt10">
                    <el-select
                        v-model="form.stationId"
                        clearable
                        placeholder="请选择所属电站"
                        filterable
                        @change="stationChange"
                    >
                        <el-option
                            v-for="item in stationList"
                            :key="item.powerId"
                            :label="item.orgName + '_' + item.powerName"
                            :value="item.powerId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联中台母线:" class="mt10">
                    <el-select
                        v-model="form.midBusId"
                        filterable
                        clearable
                        placeholder="请选择中台电站"
                        @change="midStationIdChange"
                    >
                        <el-option
                            v-for="item in midStationData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addinformation = false">取 消</el-button>
                <el-button v-if="add" type="primary" @click="addinformationFn">确 定</el-button>
                <el-button v-if="modify" type="primary" @click="modifyinformationFn">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import PMS_Data from '@/views/components/Accountinformation/PMS_Data'
// import bus from "@/assets/js/eventBus";
import {
    getGeneratrixWirePageList,
    addGeneratrixWire,
    updateGeneratrixWire,
    delGeneratrixWire,
    getstatationStatList,
    getMidBusBar
} from '@/api/hbaccountoperation/RouteTable'
import { dicData } from '@/assets/commjs/dictypeData'
// import { dicData } from "@/assets/commjs/dictypeData";
export default {
    components: { PMS_Data },
    data() {
        return {
            vh: '',
            title: '',
            add: false,
            modify: false,
            disabled: false,

            // 查询数据
            ruleForm: {
                searchValue: '',
                pageNum: 1,
                pageSize: 20
                // orderBy: "",
                // searchBeginTime: "",
                // searchEndTime: "",
                // searchState: 0,
                // sortBy: "",
                // status: 0
            },
            total: 0,
            form: {
                stationId: '',
                generatrixName: '',
                id: '',
                midBusId: '',
                name: '',
                scale: ''
            },
            rules: {
                generatrixName: [{ required: true, message: '请输入所属母线', trigger: 'blur' }],
                name: [{ required: true, message: '请输入线路名称', trigger: 'blur' }],
                stationId: [{ required: true, message: '请选择所属电站', trigger: 'change' }],
                scale: [{ required: true, message: '请选择电压等级', trigger: 'change' }]
                // id: [
                //   { required: true, message: "请输入线路编号", trigger: "blur" },
                //   { pattern: /^[0-9a-z]*$/, message: "只可以输入数字和小写字母", trigger: "blur" },
                // ],
            },
            stationList: [],
            voltageLevel: [],
            height: null,
            height1: null,
            isLoading: false,
            disabled1: true,
            midStationData: [],
            multipleSelection: [],
            //台区台账表头
            tableHeaderLine: [
                { prop: 'midBusId', label: '同源线路编号' },
                { prop: 'midBusName', label: '同源母线名称' },
                { prop: 'name', label: '名称' },
                { prop: 'scale', label: '电压等级' },
                { prop: 'generatrixName', label: '所属母线' },
                { prop: 'stationName', label: '所属电站' },
                { prop: 'createTime', label: '创建时间' }
                // { prop: "status", label: "数据状态", },
            ],
            lineData: [],
            Regionalcharacteristics: [], //地区特征
            runningstate: [], //运行状态
            device: '',
            BusNo: '',
            PMSobtain: false,
            information: false, //修改台区信息
            addinformation: false, //新增台区信息
            voltageLevelList: [] //电压等级
        }
    },
    created() {
        this.Line()

        //电压等级
        this.voltageLevelList = dicData('Dev_Voltage', [])
    },

    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    computed: {},
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.height = window.sessionStorage.getItem('appheight') - 205
            this.height1 = window.sessionStorage.getItem('appheight') - 285
        },
        //获取类型
        // getclassificationData() {
        //   //地区特征
        //   var code = "Area";
        //   this.Regionalcharacteristics = dicData(code, []);
        //   //运行状态
        //   var code1 = "Line_State";
        //   this.runningstate = dicData(code1, []);
        // },

        //PMS获取数据
        // PMSobtainFn() {
        //   this.PMSobtain = true;
        //   this.title = "线路表";
        // },

        midStationIdChange() {
            this.$forceUpdate()
        },
        //电站change事件
        stationChange(val) {
            this.$forceUpdate()
            this.form.midBusId = ''
            getMidBusBar({ station: val }).then(res => {
                this.midStationData = res.data
            })

            this.stationList.forEach(item => {
                if (item.powerId === val) {
                    this.form.stationName = item.powerName
                }
            })
        },
        pagLine() {
            this.ruleForm.pageNum = 1
            this.ruleForm.pageSize = 20
            this.Line()
        },
        //查询线路信息
        Line() {
            this.isLoading = true
            getGeneratrixWirePageList(this.ruleForm).then(res => {
                this.isLoading = false
                this.lineData = res.data.records
                this.total = res.data.total
            })
        },

        //数据上传
        upload() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    showClose: true,
                    message: '请选择台账!!!',
                    type: 'warning'
                })
                return
            }
            this.$message({
                showClose: true,
                message: '上传成功！！！',
                type: 'success'
            })
        },
        // 重置
        Reset() {
            // 查询数据
            this.ruleForm.searchValue = ''
        },
        //获取数据
        getData() {
            getstatationStatList({}).then(res => {
                this.stationList = res.data
            })
        },

        //新增
        addFn() {
            this.form = {
                stationId: '',
                generatrixName: '',
                id: '',
                name: '',
                scale: ''
            }
            this.disabled = false
            this.modify = false
            this.add = true
            this.title = '新增线路表信息'
            this.addinformation = true
            this.getData()
        },
        //新增台区确定
        addinformationFn() {
            this.$refs.rulesform.validate(value => {
                // console.log(value);
                if (value == true) {
                    this.$confirm('是否确认新增?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            addGeneratrixWire(this.form).then(res => {
                                if (res.code == 'A0000') {
                                    this.$message({
                                        message: res.message,
                                        type: 'success'
                                    })
                                }
                                this.addinformation = false
                                this.Line()
                            })
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消新增'
                            })
                        })
                }
            })
        },
        //修改数据
        modifyFn() {
            this.getData()
            this.disabled = true
            this.modify = true
            this.add = false
            this.title = '修改线路表信息'
            if (this.multipleSelection.length != 1) {
                this.$message({
                    showClose: true,
                    message: '请选择唯一线路!!!',
                    type: 'warning'
                })
                return
            }
            this.addinformation = true
            this.form = this.multipleSelection[0]
            getMidBusBar({ station: this.multipleSelection[0].stationId }).then(res => {
                this.midStationData = res.data
            })
        },
        //修改台区信息确定
        modifyinformationFn() {
            this.$refs.rulesform.validate(value => {
                // console.log(value);
                if (value == true) {
                    this.$confirm('是否确认修改?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            updateGeneratrixWire(this.form).then(res => {
                                if (res.code == 'A0000') {
                                    this.$message({
                                        message: res.message,
                                        type: 'success'
                                    })
                                }
                                this.addinformation = false
                                this.Line()
                            })
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消修改'
                            })
                        })
                }
            })
        },
        // 删除
        deleteFn() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    showClose: true,
                    message: '请选择台账!!!',
                    type: 'warning'
                })
                return
            }
            this.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let id = []
                    this.multipleSelection.forEach(item => {
                        id.push(item.id)
                    })

                    delGeneratrixWire(id).then(res => {
                        if ((res.code == 'A0000')) {
                            this.$message({
                                type: 'success',
                                message: res.message
                            })
                            this.Line()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },

        //关闭PMS数据弹框
        // Close() {
        //   this.PMSobtain = false;
        // },

        // 表格多选
        handleSelectionChange(row) {
            this.multipleSelection = row.records
            // console.log(this.multipleSelection);
        },

        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.ruleForm.pageSize = val
            this.Line()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.ruleForm.pageNum = val
            this.Line()
        },
        //导出
        exportEvent() {
            getGeneratrixWirePageList({
                searchValue: this.ruleForm.searchValue,
                pageNum: 1,
                pageSize: this.total
            }).then(res => {
                this.$refs.RouteTable.exportData({
                    filename: '线路台账', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    data: res.data.records, // 数据源 // 过滤那个字段导出
                    columnFilterMethod: function (column, $columnIndex) {
                        return !(column.$columnIndex === 0)
                    }
                })
            })
        },

        formFilter(row, column) {
            if (row.column.property == 'scale') {
                let title = ''
                this.voltageLevelList.forEach(item => {
                    if (item.value == row.row.scale) {
                        title = item.label
                    }
                })
                return title
            } else {
                return row.row[row.column.property]
            }
        },

        //获取电站
        getStationList() {
            getstatationStatList({}).then(res => {
                if (res.code === 'A0000') {
                    this.stationList = res.data
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .vxe-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}

::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-input__inner {
                width: 100% !important;
            }
            .el-date-editor {
                width: 100%;
            }
        }
    }
}

.pms {
    margin-left: 10px;
}
.obtain {
    margin-left: 1220px;
}
</style>
