<template>
  <div>
    <MOSTY.FromPage :title="props.title" @closeDialog="black">
      <template #content>
        <el-form ref="ruleFormRef" :model="dialogForm" :rules="rules" width="800px" label-width="120px"
          :disabled="!props.saveBtnShow">
          <el-form-item label="报告名称：" prop="reportName">
            <el-input v-model="dialogForm.reportName" placeholder="请输入报告名称" />
          </el-form-item>
          <el-form-item label="报告年度：" prop="reportYear">
            <el-select v-model="dialogForm.reportYear">
              <el-option v-for="item in filterYear(2)" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="报告频次：" prop="reportFrequency">
            <el-select v-model="dialogForm.reportFrequency">
              <el-option v-for="item in D_BZ_QUARTER" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input v-model="dialogForm.reportNotes" type="textarea" />
          </el-form-item>
          <el-form-item label="上传附件：">
            <div style="display: flex; width: 100%">
              <MOSTY.Upload v-model="dialogForm.file" :nopicer="true" :widthNumber="480" :showinput="true" :limit="5"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :delrow="delrow"
                :showbut="props.saveBtnShow" :isEdit="true" @filehandleChange="changeFile" :ShowfileList="true"
                :isImg="false" />
            </div>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>

        <el-button type="primary" @click="save(ruleFormRef)" v-if="props.saveBtnShow" :loading="loading">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button type="primary" @click="CloseEvent">
          <el-icon>
            <Back />
          </el-icon>
          <span>返回</span>
        </el-button>
      </template>
    </MOSTY.FromPage>

  </div>
</template>

<script setup>
// 引入
import { watchEffect, onMounted, ref, defineProps, getCurrentInstance, reactive } from "vue";
import { filterYear } from "@/utils/auth.js";
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const { D_BZ_QUARTER } = proxy.$dict("D_BZ_QUARTER");
//规则校验
const rules = reactive({
  reportName: [{ required: true, message: "报告名称不能为空", trigger: "blur" }],
  reportYear: [{ trigger: "blur", required: true, message: "报告年度不能为空" }],
  reportFrequency: [{ trigger: "blur", required: true, message: "报告频次不能为空" }],
});
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  title: String,
  id: String
});
const ruleFormRef = ref()
// 数据
const bigHeight = ref(); //整个高度
const delrow = ref({});
const loading = ref(false); //新增保存按钮截流
const showfile = ref(false);
const dialogForm = ref({
});

onMounted(() => {
  if (props.id) {
    getxqData(props.id)
  }
  bigHeightFn();
});
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
//获取详情
function getxqData(id) {
  getApi({ id }, "/mosty-jcgl/treatmentreport/queryTreatmentReportById").then((res) => {
    if (res) {
      dialogForm.value = res;
    }
  });
}
// 新的文件上传返回
const changeFile = (data) => { };

const CloseEvent = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close");
  }

};

// 接收外层新增保存
const save = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      dialogForm.value.file = dialogForm.value.file ? dialogForm.value.file.toString() : null;
      if (props.id) {
        postApi(dialogForm.value, "/mosty-jcgl/treatmentreport/updateTreatmentReport")
          .then((res) => {
            loading.value = false;
            ElMessage.success("修改成功");
            emits("close");
          })

      } else {
        postApi(dialogForm.value, "/mosty-jcgl/treatmentreport/addTreatmentReport")
          .then((res) => {
            loading.value = false;
            ElMessage.success("新增成功");
            emits("close");
          })

      }
    } else {
      ElMessage.warning('请输入必填项！！！')
    }
  })
}

</script>

<style lang="scss" scoped>
.el-form {
  display: block !important;

  .el-form-item {
    width: 600px;
    margin: 0 auto;
    margin-top: 10px;
  }
}
</style>
