<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="Bus"
          >查询</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="busData"
        :height="height"
        border
        :row-config="{ isCurrent: true, isHover: true }"
        size="mini"
        ref="BusbarList"
        style="width: 100%"
        v-loading="isLoading"
        header-cell-class-name="table_header"
        @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 tableHeaderBus"
          align="center"
          :field="item.prop"
          :title="item.label"
          :min-width="item.width"
          :key="index"
          :formatter="formFilter"
          :show-overflow="true"
        >
        </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_BusbarList
      :PMSobtain="PMSobtain"
      :title="title"
      @Close="Close"
      :Data="busData"
      :Name="tableHeaderBus"
    ></PMS_BusbarList> -->

    <!-- 新增/修改 -->
    <el-dialog :close-on-click-modal="false"
      :title="title"
      :visible.sync="addinformation"
      
      width="40%"
      height="80%"
    >
      <el-form
        :inline="true"
        :model="form"
        label-width="120px"
        class="form"
      >
        <el-form-item label="母线编号:" >
          <el-input
            v-model="form.generatrixId"
            placeholder="请输入"
            clearable
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="母线名称:" >
          <el-input
            v-model="form.generatrixName"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="电站名称:" >
          <el-select
            v-model="form.statationId"
            clearable
            placeholder="请选择"
            filterable
          >
            <el-option
              v-for="item in statationName"
              :key="item.powerId"
              :label="item.orgName + '_' + item.powerName"
              :value="item.powerId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="母线电压等级:" >
          <el-select v-model="form.scale" clearable placeholder="请选择">
            <el-option
              v-for="item in Voltagelevel"
              :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_BusbarList from "./PMS/PMS_BusbarList.vue";
// import bus from "@/assets/js/eventBus";
import {
  getGeneratrixPageList,
  addGeneratrix,
  updateGeneratrix,
  delGeneratrix,
  getstatationStatList,
} from "@/api/hbaccountoperation/BusbarList";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  components: { PMS_BusbarList },
  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: {
        generatrixId: "",
        generatrixName: "",
        statationId: "",
        scale: "",
      },
      height: null,
      height1: null,
      isLoading: false,
      disabled: true,
      disabled1: true,
      multipleSelection: [],
      Voltagelevel: [], //电压等级
      statationName: [],
      //台区台账表头
      tableHeaderBus: [
        { prop: "generatrixId", label: "母线编号" },
        { prop: "generatrixName", label: "母线名称" },
        { prop: "statationId", label: "电站编号" },
        { prop: "statationName", label: "电站名称" },
        { prop: "scale", label: "母线电压等级" },
        // { prop: "status", label: "数据状态", },
      ],
      busData: [],
      device: "",
      PMSobtain: false,
      information: false, //修改台区信息
      addinformation: false, //新增台区信息
    };
  },
  created() {
    this.getclassificationData();
  },

  mounted() {
    this.device = window.devicePixelRatio;
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
   
    this.Bus();
  },
  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 = "Dev_Voltage";
      this.Voltagelevel = dicData(code, []);
    },

    //PMS获取数据
    // PMSobtainFn() {
    //   this.PMSobtain = true;
    //   this.title = "线路表";
    // },
    //查询母线信息
    Bus() {
      this.isLoading = true;
      //低压用户台账
      getGeneratrixPageList(this.ruleForm).then((res) => {
        this.isLoading = false;
        this.busData = res.data.records;
        this.total = res.data.total;
      });
    },

    // 数据过滤
    formFilter(row, column) {
      if (row.column.property == "scale") {
        let title = "";
        this.Voltagelevel.forEach((item) => {
          if (item.value == row.row.scale) {
            title = item.label;
          }
        });

        return title;
      } else {
        return row.row[row.column.property];
      }
    },

    //数据上传
    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) => {
        // console.log(res);
        this.statationName = res.data;
      });
    },
    //新增
    addFn() {
      this.form = {};
      this.disabled = false;
      this.modify = false;
      this.add = true;
      this.title = "新增母线表信息";
      this.addinformation = true;
      this.getData();
    },
    //新增台区确定
    addinformationFn() {
      addGeneratrix(this.form).then((res) => {
        if (res.code == "A0000") {
          this.$message({
            message: res.message,
            type: "success",
          });
        }
        this.addinformation = false;
        this.Bus();
      });
    },
    //修改数据
    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];
    },
    //修改信息确定
    modifyinformationFn() {
      updateGeneratrix(this.form).then((res) => {
        if (res.code == "A0000") {
          this.$message({
            message: res.message,
            type: "success",
          });
        }
        this.addinformation = false;
        this.Bus();
      });
      // this.addinformation = false;
      // this.Bus();
    },
    // 删除
    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.generatrixId);
          });

          delGeneratrix(id).then((res) => {
            if ((res.code == "A0000")) {
              this.$message({
                type: "success",
                message: res.message,
              });
            }
            this.Bus();
          });
        })
        .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.Bus();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.ruleForm.pageNum = val;
      this.Bus();
    },
    //导出
    exportEvent() {
      this.$refs.BusbarList.exportData({
        filename: "export", // 文件名字
        sheetName: "Sheet1",
        type: "xlsx", //导出文件类型 xlsx 和 csv
        useStyle: true,
        data: this.totalData, // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
      });
    },
  },
};
</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>
