<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="pageTitle" @closeDialog="black">
      <template #content>
        <MOSTY.Assort :title="'基本信息'" />
        <div class="fromBox">
          <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="155px" :model="data.formData" :inline="true"
            :rules="rules" :disabled="!saveBtn">
            <el-form-item label="文件名:" prop="whglname" style="width: 100%;">
              <el-input v-model="data.formData.whglname" placeholder="请输入文件名" style="width: 100%;"></el-input>
            </el-form-item>
            <el-form-item label="类型:" prop="type" style="width: 100%;">
              <el-select v-model="data.formData.type" placeholder="请选择类型" style="width: 100%;">
                <el-option v-for="item in props.obj.zdlist.D_BZ_ZYWHGL" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属单位:" style="width: 100%;">
              <el-input v-model="data.formData.orgname" disabled placeholder="请输入所属单位" style="width: 100%;"></el-input>
            </el-form-item>

            <el-form-item label="附件上传:" prop="fileid" style="width: 100%;">
              <MOSTY.Upload :isAutoWidth="true" :showinput="true" :placeholder="'请上传pdf,ofd,doc,docx,xls,xlsx,wps'"
                :limit="1" :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx','wps']" :nopicer="true" :isImg="false"
                :ShowfileList="true" v-model="data.formData.fileid" :delrow="delrow" :showbut="saveBtn"
                @filehandleChange="changeFile" :keys="key1">
              </MOSTY.Upload>
            </el-form-item>

          </el-form>
        </div>
      </template>
      <template #footer>

        <el-button type="primary" v-if="saveBtn" v-loading='loadingshow' @click="submit(ruleFormRef)">
          <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, watchEffect, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
const { proxy } = getCurrentInstance();
const props = defineProps({
  obj: {
    type: Object,
    default: () => { }
  }
});
const rules = reactive({
  whglname: [{ required: true, message: "文件名不能为空", trigger: "blur" }],
  type: [{ required: true, message: "类型不能为空", trigger: "change" }],
  fileid: [{ required: true, message: "请选择附件", trigger: "change"}]
});
const delrow = ref({});
const saveBtn = ref(true);
const loadingshow = ref(false);
const fujiandata = ref([]);
const emit = defineEmits("changePage");
const ruleFormRef = ref();
let pageTitle = ref("");
const data = reactive({
  formData: {
    orgname: getItem("deptId").ssdwmc,
    orgcode: getItem("deptId").ssdwid,
    fileid: ''
  }
});
watchEffect(() => {
  if (props.obj) {
    pageTitle.value = props.obj.title;
    saveBtn.value = props.obj.saveBtn;
    data.formData = props.obj.row;
    if (!data.formData.id) {
      data.formData.orgcode = getItem("deptId").ssdwid;
      data.formData.orgname = getItem("deptId").ssdwmc;
      data.formData.year = new Date().getFullYear().toString();
    }
  }
});

// 新的文件上传返回
const changeFile = (row) => {
  fujiandata.value = row;
  data.formData.filename = row.map((item) => {
    return item.name;
  }).toString();
};

// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      const params = {
        ...data.formData,
        fileid: data.formData.fileid ? data.formData.fileid.toString() : null,
      }
      if (!data.formData.fileid) {
        ElMessage.error("请上传相关附件");
        return
      }
      loadingshow.value = true
      if (!data.formData.id) {
        postApi(params, "/mosty-jcgl/occupationalHazardManagement/addOccupationalHazardManagementOne").then((res) => {
          ElMessage.success("新增成功");
          emit("changePage", "Main");
        }).finally(() => {
          loadingshow.value = false
        })
      } else {
        postApi(params, "/mosty-jcgl/occupationalHazardManagement/updateOccupationalHazardManagementOne").then((res) => {
          ElMessage.success("修改成功");
          emit("changePage", "Main");
        }).finally(() => {
          loadingshow.value = false
        })
      }
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};

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

};
</script>

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

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

.fromBox {
  width: 60%;
  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: space-between;
  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>