<template>
    <div>
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
            <el-form-item label="信息查询:">
                <el-input v-model.trim="ruleForm.submitName" 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"
            v-if="addinformation"
            :visible.sync="addinformation"
            width="45%"
            height="80%"
        >
            <el-form :inline="true" :model="form" label-width="140px" class="form" ref="elForm" :rules="rules">
                <el-form-item>
                    <Area @click="handleNodeClick" ref="area" style="margin-bottom: 0px; width: 100%"></Area>
                </el-form-item>
                <el-form-item label="变压器类型:" prop="type">
                    <el-select v-model="form.type" clearable placeholder="请选择变压器类型" filterable>
                        <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="name">
                    <el-input v-model="form.name" placeholder="请输入变压器名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="变压器编号:" prop="id">
                    <el-input
                        v-model="form.id"
                        onkeyup="value = value.replace(/[^\w_]/g,'')"
                        maxlength="18"
                        placeholder="请输入变压器编号"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="变电站名称:" prop="powerName">
                    <el-input v-model="form.powerName" placeholder="请输入变电站名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="变电站编号:" prop="powerId">
                    <el-input
                        v-model="form.powerId"
                        onkeyup="value = value.replace(/[^\w_]/g,'')"
                        maxlength="18"
                        placeholder="请输入变电站编号"
                        clearable
                    ></el-input>
                </el-form-item>

                <el-form-item label="装机容量(kVA):" prop="icapacity">
                    <el-input
                        v-model="form.icapacity"
                        onkeyup="value = value.replace(/[^0-9]/g,'')"
                        maxlength="10"
                        clearable
                        placeholder="请输入装机容量"
                    ></el-input>
                </el-form-item>
                <el-form-item label="额定容量(kVA):" prop="rcapacity">
                    <el-input
                        v-model="form.rcapacity"
                        onkeyup="value = value.replace(/[^0-9]/g,'')"
                        maxlength="10"
                        clearable
                        placeholder="请输入额定容量"
                    ></el-input>
                </el-form-item>
                <el-form-item label="额定电压(kV):" prop="voltage">
                    <el-select v-model="form.voltage" 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="额定功率(kW):" prop="ratedPower">
                    <el-input v-model="form.ratedPower" clearable placeholder="请输入额定功率"></el-input>
                </el-form-item>

                <el-form-item label="阻抗电压(kV):" prop="impedanceVoltage">
                    <el-select v-model="form.impedanceVoltage" 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>
            <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 Area from "@/views/components/Area/Area.vue";
