<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="pageTitle" @closeDialog="black">
      <template #content>
        <MOSTY.Assort :title="'基本信息'" />
        <div class="fromBox">
          <el-form ref="ruleFormRefs" :model="FromObj" :rules="rules" :disabled="!saveBtn" class="mosty-from-wrap"
            label-width="140px" :inline="true">
            <el-form-item label="劳动用品名称:" prop="name">
              <el-input v-model="FromObj.name" style="width: 337px"></el-input>
            </el-form-item>
            <el-form-item label="型号:" prop="model">
              <el-input v-model="FromObj.model" style="width: 337px"></el-input>
            </el-form-item>
            <el-form-item label="数量:" prop="count">
              <el-input v-model.number="FromObj.count" type="number" style="width: 337px"></el-input>
            </el-form-item>
            <el-form-item label="计量单位:" prop="unit">
              <el-select v-model="FromObj.unit" placeholder="请选择计量单位" style="width: 337px">
                <el-option v-for="item in D_BZ_WPDW" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="领取人:" prop="person">
              <el-input v-model="FromObj.person" style="width: 337px"></el-input>
            </el-form-item>
            <el-form-item label="领取人岗位:" prop="position">
              <el-input v-model="FromObj.position" style="width: 337px"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button v-if="saveBtn" type="primary" v-loading='loadingshow' @click="submit(ruleFormRefs)">
          <el-icon>
            <DocumentChecked />
          </el-icon>保存
        </el-button>
        <el-button @click="black">
          <el-icon>
            <DocumentDelete />
          </el-icon>关闭
        </el-button>
      </template>
    </MOSTY.FromPage>
  </div>
</template>

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

const { proxy } = getCurrentInstance();
const { D_BZ_WPDW } = proxy.$dict("D_BZ_WPDW");
const props = defineProps({
  obj: {
    type: Object,
    default: () => { }
  }
});
const rules = reactive({
  name: [{ required: true, message: "劳动用品名称不能为空", trigger: "blur" }],
  model: [{ required: true, message: "型号不能为空", trigger: "blur" }],
  unit: [{ required: true, message: "计量单位不能为空", trigger: "blur" }],
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "count"),
  person: [{ required: true, message: "领取人不能为空", trigger: "blur" }],
  position: [{ required: true, message: "领取人岗位不能为空", trigger: "blur" }],
});

const saveBtn = ref(false);
const loadingshow = ref(false);
const emit = defineEmits("onChange");
const ruleFormRefs = ref();
let pageTitle = ref("");
const FromObj = ref({
});
onMounted(() => {
  pageTitle.value = props.obj.title;
  saveBtn.value = props.obj.saveBtn;
  FromObj.value.labourId = props.obj.labourId;
  if (props.obj.id) {
    gtdataxq(props.obj.id)
  }
});
//获取详情
function gtdataxq(id) {
  getApi({ id },
    `/mosty-jcgl/labourGoodsAtta/getInfo`
  ).then((res) => {
    FromObj.value = res
  });
}

// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      loadingshow.value = true
      if (FromObj.value.id) {
        postApi(
          FromObj.value,
          "/mosty-jcgl/labourGoodsAtta/update"
        ).then((res) => {
          ElMessage.success("修改成功");
          emit("onChange", false);
          loadingshow.value = false
        });
      } else {
        postApi(
          FromObj.value,
          "/mosty-jcgl/labourGoodsAtta/add"
        ).then((res) => {
          ElMessage.success("新增成功");
          emit("onChange", false);
          loadingshow.value = false
        });
      }
    }
  });
};

const black = () => {
  if (saveBtn.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRefs.value.clearValidate();
        emit("onChange", false);
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRefs.value.clearValidate();
    emit("onChange", false);
  }

};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.box_cont {
  height: calc(100vh - 15vh);
  overflow-y: scroll;
}

.fromBox {
  margin: 20px auto;
  padding: 15px 15px 0 15px;
  border-radius: 1px;
}

.ld_box {
  display: flex;
  margin-right: 20px;
}

.el-form {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  box-sizing: border-box;
}

.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}
</style>