<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" :disabled="props.title.includes('详情')"
      style="width: 100% !important;">
      <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="workstationQty">
            <el-input-number v-model="info.workstationQty" :step="1" step-strictly style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="烟叶收购点站数量(个)" prop="purQty">
            <el-input-number v-model="info.purQty" :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="purYearVolumeQty">
            <el-input-number v-model="info.purYearVolumeQty" :precision="4" 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="purBalerQty">
            <el-input-number v-model="info.purBalerQty" :step="1" step-strictly style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="装卸机数量(台)" prop="purUnQty">
            <el-input-number v-model="info.purUnQty" :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="purPaAcquisitionQty">
            <el-input-number v-model="info.purPaAcquisitionQty" :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="hvdcQty">
            <el-input-number v-model="info.hvdcQty" :step="1" step-strictly style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
        <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-row>
      <el-row>
        <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>
    </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 { onMounted, ref, reactive, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import * as rule from "@/utils/rules.js";
const props = defineProps({ title: String, currId: String, id: String });
const { proxy } = getCurrentInstance();
const emits = defineEmits(["close"]);
const dialogVisible = ref(true);
const btnloading = ref(false)
const Fromrefs = ref();
const info = ref({})
const period = ref(new Date().getFullYear())
const rules = ref({
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "workstationQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "purQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "purBalerQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "purUnQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "purPaAcquisitionQty"),
  ...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.numbernineRule({ validator: true, require: true, iszs: true, firstNum: 15, lastNum: 4 }, "purYearVolumeQty"),
});
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/leafPurLedger/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/leafPurLedger/getLsjlDetail' : "/mosty-jcgl/data/leafPurLedger/getDetailById"
  let id = props.id ? props.id : props.currId
  getApi({ id }, _url).then((res) => {
    info.value = res || {}
    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>