import {
  getGeneratrixWirePageList,
  addGeneratrixWire,
  updateGeneratrixWire,
  delGeneratrixWire,
  getstatationStatList,
} from "@/api/hbaccountoperation/RouteTable";
import {
  getAllTransformerList,
  addTransformer,
  updateTransformer,
  delTransformer,
} from "@/api/hbaccountoperation/transformer";
import { dicData } from "@/assets/commjs/dictypeData";
// import { dicData } from "@/assets/commjs/dictypeData";
export default {
  components: { PMS_Data, Area },
  data() {
    return {
      vh: "",
      title: "",
      add: false,
      modify: false,
      disabled: false,

      // 查询数据
      ruleForm: {
        submitName: "",
        pageNum: 1,
        pageSize: 20,
        // orderBy: "",
        // searchBeginTime: "",
        // searchEndTime: "",
        // searchState: 0,
        // sortBy: "",
        // status: 0
      },
      total: 0,
      form: {
        name: "",
        ratedPower: "",
        icapacity: "",
        rcapacity: "",
        type: "",
        impedanceVoltage: "",
        voltage: "",
        powerName: "",
        powerId: "",
        orgName: "",
        orgId: "",
        id: "",
      },
      rules: {
        type: [
          { required: true, message: "请选择变压器类型", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入变压器名称", trigger: "blur" },
        ],
        id: [{ required: true, message: "请输入变压器编号", trigger: "blur" }],
        powerId: [{ required: true, message: "变电站编号", trigger: "blur" }],
        powerName: [
          { required: true, message: "请输入变电站名称", trigger: "blur" },
        ],
        icapacity: [
          { required: true, message: "请输入装机容量", trigger: "blur" },
        ],
        rcapacity: [
          { required: true, message: "请输入额定容量", trigger: "blur" },
        ],
        voltage: [
          { required: true, message: "请选择额定电压", trigger: "change" },
        ],
        ratedPower: [
          { required: true, message: "请输入额定功率", trigger: "blur" },
        ],
        impedanceVoltage: [
          { required: true, message: "请选择阻抗电压", trigger: "change" },
        ],
      },
      height: null,
      height1: null,
      isLoading: false,
      disabled1: true,
      multipleSelection: [],
      //台区台账表头
      tableHeaderLine: [
        { prop: "orgName", label: "组织机构名称", width: "120px" },
        { prop: "powerName", label: "变电站名称", width: "120px" },
        { prop: "name", label: "变压器名称", width: "120px" },
        { prop: "type", label: "变压器类型", width: "120px" },
        { prop: "icapacity", label: "装机容量(kVA)", width: "120px" },
        { prop: "rcapacity", label: "额定容量(kVA)", width: "120px" },
        { prop: "voltage", label: "额定电压(kV)", width: "120px" },
        { prop: "ratedPower", label: "额定功率(kW)", width: "120px" },
        { prop: "impedanceVoltage", label: "阻抗电压(kV)", width: "120px" },
      ],
      lineData: [],
      Regionalcharacteristics: [], //地区特征
      runningstate: [], //运行状态
      device: "",
      BusNo: "",
      PMSobtain: false,
      information: false, //修改台区信息
      addinformation: false, //新增台区信息
      voltageLevelList: [], //电压等级
      typeList: [], //电压等级
      flag: true,
    };
  },
  created() {
    this.Line();

    //电压等级
    this.voltageLevelList = dicData("Dev_Voltage", []);
    this.typeList = dicData("Voltage_Transformer", []);
  },

  mounted() {
    this.device = window.devicePixelRatio;
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          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 = "线路表";
    // },
pagLine() {
  this.ruleForm.pageNum = 1;
      this.ruleForm.pageSize = 20;
      this.Line()
},
    //查询线路信息
    Line() {
      this.isLoading = true;
      getAllTransformerList(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.submitName = "";
    },

    //新增
    addFn() {
      this.form = {};
      this.flag = true;
      this.disabled = false;
      this.modify = false;
      this.add = true;
      this.title = "新增线路表信息";
      this.addinformation = true;
    },
    //新增台区确定
    addinformationFn() {
      this.$refs.elForm.validate((valid) => {
        if (valid) {
          this.$confirm("是否确认新增?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              addTransformer(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.flag = false;
      this.addinformation = true;
      this.form = JSON.parse(JSON.stringify(this.multipleSelection[0]));
      setTimeout(() => {
        this.$refs.area.form.valueTitle = this.form.orgName;
      }, 50);
    },
    //修改台区信息确定
    modifyinformationFn() {
      this.$refs.elForm.validate((valid) => {
        if (valid) {
          this.$confirm("是否确认修改?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              updateTransformer(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);
          });

          delTransformer(id).then((res) => {
            if ((res.code == "A0000")) {
              this.$message({
                type: "success",
                message: res.message,
              });
              this.Line();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 部门点击
    handleNodeClick(data) {
      if (this.flag) {
        this.form.orgId = data.code;
        this.form.orgName = data.name;
      } else {
        this.flag = true;
      }
    },

    //关闭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() {
      getAllTransformerList({
        submitName: this.ruleForm.submitName,
        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 == "type") {
        let title = "";
        dicData("Voltage_Transformer", []).forEach((item) => {
          if (item.id == row.row.type) {
            title = item.label;
          }
        });
        return title;
      } else if (row.column.property == "voltage") {
        let title = "";
        dicData("Dev_Voltage", []).forEach((item) => {
          if (item.id == row.row.voltage) {
            title = item.label;
          }
        });
        return title;
      } else if (row.column.property == "impedanceVoltage") {
        let title = "";
        dicData("Dev_Voltage", []).forEach((item) => {
          if (item.id == row.row.impedanceVoltage) {
            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>
