<template>
  <div class="pd10">
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item style="float: right;margin-right: 10px">
        <el-button type="primary" icon="el-icon-add" @click="openAdd">新增电站</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <vxe-table
            :data="pageData"
            :height="height"
            border
            size="mini"
            ref="workOrderTable"
            style="width: 100%"
            v-loading="isLoading"
            header-cell-class-name="table_header"
            @checkbox-all="selectAllChangeEvent"
            @checkbox-change="handleSelectionChange"
        >

          <template v-for="(item, index) in tableHeaderQualitystatistics">
            <vxe-table-column
                align="center"
                :field="item.prop"
                :title="item.label"
                :key="index"
                :min-width="item.width"
                :formatter="tableDateFilter"
            >
            </vxe-table-column>
          </template>

          <vxe-table-column
              key="operate"
              field=""
              show-overflow
              align="center"
              title="操作"
              min-width="200px"
              fixed="right"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="delteParkSattion(scope.row)">删除</el-button>
            </template>
          </vxe-table-column>

        </vxe-table>
        <el-pagination
            background
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[20, 30, 40, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.length"
            class="mt10"
        ></el-pagination>
      </el-col>
    </el-row>


    <el-dialog
        :modal="false"
        title="选择电站"
        :visible.sync="dialogVisible"
        width="20%"
        :before-close="handleClose">
      <el-form style="height: 200px" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
               class="demo-ruleForm pd10">

        <el-form-item label="电站信息" class="mt15" prop="parkName">
          <el-select v-model="ruleForm.midStationId" clearable placeholder="请选择电站" :filterable="true">
            <el-option
                v-for="item in stationList"
                :key="item.id"
                :label="item.operationName+'_'+item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>

import Organization from '../../../Process-supervision/Supervisionmanage2/Area/Organization'
import {pageStationList, stationList, addParkStationAss, delParkStationAss} from '@/api/Accountreview/pmsPark/index'


export default {
  components: {Organization},
  // 接受父组件的值
  props: {
    objId: String,
    cityOrg: String,
  },

  watch:{
    objId:{
      handler(val){
        if(val){
          this.$nextTick(()=>{
            this.pageData = []
            this.pageListInit()
          })
        }

      }
    }
  },
  data() {
    return {
      vh: '',
      height: null,
      isLoading: false,

      dialogVisible: false,

      ruleForm: {
        parkId: this.objId,
        midStationId: '',
      },
      rules: {
        maintOrg: [{required: true, message: '请选择运维单位', trigger: 'blur'}],
      },

      stationList: [],

      multipleSelection: [],

      tableHeaderQualitystatistics: [
        {prop: 'name', label: '电站名称', width: 180},
        {prop: 'cityOrgName', label: '市公司', width: 180},
        {prop: 'maintCrewName', label: '运维班组', width: 180},
        {prop: 'operationName', label: '运行单位', width: 150},
        {prop: 'voltageLevel', label: '电压等级', width: 130},
      ],
      pageData: [],
      pageNum: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 20 // 每页的数据条数
    }
  },
  created() {


  },
  mounted() {
    this.pageListInit()
    this.setHeight()
    window.addEventListener('resize', this.setHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setHeight)
  },
  methods: {
    setHeight() {
      this.height = window.sessionStorage.getItem('appheight') - 350
    },


    pageListInit() {
      this.isLoading = true
      let param = {
        objId: this.objId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      pageStationList(param).then(res => {
        this.pageData = res.data.records
        this.isLoading = false
      })
    },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
      this.ruleForm.maintOrg = data.code
      this.ruleForm.maintOrgName = data.name
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val
      this.pageListInit()
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.pageNum = val
      this.pageListInit()
    },
    //重置
    Reset() {
      this.$refs.area.form.valueTitle = '全国'
      this.$refs.interval.intervald = 1
    },
    //导出
    exportEvent() {
      this.$refs.workOrderTable.exportData({
        filename: 'export', // 文件名字
        sheetName: 'Sheet1',
        type: 'xlsx', //导出文件类型 xlsx 和 csv
        useStyle: true,
        data: this.pageData
      })
    },

    //新增园区
    openAdd(row) {
      this.dialogVisible = true;
      this.stationSelect()
    },

    openUpdate(row) {
      this.dialogVisible = true;
      this.ruleForm = row
      this.editCheckName = row.maintOrgName
      this.editCheckCode = row.maintOrg
    },


    delteParkSattion(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        let param = {
          parkId:this.objId,
          midStationId:row.id
        }

        delParkStationAss(param).then(res => {
          if ((res.code == 'A0000')) {
            this.$message({
              type: 'success',
              message: res.message
            })
            this.pageListInit()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },



    handleClose() {
      this.resetForm('ruleForm')
      this.dialogVisible = false;
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addParkStationAss(this.ruleForm).then(res => {
            if (res.code == 'A0000') {
              this.$message({
                message: "新增成功!",
                type: "success",
              });
              this.handleClose()
              this.pageListInit()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },


    handleSelectionChange(val) {
      this.multipleSelection = val.records
    },
    selectAllChangeEvent(val) {
      this.multipleSelection = val.records
    },

    tableDateFilter(row, column) {
      if (row.column.property == 'orgLevel') {

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

    //获取电站下拉
    stationSelect() {
      let param = {
        cityOrg: this.cityOrg
      }
      stationList(param).then(res => {
        if (res.code == 'A0000') {
          this.stationList = res.data
        }

      })
    }


  }
}
</script>
<style lang="less" scoped>

</style>
