<template>
  <el-dialog :title="props.title" width="1200px" v-model="dialogVisible" :before-close="onClose">
    <el-form ref="Fromrefs" :model="info" :rules="rules" label-position="right" label-suffix="："
      style="width: 100% !important;" :disabled="props.title.includes('详情')">
      <el-row>
        <el-col :span="12">
          <el-form-item label="统计周期">
            <el-select v-model="period" clearable placeholder="请选择" disabled style="width: 300px;">
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="年复烤量(万担)" prop="actualProcessingQuantity">
            <el-input-number v-model="info.actualProcessingQuantity" style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <MOSTY.Assort title="复烤工艺设备" />
      <el-row>
        <el-col :span="12">
          <el-form-item label="复烤线数量(条)" prop="redryActualProductionLineQty">
            <el-input-number v-model="info.redryActualProductionLineQty" :step="1" step-strictly style="width: 300px;"
              :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="复烤能力(千克/小时)" prop="redryingCapacity">
            <el-input-number v-model="info.redryingCapacity" :precision="1" style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <MOSTY.Assort title="动力保障设备" />
      <el-row>
        <el-col :span="12">
          <el-form-item label="真空设备数量(台)" prop="vacuumEquipmentQty">
            <el-input-number v-model="info.vacuumEquipmentQty" :step="1" step-strictly style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="空压设备数量(台)" prop="airCompressionEquipmentQty">
            <el-input-number v-model="info.airCompressionEquipmentQty" :step="1" step-strictly style="width: 300px;"
              :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="制冷设备数量(台)" prop="refrigerationEquipmentQty">
            <el-input-number v-model="info.refrigerationEquipmentQty" :step="1" step-strictly style="width: 300px;"
              :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高压配电柜数量(台)" prop="hvdcQty">
            <el-input-number v-model="info.hvdcQty" :step="1" step-strictly style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="变压器数量(台)" prop="transformerQty">
            <el-input-number v-model="info.transformerQty" :step="1" step-strictly style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发电机数量(台)" prop="alternatorQty">
            <el-input-number v-model="info.alternatorQty" :step="1" step-strictly style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <MOSTY.Assort title="除尘设备" />
      <el-row>
        <el-col :span="12">
          <el-form-item label="除尘设备数量(台)" prop="dustEliminationQty">
            <el-input-number v-model="info.dustEliminationQty" :step="1" step-strictly style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <MOSTY.Assort title="生产性燃气设备" />
      <el-row>
        <el-col :span="12">
          <el-form-item label="生产性燃气设备数量(台)" prop="productiveGasQty">
            <el-input-number v-model="info.productiveGasQty" :step="1" step-strictly style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" v-loading="btnloading" @click="onSave(Fromrefs)" v-if="props.title.includes('编辑')">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button @click="onClose"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const props = defineProps({ title: String, currId: String, id: String });
const emits = defineEmits(["close"]);
const dialogVisible = ref(true);
const btnloading = ref(false);
const info = ref({})
const period = ref(new Date().getFullYear())
const Fromrefs = ref()
const rules = ref({
  ...rule.numbernineRule({ validator: true, require: true, iszs: true, firstNum: 8, lastNum: 1 }, "actualProcessingQuantity"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "redryActualProductionLineQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "vacuumEquipmentQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "airCompressionEquipmentQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "refrigerationEquipmentQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "hvdcQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "transformerQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "alternatorQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "dustEliminationQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "productiveGasQty"),
  ...rule.numbernineRule({ validator: true, require: true, iszs: true, firstNum: 8, lastNum: 1 }, "redryingCapacity"),

});
const onClose = () => {
  if (props.title.includes('编辑')) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        Fromrefs.value.clearValidate();
        emits('close')
      })
      .catch(() => {
        // catch error
      })
  } else {
    Fromrefs.value.clearValidate();
    emits('close')
  }

};
const onSave = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      btnloading.value = true
      let _data = {
        ...info.value,
      }
      postApi(_data, "/mosty-jcgl/data/rfInfoLedger/updateAll")
        .then((res) => {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          emits("close", true);
        })
        .finally(() => {
          btnloading.value = false
        });
    } else {
      ElMessage.warning('请输入必填项！！！')
    }
  })
}


const getDetail = () => {
  let _url = props.id ? '/mosty-jcgl/data/rfInfoLedger/getLsjlDetail' : "/mosty-jcgl/data/rfInfoLedger/getDetailById"
  let id = props.id ? props.id : props.currId
  getApi({ id }, _url).then((res) => {
    info.value = res || {}
    if (!res.actualProcessingQuantity) {
      info.value.actualProcessingQuantity = 0
    }
    if (!res.redryActualProductionLineQty) {
      info.value.redryActualProductionLineQty = 0
    }
    if (!res.redryingCapacity) {
      info.value.redryingCapacity = 0
    }
    period.value = res.reportingYear
  })
}
onMounted(() => {
  getDetail()
});
</script>

<style lang="scss" scoped>
.content {
  .topper {
    display: flex;

    .sub-le {
      flex: 1;
      padding: 15px 15px 5px 15px;
      border-right: 1px solid #ebeef5;
    }
  }

  .bottom {
    padding: 0 15px 10px 15px;
  }
}

::v-deep .el-form-item__label {
  width: 190px;
}
</style>
