<template>
  <div class="siteManage-main powerScore">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="formInfo"
      label-width="137px"
      class="demo-ruleForm"
    >
      <div class="grid-content bg-purple">
        <div class="el-form-item blockTitle">电能质量各要素权重</div>
        <div></div>
        <el-form-item
          label="功率因数(100%)"
          prop="powerFactorOne"
          label-width="130px"
        >
          <el-input v-model="ruleForm.powerFactorOne"></el-input>
        </el-form-item>

        <el-form-item
          label="电压合格率(%)"
          prop="voltageQualified"
          label-width="130px"
        >
          <el-input v-model="ruleForm.voltageQualified"></el-input>
        </el-form-item>
        <el-form-item label="负载率(%)" prop="loadRate" label-width="130px">
          <el-input v-model="ruleForm.loadRate"></el-input>
        </el-form-item>
        <el-form-item
          label="电流平衡度(%)："
          prop="currentBalance"
          label-width="130px"
        >
          <el-input v-model="ruleForm.currentBalance"></el-input>
        </el-form-item>

        <el-form-item
          label="电压平衡度(%)："
          prop="voltageBalance"
          label-width="130px"
        >
          <el-input v-model="ruleForm.voltageBalance"></el-input>
        </el-form-item>
        <el-form-item label="谐波畸变率(%)" prop="thdu" label-width="130px">
          <el-input v-model="ruleForm.thdu"></el-input>
        </el-form-item>

        <div class="el-form-item blockTitle">功率因素</div>

        <el-form-item
          label="功率因数"
          prop="powerFactorTwo"
          label-width="130px"
        >
          <el-input v-model="ruleForm.powerFactorTwo"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">
            保存
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import * as api from '@/api/siteManage/powerScore'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'PowerScore',
  setup() {
    const formInfo = ref(null)

    const ruleForm = ref({
      powerFactorOne: '',
      voltageQualified: '',
      loadRate: '',
      currentBalance: '',
      voltageBalance: '',
      thdu: '',
      powerFactorTwo: '',
      siteId:'1'   //此字段需写活
     
    })

    //表单提交
    function submitForm() {
      formInfo.value.validate((valid) => {
        if (valid) {
          api.powerQualityAdd(ruleForm.value).then((requset) => {
            if (requset.status === 'SUCCESS') {
              ElMessage.success({
                message: '新增成功',
                type: 'success',
              })
              // if (props.dialogTitle === '新增') {
              //   ElMessage.success({
              //     message: '新增成功',
              //     type: 'success',
              //   })
              // } else {
              //   ElMessage.success({
              //     message: '修改成功',
              //     type: 'success',
              //   })
              // }
            } else {
              ElMessage.error(requset.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

    function resetForm() {
      formInfo.value.resetFields()
    }

    onMounted(() => {})

    return {
      formInfo,
      ruleForm,
      rules: {
        powerFactorOne: [
          { required: true, message: '请输入功率因数', trigger: 'blur' },
        ],
        voltageQualified: [
          { required: true, message: '请输入电压合格率', trigger: 'blur' },
        ],
        loadRate: [
          { required: true, message: '请输入负载率', trigger: 'blur' },
        ],
       
        currentBalance: [
          { required: true, message: '请输入电流平衡度', trigger: 'blur' },
        ],
        voltageBalance: [
          { required: true, message: '请输入电压平衡度', trigger: 'blur' },
        ],
        thdu: [
          { required: true, message: '请输入谐波畸变率', trigger: 'blur' },
        ],
        powerFactorTwo: [{ required: true, message: '请输入功率因数', trigger: 'blur' }],
      },

      submitForm,
      resetForm,
    }
  },
})
</script>

