<template>
  <div>
    <div class="bigBox">
      <MOSTY.FromPage :title="'安全生产分析报告上传'" @closeDialog="CloseEvent">
        <template #content>
          <MOSTY.Assort :title="'基本信息'" />
          <div class='fromBox'>
            <el-form ref="ruleFormRef" :model="fromData" :rules="rules" label-width="120px" class="demo-ruleForm"
              status-icon :inline="true" :disabled="!props.saveBtnShow">
              <el-form-item label="报告名称:" prop="name">
                <el-input v-model="fromData.name" placeholder="不能超过20个字" style="width: 250px"></el-input>
              </el-form-item>
              <el-form-item label="报告年份:" prop="year">
                <el-date-picker v-model="fromData.year" type="year" placeholder="请选择" format="YYYY" value-format="YYYY"
                  style="width:250px" />
              </el-form-item>
              <el-form-item label="报告频次:" prop="frequency">
                <el-input v-model="fromData.frequency" placeholder="请输入报告频次" style="width:250px"></el-input>
              </el-form-item>
              <el-form-item label="所属单位:" prop="orgName">
                <el-input v-model="fromData.orgName" placeholder="请输入所属单位" style="width:250px" readonly>
                  <template #append>
                    <el-button type="primary" @click="deptClick">选择</el-button>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="备注:">
                <el-input v-model="fromData.bz" placeholder="请输入备注" style="width:1056px"></el-input>
              </el-form-item>
              <el-form-item label="附件:">
                <MOSTY.Upload :widthNumber="1056" v-model="fromData.files" :limit="5" :delrow="delrow" :nopicer="true"
                  :showbut="true" @filehandleChange="changeFile" :ShowfileList="true" :isImg="false"
                  :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :showinput="true"
                  :placeholder="'请上传pdf,ofd, doc, docx, xls, xlsx,wps'" :disabled="!props.saveBtnShow" />
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button v-if="saveBtnShow" type="primary" v-loading="saveLoading" @click="addHander">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="primary" @click="CloseEvent">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>返回</span>
          </el-button>
        </template>

      </MOSTY.FromPage>
    </div>
    <Choosebm :showDdld="showDept" searchType="03" @closezzjg="showDept = false" @listdata="deptChange" :zzlx="zzlx" />
  </div>
</template>

<script setup>
// 引入
import { getCurrentInstance, onMounted, ref, defineProps, watch, watchEffect } from "vue";
import { postApi } from "@/api/tobAcco_api.js";
import Choosebm from "@/components/MyComponents/ChooseDept/index.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
const emits = defineEmits(["close", "ok"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  editObj: {
    type: Object,
    default: () => { }
  }
});
const rules = ref({
  name: [{ required: true, message: "请输入报告名称" }],
  year: [{ required: true, message: "请选择报告年份" }],
  frequency: [{ required: true, message: "请输入报告频次" }],
  orgName: [{ required: true, message: "请选择所属单位" }]
});
const delrow = ref({}); //删除文件列表
const ruleFormRef = ref();
const saveLoading = ref(false);
const fromData = ref({})
const showDept = ref(false);
const zzlx = ref(null);
const deptClick = () => {
  showDept.value = true;
}
//关闭综合配置表
const CloseEvent = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close");
      })
  } else {
    emits("close");
  }

};

/** 部门选择 */
const deptChange = (val) => {
  fromData.value.orgName = val.orgName;
  fromData.value.orgId = val.id;
}

// 外层新增
const addHander = async () => {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate(valid => {
    if (!valid) ElMessage.error("请输入必填项!");
    if (!valid) return;
    fromData.value.files = Array.isArray(fromData.value.files) ? fromData.value.files.toString() : fromData.value.files
    saveLoading.value = true;
    if (fromData.value.id) {
      postApi(fromData.value, "/mosty-jcgl/securityCostReport/editSecurityCostReport").then(res => {
        if (res) {
          ElMessage.success("修改成功");
          emits("ok")
        }
      }).finally(() => {
        saveLoading.value = false;
      })
    } else {
      postApi(fromData.value, "/mosty-jcgl/securityCostReport/saveSecurityCostReport").then(res => {
        if (res) {
          ElMessage.success("新增成功");
          emits("ok")
        }
      }).finally(() => {
        saveLoading.value = false;
      })
    }
  });
};

watchEffect(() => {
  if (props.editObj) {
    fromData.value = props.editObj;

  }
});
onMounted(() => {
});
watch(
  () => props.saveBtnShow,
  (val) => {

  }
);
</script>

<style lang="scss" scoped>
::v-deep .el-collapse {
  padding: 20px !important;
}

.bigBox {
  display: block;

}

.fromBox {
  width: 100%;
  margin: 10px;
}

.el-form {
  width: 80%;
  margin: auto;
  flex-wrap: wrap;
}

.el-form--inline.el-form--label-top .el-form-item {
  display: flex;
  margin-right: 80px;
}

.el-form--inline.el-form--label-top {
  width: 100%;
  padding: 20px;
}


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

.el-collapse {
  padding: 10px;
}

::v-deep .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
  /* margin-bottom: 8px; */
  line-height: 32px !important;
  text-align: right !important;
}
</style>