<template>
  <el-dialog :title="props.title" width="800px" v-model="dialogVisible" :before-close="onClose">
    <el-form ref="ruleRef" :disabled="props.title.includes('查看')" label-width="130px" :model="ruleForm" :inline="true"
      label-suffix=":" :rules="rules" style="flex-wrap: wrap;width: 100% !important;">
      <el-form-item label="总结年度" prop="year">
        <el-input v-model="ruleForm.year" disabled style="width: 100%" />
        <!-- <el-select v-model="ruleForm.year" clearable>
          <el-option v-for="item in filterYear(5)" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="总结名称" prop="annualTotalName" style="width: 600px">
        <el-input v-model="ruleForm.annualTotalName" clearable />
      </el-form-item>
      <el-form-item label="上传总结附件" style="width: 100%" prop="attachments">
        <MOSTY.Upload :widthNumber="570" :nopicer="true" :isImg="false" :ShowfileList="true"
          :placeholder="'请上传word或pdf,wps文件'" :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps']"
          v-model="ruleForm.attachments" :showinput="true">
        </MOSTY.Upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" v-loading="loadingShow" @click="onSave(ruleRef)" v-if="props.title.includes('编辑')">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button @click="onClose"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance, watch, nextTick } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const props = defineProps({ title: String, rowItem: Object, id: String });
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const loadingShow = ref(false);
const rules = reactive({
  annualTotalName: [
    { required: true, message: "总结名称", trigger: "blur" },
    { min: 1, max: 100, message: "长度在 1 到 100 个字符", trigger: "blur" }
  ],
  attachments: [
    { required: true, message: "请上传附件", trigger: "blur" },
  ]
});
const ruleForm = reactive({
  year: "",
  annualTotalName: "",
  attachments: null,
  orgCode: ""
});
const ruleRef = ref();
const emit = defineEmits(["onSave"]);
defineExpose({ dialogVisible });

const onClose = () => {
  if (props.title.includes('编辑')) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        ruleRef.value.clearValidate();
        dialogVisible.value = false;
      })
      .catch(() => {
        // catch error
      })
  } else {
    ruleRef.value.clearValidate();
    dialogVisible.value = false;
  }

};
const onSave = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      loadingShow.value = true
      ruleForm.attachments = ruleForm.attachments ? ruleForm.attachments.toString() : null;
      ruleForm.sourceId = props.rowItem.sourceId;
      postApi(ruleForm, "/mosty-jcgl/data/annualTotalInfo/updateAll")
        .then((res) => {
          ElMessage({
            message: "修改成功",
            type: "success"
          });
          emit("onSave", true);
          ruleRef.value.clearValidate();
          dialogVisible.value = false;

        })
        .finally(() => {
          loadingShow.value = false
          // butLoading.value = false
        });
    } else {
      ElMessage.warning('请输入必填项！！！')
    }
  });
};

onMounted(() => {
});
watch(
  () => dialogVisible.value,
  (n, o) => {
    if (n) {
      ruleForm.attachments = null;
      let _url = props.id ? '/mosty-jcgl/data/annualTotalInfo/getLsjlDetail' : "/mosty-jcgl/data/annualTotalInfo/getDetailById"
      let id = props.id ? props.id : props.rowItem.sourceId
      getApi({ id }, _url).then((res) => {
        if (res) {
          ruleForm.year = res.reportingYear;
          ruleForm.orgCode = res.orgCode;
          ruleForm.annualTotalName = res.annualTotalName;
          ruleForm.attachments = res.attachments;
        }


      });
    }
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.content {
  .topper {
    display: flex;

    .sub-le {
      flex: 1;
      padding: 15px 15px 5px 15px;
      border-right: 1px solid #ebeef5;
    }
  }

  .bottom {
    padding: 0 15px 10px 15px;
  }
}
</style>
