<template>
  <el-dialog :title="props.title" v-model="isShowDetail" width="500px" :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">
        <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="onstSpVehicleTypeCode">
          <MOSTY.DictRidioAndSelect :dictData="props.sbsslist.D_BZ_CNJDCLX" v-model="info.onstSpVehicleTypeCode"
            selectType="select" />
          <!-- <el-input v-model="info.onstSpVehicleTypeName" type="text" style="width: 250px"></el-input> -->
        </el-form-item>
        <el-form-item label="数量" prop="onstSpVehicleQty">
          <el-input-number v-model="info.onstSpVehicleQty" :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 { filterYear } from "@/utils/auth.js";
import { ElMessage } from "element-plus";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  detail: {
    type: String,
    default: ''
  },
  orgObj: Object,
  savebtn: {
    type: Boolean,
    default: false
  },
  sbsslist: {
    type: Object,
    default: {}
  }
})
const emits = defineEmits(["close"]);
const isShowDetail = ref(true)
const ruleFormRef = ref()
const sbsslist = ref([])
const rules = reactive({
  orgName: [{ required: true, message: "请选择单位", trigger: "blur" }],
  onstSpVehicleTypeCode: [{ required: true, message: "请选择场(厂)内专用机动车辆类型", trigger: "blur" }],
  onstSpVehicleQty: [{ 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/vehicle/add' : '/mosty-jcgl/data/vehicle/edit'
      info.value.onstSpVehicleTypeName = props.sbsslist.D_BZ_CNJDCLX && props.sbsslist.D_BZ_CNJDCLX.find(item => item.value == info.value.onstSpVehicleTypeCode)?.label

      postApi(info.value, url)
        .then((res) => {
          ElMessage.success(`${props.title.includes('新增') ? '新增' : '编辑'}成功`);
          emits("close");
        })
        .finally(() => {
          // butLoading.value = false
        });
    }
  });
};


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

::v-deep .el-dialog__body {
  height: 100% !important;
}

.config {
  height: 20vh;
}

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