<template>
  <el-dialog class="dialog"
             :visible.sync="dialogVisible"
             center
             :title="data.month+'月份用电量'"
             append-to-body
             :before-close="onBeforeClose"
             @close="onClose"
             width="600px">
    <el-form label-width="120px" ref="dataForm" :model="dataForm" :rules="dataRules">
      <!-- 普通输入-->
      <el-form-item label="it用电量" prop="electricityIt">
        <el-input class="input-width" v-model.trim.number="dataForm.electricityIt"></el-input>
      </el-form-item>

      <el-form-item label="总用电量" prop="electricityTotal">
        <el-input class="input-width" v-model.trim.number="dataForm.electricityTotal"></el-input>
      </el-form-item>
      <el-form-item label="其他用电量" prop="electricityOther">
        <el-input class="input-width" v-model.trim.number="dataForm.electricityOther"></el-input>
      </el-form-item>

      <el-form-item label="PUE值" prop="changeScore">
        <el-input class="input-width" :value="pue" readonly disabled></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button type="primary" @click="onConfirm">确 认</el-button>
      <el-button @click="onCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {validateNotEmpty} from "@/utils/validate";


export default {
  name: "dialogEdit",
  components: {},
  props: {
    visible: {
      type: Boolean
    },
    data: {
      type: Object
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    pue() {
      if (!this.dataForm.electricityIt) {
        return 0
      } else {
        return Number(((this.dataForm.electricityTotal || 0) - (this.dataForm.electricityOther || 0)) / this.dataForm.electricityIt).toFixed(2);
      }
    }
  },
  data() {
    return {
      dataForm: {
        month: undefined, // 年月时间戳
        electricityIt: undefined, // it用电量
        electricityTotal: undefined, // 总用电量
        electricityOther: undefined, // 其他用电量
      },

      dataRules: {
        electricityIt: [{validator: validateNotEmpty, errorMessage: "it用电量不能为空", required: true, trigger: 'blur'}],
        electricityTotal: [{validator: validateNotEmpty, errorMessage: "总用电量不能为空", required: true, trigger: 'blur'}],
        electricityOther: [{validator: validateNotEmpty, errorMessage: "其他用电量不能为空", required: true, trigger: 'blur'}],
      },
    }
  },

  mounted() {
    this.initData();
    console.log(this.data);
    if (this.data) {
      this.dataForm.month = `${this.data.year}-${this.data.month}-01 00:00:00`;
      this.dataForm.electricityIt = this.data.electricityIt;
      this.dataForm.electricityTotal = this.data.electricityTotal;
      this.dataForm.electricityOther = this.data.electricityOther;
    }
  },

  methods: {
    validateNotEmpty,

    // 初始化数据
    initData() {
    },

    // 取消
    onCancel() {
      this.dialogVisible = false;
    },

    // 确认
    onConfirm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$axios.put("/v1/system/pue/update", this.dataForm).then(() => {
            this.$emit("add");
            this.onCancel();
          });
        }
      });
    },

    // 关闭前确认
    onBeforeClose(done) {
      if (this.$store.state.app.closeConfirmEnable) {
        this.$confirm("确认关闭？").then(() => done());
      } else {
        done();
      }
    },

    // 关闭
    onClose() {
      this.$emit("close");
    },
  }
}
</script>

<style scoped lang="scss">
.input-width {
  width: 200px;
}
</style>
