<template>
  <div>
    <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
      <el-form-item>
                <Area @click="handleNodeArea"></Area>
            </el-form-item>
      <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="pagPower">查询</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="setInformation"
          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 tableHeaderPower"
            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_Data
      :PMSobtain="PMSobtain"
      :title="title"
      @Close="Close"
      :Data="busData"
      :Name="tableHeaderPower"
    ></PMS_Data> -->

    <!-- 新增/修改 -->
    <el-dialog
        :close-on-click-modal="false"
        :title="title"
        :visible.sync="addinformation"
        :before-close="handleClose"
        width="40%"
        height="80%"
    >
      <el-form :inline="true" :model="form" label-width="120px" class="form" :rules="rules" ref="rulesform">
        <el-form-item label="电站编号:" prop="powerId" class="mt10">
          <el-input
              v-model="form.powerId"
              placeholder="请输入电站编号"
              clearable
              :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="电站名称:" prop="powerName" class="mt10">
          <el-input v-model="form.powerName" clearable placeholder="请输入电站名称"></el-input>
        </el-form-item>
        <el-form-item
            prop="orgName"
            class="mt10"
            label="单位组织名称:"
            :rules="{
                        required: true,
                        message: '请输入单位组织名称',
                        trigger: 'change'
                    }"
        >
          <OrganizationCascader
              ref="organizationCascader"
              v-model="form.orgId"
              @change="organizationChange"
          ></OrganizationCascader>
        </el-form-item>
        <el-form-item label="电压等级:" prop="voltageLevel" class="mt10">
          <el-select v-model="form.voltageLevel" 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-item label="关联中台电站:" class="mt10">
          <el-select
              v-model="form.midStationId"
              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-item label="应设点数量:" prop="shouldBeNum" class="mt10">
          <el-input
              v-model="form.shouldBeNum"
              maxlength="10"
              clearable
              placeholder="请输入应设点数量"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleClose">取 消</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 Organization from "./Area/Organization.vue";
import OrganizationCascader from './Area/OrganizationCascader.vue'
import {
  getStatationStatPageList,
  addstatationStat,
  updatestatationStat,
  delstatationStat,
  midStationChange
} from '@/api/hbaccountoperation/setInformation'
import {deptTree} from '@/api/admin/dept'
import Area from '@/views/components/Area/Area.vue'
import {dicData} from '@/assets/commjs/dictypeData'

