<template>
  <el-dialog :title="props.title" width="1200px" v-model="dialogVisible" :before-close="onClose">
    <el-form ref='Fromref' :model="info" :rules="rules" label-position="right" label-suffix="："
      :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="actualDeliveryVolume">
            <el-input-number v-model="info.actualDeliveryVolume" :precision="4" style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中转站数量(个)" prop="ldcTransferStationQty">
            <el-input-number v-model="info.ldcTransferStationQty" :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="sortingLineQty">
            <el-input-number v-model="info.sortingLineQty" :step="1" step-strictly style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分拣线分拣能力(条/小时)" prop="ldcSortingCapacity">
            <el-input-number v-model="info.ldcSortingCapacity" :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="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="ldcCageCarQty">
            <el-input-number v-model="info.ldcCageCarQty" :step="1" step-strictly style="width: 300px;" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="配送车(辆)" prop="transportVehiclesQty">
            <el-input-number v-model="info.transportVehiclesQty" :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="ldcNewEnergyCarQty">
            <el-input-number v-model="info.ldcNewEnergyCarQty" :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" @click="onSave(Fromref)" v-loading="loadingShow" 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 { proxy } = getCurrentInstance();
const props = defineProps({ title: String, currId: String, id: String });
const emits = defineEmits(["close"]);
const dialogVisible = ref(true);
const loadingShow = ref(false);
const Fromref = ref()
const info = ref({})
const period = ref(new Date().getFullYear())
const rules = ref({
  ...rule.numbernineRule({ validator: true, require: true, iszs: true }, "actualDeliveryVolume"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "ldcTransferStationQty"),
  ...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 }, "alternatorQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "transformerQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "ldcCageCarQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "transportVehiclesQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "ldcNewEnergyCarQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 999999999 }, "sortingLineQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 999999999 }, "ldcSortingCapacity"),
  ...rule.numbernineRule({ validator: true, require: true, iszs: true }, "sortingLineQty"),
});
const onClose = () => {
  if (props.title.includes('编辑')) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        Fromref.value.clearValidate();
        emits('close')
      })
      .catch(() => {
        // catch error
      })
  } else {
    Fromref.value.clearValidate();
    emits('close')
  }

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



const getDetail = () => {
  let _url = props.id ? "/mosty-jcgl/data/ldcInformation/getLsjlDetail" : "/mosty-jcgl/data/ldcInformation/getDetailById"
  let id = props.id ? props.id : props.currId
  getApi({ id }, _url).then((res) => {
    info.value = res
    info.value.ldcCageCarQty = res.ldcCageCarQty || 0
    info.value.actualDeliveryVolume = res.actualDeliveryVolume || 0
    period.value = res.reportingYear
  })
}
onMounted(() => {
  getDetail()
});

defineExpose({ dialogVisible });
</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>
