<template>
  <el-dialog :title="props.title" v-model="isShowDetail" width="800px" :before-close="closed">
    <div class="config">
      <el-form ref='ruleFormRef' label-width="auto" :model="info" label-suffix="：" :rules="rules"
        :disabled="!props.savebtn" label-position="right" style='margin:10px auto !important; display:flex !important;
  justify-content:space-between;
  flex-wrap:wrap;'>
        <el-form-item label="所属单位" prop="orgName">
          <el-input v-model="info.orgName" type="text" disabled style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="锅炉类型" prop="boilerCode">
          <div style="width: 250px;">
            <MOSTY.DictRidioAndSelect :dictData="props.sbsslist.D_BZ_GLLX" v-model="info.boilerCode"
              selectType="select" />
          </div>
        </el-form-item>
        <el-form-item label="蒸发量" prop="boilerEvaporation">
          <el-input v-model.number="info.boilerEvaporation" type="number" style="width: 250px">
            <template #append>吨/时</template></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="boilerQty">
          <el-input-number v-model="info.boilerQty" :min="0" style="width:250px" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="onSave" v-if="props.savebtn" style="margin-right: 10px">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>确定</span></el-button>
        <el-button @click="closed"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import * as rule from "@/utils/rules.js";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["close"]);
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  detail: {
    type: Object,
    default: null
  },
  orgObj: Object,
  savebtn: {
    type: Boolean,
    default: false
  },
  sbsslist: {
    type: Object,
    default: {}
  }
})

const isShowDetail = ref(true)
const ruleFormRef = ref()

const rules = reactive({
  orgName: [{ required: true, message: "请选择单位", trigger: "blur" }],
  boilerCode: [{ required: true, message: "请选择锅炉类型", trigger: "blur" }],
  ...rule.znumberRule({ validator: true, require: false }, "boilerEvaporation"),
  boilerQty: [{ required: true, message: "请输入数量", trigger: "blur" }],

});
const info = ref({

})
onMounted(() => {
  if (props.detail) {
    info.value = props.detail
  } else {
    info.value = {
      orgName: props.orgObj.orgname,
      orgCode: props.orgObj.orgcode
    }
  }

})
const closed = () => {
  if(!ruleFormRef.value) return
  if (props.savebtn) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close");
  }
};

const onSave = async () => {
  // /
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      const url = props.title.includes('新增') ? '/mosty-jcgl/data/epsemBoiler/add' : '/mosty-jcgl/data/epsemBoiler/edit'
      info.value.boilerName = props.sbsslist.D_BZ_GLLX && props.sbsslist.D_BZ_GLLX.find(item => item.value == info.value.boilerCode)?.label
      postApi(info.value, url)
        .then((res) => {
          ElMessage.success(`${props.title.includes('新增') ? '新增' : '编辑'}成功`);
          emits("close");
        })
        .finally(() => {
          // butLoading.value = false
        });
    }
  });
};


</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  height: 100% !important;
}

.config {
  height: 20vh;
}

::v-deep .el-form-item--default {
  margin-left: 10px;
}
</style>