export default {
  components: {PMS_Data, OrganizationCascader,Area},
  data() {
    return {
      vh: '',
      title: '',
      add: false,
      modify: false,
      // 查询数据
      ruleForm: {
        searchValue: '',
        pageNum: 1,
        pageSize: 20,
        orgId: JSON.parse(window.sessionStorage.getItem('Info')).deptId
      },
      total: 0,
      form: {
        orgId: '',
        orgName: '',
        powerId: '',
        powerName: '',
        shouldBeNum: '',
        voltageLevel: '',
        midStationId: ''
      },
      midStationData: [],
      rules: {
        // powerId: [
        //   { required: true, message: "请输入电站编号", trigger: "blur" },
        // ],
        powerName: [{required: true, message: '请输入电站名称', trigger: 'blur'}],
        voltageLevel: [{required: true, message: '请选择电压等级', trigger: 'change'}],
        shouldBeNum: [
          {required: true, message: '请输入应设点数量', trigger: 'blur'},
          {pattern: /^[0-9]*$/, message: '只可以输入数字', trigger: 'blur'}
        ]
      },
      height: null,
      height1: null,
      isLoading: false,
      disabled: true,
      disabled1: true,
      multipleSelection: [],
      Voltagelevel: [], //电压等级
      Organization: [], //单位组织名称
      //台区台账表头
      tableHeaderPower: [
        {prop: 'orgName', label: '单位组织名称'},
        {prop: 'powerName', label: '电站名称'},
        {prop: 'midStationId', label: '关联中台电站编号'},
        {prop: 'midStationName', label: '关联中台电站'},

        {prop: 'shouldBeNum', label: '应设点数量'},
        {prop: 'voltageLevel', label: '电压等级'}
        // { prop: "scale", label: "母线电压等级", },
        // { prop: "status", label: "数据状态", },
      ],
      editCheckCode: '',
      valueTitle: '',
      busData: [],
      device: '',
      PMSobtain: false,
      information: false, //修改台区信息
      addinformation: false //新增台区信息
    }
  },
  created() {
    this.getclassificationData()
    this.getData()
  },

  mounted() {
    this.setHeight()
    window.addEventListener('resize', this.setHeight)
    this.Power()
    // this.sendMessage()
  },
  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
    },
    midStationIdChange() {
      this.$forceUpdate()
    },
    handleNodeArea(data) {
            this.ruleForm.orgId = data.id
        },
    getMidStationData() {
      let param = {deptCode: this.form.orgId}
      midStationChange(param).then(res => {
        this.midStationData = res.data
        this.$forceUpdate()
      })
    },
    organizationChange(e) {
      console.log(e)
      this.form.midStationId = ''
      this.getMidStationData()
      this.form.orgName =
          this.$refs.organizationCascader &&
          this.$refs.organizationCascader.$refs &&
          this.$refs.organizationCascader.$refs.cascader &&
          this.$refs.organizationCascader.$refs.cascader.getCheckedNodes()[0].label
    },
    //切换单位时候需要重新渲染单位下的电站
    midStationChange(code) {
    },

    //获取类型
    getclassificationData() {
      //电压等级
      var code = 'Dev_Voltage'
      this.Voltagelevel = dicData(code, [])
    },

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

    // 数据过滤
    formFilter(row, column) {
      if (row.column.property == 'voltageLevel') {
        let title = ''
        this.Voltagelevel.forEach(item => {
          if (item.value == row.row.voltageLevel) {
            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() {
      deptTree().then(res => {
        if (res.code == 'A0000') {
          this.Organization = res.data[0].children[0].children
        }
      })
    },

    //新增
    addFn() {
      this.form = {
        orgId: '',
        orgName: '',
        powerId: '',
        powerName: '',
        shouldBeNum: '',
        voltageLevel: '',
        midStationData: ''
      }
      this.disabled = false
      this.modify = false
      this.add = true
      this.title = '新增电站监测点设置信息'
      this.addinformation = true
    },
    //新增台区确定
    addinformationFn() {
      this.$refs.rulesform.validate(value => {
        // console.log(value);
        if (value == true) {
          this.$confirm('是否确认新增?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
              .then(() => {
                addstatationStat(this.form).then(res => {
                  if (res.code == 'A0000') {
                    this.$message({
                      message: res.message,
                      type: 'success'
                    })
                  }
                  this.addinformation = false
                  this.Power()
                })
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消新增'
                })
              })
        }
      })
    },
    handleClose() {
      this.addinformation = false
      if (this.title == '新增电站监测点设置信息') {
        this.$refs.Company.form.valueTitle = ''
      }
    },
    //修改数据
    modifyFn() {
      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.form = this.multipleSelection[0]
      console.log(this.form)
      if (this.form.orgId) {
        this.getMidStationData()
      }
      this.valueTitle = this.multipleSelection[0].orgName
      this.editCheckCode = this.multipleSelection[0].orgId
      this.addinformation = true
      // console.log(this.form);
    },
    //修改信息确定
    modifyinformationFn() {
      this.$refs.rulesform.validate(value => {
        // console.log(value);
        if (value == true) {
          this.$confirm('是否确认修改?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
              .then(() => {
                updatestatationStat(this.form).then(res => {
                  if (res.code == 'A0000') {
                    this.$message({
                      message: res.message,
                      type: 'success'
                    })
                  }
                  this.addinformation = false
                  this.Power()
                })
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消修改'
                })
              })
        }
      })

      // this.addinformation = false;
      // this.Power();
    },
    // 删除
    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.powerId)
            })

            delstatationStat(id).then(res => {
              if ((res.code == 'A0000')) {
                this.$message({
                  type: 'success',
                  message: res.message
                })
              }
              this.Power()
            })
          })
          .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.Power()
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.ruleForm.pageNum = val
      this.Power()
    },
    //导出
    exportEvent() {
      getStatationStatPageList({
        searchValue: this.ruleForm.searchValue,
        pageNum: 1,
        pageSize: this.total
      }).then(res => {
        this.$refs.setInformation.exportData({
          filename: '电站监测点设置信息', // 文件名字
          sheetName: 'Sheet1',
          type: 'xlsx', //导出文件类型 xlsx 和 csv
          useStyle: true,
          data: res.data.records, // 数据源 // 过滤那个字段导出
          columnFilterMethod: function (column, $columnIndex) {
            return !(column.$columnIndex === 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>
