<template>
  <div class="regional">
      <div class="regionalSeach">
          <p class="titleSty">区域信息配置</p>
          <div style="display:flex;justify-content: space-between;padding: 10px;">
              <el-row :gutter="10" class="regionalBtn">
                  <el-col :span="1.5">
                      <el-button
                      type="primary"
                      plain
                      icon="Plus"
                      size="mini"
                      @click="handleAdd"
                      >新增</el-button>
                  </el-col>
                  <el-col :span="1.5">
                      <el-button
                      type="success"
                      plain
                      icon="Edit"
                      size="mini"
                      @click="handleUpdate"
                      >修改</el-button>
                  </el-col>
                  <el-col :span="1.5">
                      <el-button
                      type="danger"
                      plain
                      icon="Delete"
                      size="mini"
                      :disabled="multiple"
                      @click="handleDelete"
                      >删除</el-button>
                  </el-col>
                  <el-col :span="1.5">
                      <el-button
                      type="warning"
                      plain
                      icon="DocumentCopy"
                      size="mini"
                      @click="handleCopy"
                      >复制</el-button>
                  </el-col>
              </el-row>
              <el-button type="primary" style="margin-right: 10px;" @click="toStaionMang">场站管理</el-button>
          </div>
          <div class="regionalTableData">
            <el-table :data="regionaltableData" border style="width: 100%" @row-click="rowClick">
                <el-table-column label="操作" width="60" align="center">
                  <template #default="scope">
                    <el-radio v-model="regionalradio" :label="scope.row"></el-radio>
                  </template>
                </el-table-column>
                <el-table-column label="区域名称">
                    <template #default="scope">
                        <span>{{scope.row.pathname ? scope.row.pathname : '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="区域代码">
                    <template #default="scope">
                        <span>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="风场数量">
                    <template #default="scope">
                        <span>{{scope.row.wfCnt ? scope.row.wfCnt : 0}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="风机数量">
                    <template #default="scope">
                        <span>{{scope.row.installWtg ? scope.row.installWtg : 0}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="装机容量(MW)">
                    <template #default="scope">
                        <span>{{scope.row.installPower ? scope.row.installPower : 0}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-size="page.pagesize"
                layout="total, prev, pager, next, jumper"
                :total="page.total">
            </el-pagination>
          </div>
          <el-dialog :title="title" v-model="dialogVisible" width="600px" :close-on-click-modal="false" @close="closeDialog">
            <div class="periodFrom">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :validate-on-rule-change="false">
                    <el-form-item label="区域名称" prop="regionalName">
                        <el-input v-model="ruleForm.regionalName" placeholder="请输入区域名称"></el-input>
                    </el-form-item>
                    <el-form-item label="区域代码" prop="regionalCode">
                        <el-input v-model="ruleForm.regionalCode" placeholder="请输入区域代码"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </span>
            </template>
        </el-dialog>
      </div>
  </div>
</template>

<script>
import {apiGetAreaList, apiGetaddArea, apiGetupdateArea, apiGetdeleteArea} from '../../api/api'
export default {
    data() {
        return {
            title:'',
            dialogVisible: false,
            windTurbines:'1',
            windTurbinesName:'牛首山',
            regionaltableData:[],
            regionalradio: {},
            single: false,
            multiple: false,
            page:{
                pagesize: 13,
                currentPage: 1,
                total: 0
            },
            ruleForm: {
                regionalCode: '',
                regionalName: ''
            },
            rules: {
                regionalCode: [
                    { required: true, message: '请输入区域代码', trigger: 'blur' }
                ],
                regionalName: [
                    { required: true, message: '请输入区域名称', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.getregionalMessage()
    },
    methods:{
        closeDialog() {
            this.$refs['ruleForm'].clearValidate()
        },
        toStaionMang() {
          this.$router.push({name: 'allStationSettingPage'})
        },
        submitForm(formName) {
            let that = this
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    that.addRegionMsg()
                }
            });
        },
        handleSizeChange(val){
            this.page.pagesize = val
            this.getregionalMessage()
        },
        handleCurrentChange(val){
            this.page.currentPage =val
            this.getregionalMessage()
        },
        resetForm() {
            this.ruleForm = {
                regionalCode: '',
                regionalName:''
            }
        },
        // 新增区域信息
        handleAdd() {
            this.dialogVisible = true
            this.single = false
            this.title = '新增区域信息'
            this.$nextTick(() =>{
                this.resetForm()
                this.$refs['ruleForm'].clearValidate()
            })
        },
        addRegionMsg() {
            let that = this
            let params = {
                name: that.ruleForm.regionalCode,
                pathname: that.ruleForm.regionalName
            }
            if (!that.single) {
                apiGetaddArea(params).then(datas =>{
                    that.changeshowData(datas)
                })
            } else {
                params.areaNo = that.regionalradio.areaNo
                apiGetupdateArea(params).then(datas =>{
                    that.changeshowData(datas)
                })
            }
            
        },
        changeshowData(datas) {
            if (datas.msg === '操作成功') {
                this.getregionalMessage()
                this.dialogVisible = false
                if (!this.single) {
                    this.$message({
                        message: '区域信息新增成功',
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: '区域信息修改成功',
                        type: 'success'
                    });
                }
            }
        },
        // 复制区域信息
        handleCopy() {
            this.dialogVisible = true
            this.title = '复制区域信息配置'
            this.single = false
            this.ruleForm = {
              regionalCode: this.regionalradio.name,
              regionalName: this.regionalradio.pathname
            }
        },
        // 修改区域信息
        handleUpdate() {
            this.dialogVisible = true
            this.title = '修改区域信息'
            this.single = true
            this.ruleForm = {
              regionalCode: this.regionalradio.name,
              regionalName: this.regionalradio.pathname
            }
        },
        rowClick(row, column, event) {
            this.regionalradio = row
        },
        // 删除区域信息
        handleDelete() {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let that = this
                let params = {
                    areaNo: that.regionalradio.areaNo
                }
                apiGetdeleteArea(params).then(datas =>{
                    if (datas.msg === '操作成功') {
                        that.getregionalMessage()
                        that.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                })
            })
            
        },
        //获取区域信息配置数据
        getregionalMessage() {
            let that = this
            let params = {
                pageNum: that.page.currentPage,
                pageSize: that.page.pagesize
            }
            apiGetAreaList(params).then(datas =>{
                if (datas && datas.rows) {
                    datas.rows.forEach(item =>{
                        item.isadd = false
                        item.isupdate = false
                    })
                    that.regionaltableData = datas.rows
                    that.regionalradio = datas.rows[0]
                    that.page.total = datas.total
                    that.single = false
                }
            })
        }
    }
}
</script>

<style lang="less">
.regional{
  .regionalSeach{
      background: #fff;
      padding: 10px 20px 0 20px;
      .titleSty{
          border-left: 4px solid #2996da;
          padding-left: 5px;
          font-size: 14px;
          margin-left:20px;
      }
      span{
          font-size:14px;
      }
      .regionalBtn{
          padding-left: 10px;
      }
      .el-overlay{
            .el-dialog{
                .periodFrom{
                    .el-form{
                        .el-input{
                            width: calc(100% - 30px);
                        }
                    }
                }
            }
      }
      .exceed{
          display: flex;
          margin-right:20px;
          .exTime{
              width: 240px;
              .el-select__tags{
                  left: 1px;
                  background:#fff;
              }
          }
      }
      .el-button{
          height: 28px;
          // width:100px;
          padding: 0 30px ;
          // padding-top: 8px;
          span{
              margin:0;
          }
      }
  }
  .regionalTableData{
    padding: 10px 20px;
    .el-table{
      .el-table__body-wrapper{
        .el-table__empty-block{
          height: 550px !important;
        }
      }
      .el-input__inner{
          height: 30px !important;
      }
      .el-radio__label{
          display: none;
      }
    }
    .el-pagination{
        margin-top: 20px;
        text-align: end;
        position: relative;
    }
  }
}
</style>