<template>
  <el-dialog :title="props.title" width="1000px" v-model="dialogVisible" :before-close="onClose">
    <el-form :model="ruleForm" label-position="right" :rules="rules" label-width="235px" label-suffix=":"
      :disabled="props.type !== 'edit'" v-if="ruleForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="统计周期" prop="reportingYear">
            <el-input v-model="ruleForm.reportingYear" disabled style="width: 100%" />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="消防池" prop="firePoolQty">
            <el-input-number v-model="ruleForm.firePoolQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="应急广播" prop="emgcBroadcastQty">
            <el-input-number v-model="ruleForm.emgcBroadcastQty" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="title">消火栓系统（套）</div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="室内消火栓系统（套）" prop="idrFrHdrtSysQty">
            <el-input-number v-model="ruleForm.idrFrHdrtSysQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="室外消火栓系统（套）" prop="odrFrHdrtSysQty">
            <el-input-number v-model="ruleForm.odrFrHdrtSysQty" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="title">自动火灾报警系统</div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="烟感、温感数量（套）" prop="fasSmkTmpSsrQty">
            <el-input-number v-model="ruleForm.fasSmkTmpSsrQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="空气采样数量（套）" prop="fasAirSampleQty">
            <el-input-number v-model="ruleForm.fasAirSampleQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="红外对射数量（套）" prop="fasIfrdRdatQty">
            <el-input-number v-model="ruleForm.fasIfrdRdatQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="可燃气体探测数量（套）" prop="fasCmbsGsDtctQty">
            <el-input-number v-model="ruleForm.fasCmbsGsDtctQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电气火灾监控数量（套）" prop="fasElecFrCtrlQty">
            <el-input-number v-model="ruleForm.fasElecFrCtrlQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="其他自动火灾报警系统数量（套）" prop="fasOtherFasQty">
            <el-input-number v-model="ruleForm.fasOtherFasQty" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="title">自动灭火系统</div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="水喷淋数量（套）" prop="affsWtsprSysQty">
            <el-input-number v-model="ruleForm.affsWtsprSysQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="超音速干粉数量（套）" prop="affsSdpSysQty">
            <el-input-number v-model="ruleForm.affsSdpSysQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高压细水雾数量（套）" prop="affsHpwmSysQty">
            <el-input-number v-model="ruleForm.affsHpwmSysQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="二氧化碳数量（套）" prop="affsCbdxSysQty">
            <el-input-number v-model="ruleForm.affsCbdxSysQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="七氟丙烷数量（套）" prop="affsHfcSysQty">
            <el-input-number v-model="ruleForm.affsHfcSysQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="气溶胶数量（套）" prop="affsArslSysQty">
            <el-input-number v-model="ruleForm.affsArslSysQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="水炮数量（套）" prop="affsAfffSysQty">
            <el-input-number v-model="ruleForm.affsAfffSysQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="其他自动灭火系统数量（套）" prop="affsOtherAffsQty">
            <el-input-number v-model="ruleForm.affsOtherAffsQty" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="title">消防分隔及疏散指示系统</div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="防排烟系统数量（套）" prop="smkCtrlSysQty">
            <el-input-number v-model="ruleForm.smkCtrlSysQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="应急疏散指示数量（套）" prop="emgcEvcuatSysQty">
            <el-input-number v-model="ruleForm.emgcEvcuatSysQty" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="title">消防控制室</div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="消防控制室数量（个）" prop="frConRoomQty">
            <el-input-number v-model="ruleForm.frConRoomQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12"> </el-col>
        <el-col :span="12">
          <el-form-item label="五级/初级工数量（人）" prop="juniorWorkerQty">
            <el-input-number v-model="ruleForm.juniorWorkerQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="四级/中级工数量（个）" prop="intermediateWorkerQty">
            <el-input-number v-model="ruleForm.intermediateWorkerQty" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="title">消防救援</div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="专职消防队数量（个）" prop="prvtFrBrigadeQty">
            <el-input-number v-model="ruleForm.prvtFrBrigadeQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专职消防员数量（人）" prop="prvtFrmanQty">
            <el-input-number v-model="ruleForm.prvtFrmanQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="消防车数量（台）" prop="frFightTruckQty">
            <el-input-number v-model="ruleForm.frFightTruckQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微型消防站数量（个）" prop="miniFrStatQty">
            <el-input-number v-model="ruleForm.miniFrStatQty" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="消微型消防站队员数量（人）" prop="miniFrStatFrmanQty">
            <el-input-number v-model="ruleForm.miniFrStatFrmanQty" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <p v-else style="color: #777; text-align: center">暂无数据</p>
    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" @click="onSave" v-if="props.type === 'edit'" style="margin-right: 18px;"> <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span> </el-button>
        <el-button @click="onClose" style="margin-right: 10px"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance, watch, nextTick } from "vue";
// import * as MOSTY from "@/components/MyComponents/index";
// import * as rule from "@/utils/rules.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
// import { ru } from "element-plus/es/locale.mjs";
// import { getItem } from "@/utils/storage";

const props = defineProps({ title: String, type: String, rowItem: Object });
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const rules = {
  // idrFrHdrtSysQty: [{ required: true, message: "请输入", trigger: "blur" }]
};
const ruleForm = ref(null);
const emit = defineEmits(["onSave"]);
defineExpose({ dialogVisible });

const onClose = () => {
  if(!ruleForm.value) return;
  if (props.type === 'edit') {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        dialogVisible.value = false;
      })
      .catch(() => {
        // catch error
      })
  } else {
    dialogVisible.value = false;
  }

};
const onSave = () => {
  postApi(ruleForm.value, "/mosty-jcgl/data/firEquipment/update")
    .then((res) => {
      proxy.$message.success("成功");
      dialogVisible.value = false;
      emit("onSave", ruleForm.value);
    })
    .finally(() => { });

};

onMounted(() => { });
watch(
  () => dialogVisible.value,
  (n, o) => {
    if (n) {
      // ruleForm.value = props.rowItem;
      if (props.type === "historyDetail") {
        getApi({ historyId: props.rowItem.sourceId }, "/mosty-jcgl/data/firEquipment/history/detail").then((res) => {
          if (!res) return;
          ruleForm.value = res;
        });
      } else {
        getApi({ id: props.rowItem.sourceId }, "/mosty-jcgl/data/firEquipment/detail").then((res) => {
          if (!res) return;
          ruleForm.value = res;
        });
      }
    }
  },
  { deep: true }
  // { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped></style>
