<!-- 新增通知公告弹窗 -->
<script lang="ts" setup name="addNotice">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import { addNoticeApi, uploadApi } from '@/api/system/notice'
import useUserStore from '@/store/modules/user'
const emits = defineEmits(['resetData'])
const userInfo = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const ruleForm = reactive({
  noticeNo: '', // 通知公告编号
  noticePublisher: '', // 发布人
  noticeCompany: '', // 发布单位
  noticeTime: '', // 发布时间
  noticeSketch: '', // 内容简述
  noticeContent: '', // 发布内容
  minioFileName: '', // 上传文件名
  noticeTitle: '', // 标题
}) // 表单
const rules = ref<FormRules>({
  noticeNo: [{ required: true, message: '通知公告编号不能为空', trigger: 'blur' }],
  noticeSketch: [{ required: true, message: '内容简述不能为空', trigger: 'blur' }],
  noticeContent: [{ required: true, message: '发布内容不能为空', trigger: 'blur' }],
}) // 表单验证规则
const dialogVisible = ref<boolean>(false) // 弹窗显示
// 弹窗初始化
const initDialog = () => {
  dialogVisible.value = true
  ruleForm.noticePublisher = userInfo.$state.name
  ruleForm.noticeCompany = userInfo.$state.deptName
  ruleForm.noticeTime = dayjs().format('YYYY-MM-DD')
}
defineExpose({ initDialog })
// 关闭弹窗
const close = () => {
  dialogVisible.value = false
  emits('resetData')
}
// 提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.noticeTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      addNoticeApi(ruleForm).then((res) => {
        if (res.code === 200) {
          close()
          ElMessage.success('发布成功')
        }
        else {
          ElMessage.error(res.message)
        }
      })
    }
  })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  // if (!formEl) { return }
  formEl?.resetFields()
  dialogVisible.value = false
  emits('resetData')
}
const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  // 原生上传图片
  // console.log(event.target.files)
  if (event.target.files[0].type === 'application/pdf') {
    if (event.target.files?.length !== 0) {
      // 创建formdata对象
      const fd = new FormData()
      fd.append('multipartFile', event.target.files[0])
      uploadApi(fd).then((res) => {
        if (res.code === 200) {
          ruleForm.minioFileName = res.data[0]
          ElMessage.success('上传成功')
        }
        else {
          ElMessage.error(res.message)
        }
      })
    }
  }
  else {
    ElMessage.error('请上传pdf格式')
  }
}
const upload = () => {
  fileRef.value.click()
}
</script>

<template>
  <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="添加公告" width="50%" append-to-body>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="110px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="通知公告编号" prop="noticeNo">
            <el-input v-model.trim="ruleForm.noticeNo" placeholder="请输入通知公告编号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发布人" prop="noticePublisher">
            <el-input v-model.trim="ruleForm.noticePublisher" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="发布单位" prop="noticeCompany">
            <el-input v-model.trim="ruleForm.noticeCompany" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发布时间" prop="noticeTime">
            <el-input v-model.trim="ruleForm.noticeTime" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="标题" prop="noticeTime">
        <el-input v-model.trim="ruleForm.noticeTitle" />
      </el-form-item>
      <el-form-item label="内容简述" prop="noticeSketch">
        <el-input v-model.trim="ruleForm.noticeSketch" />
      </el-form-item>
      <el-form-item label="发布内容" prop="noticeContent">
        <el-input v-model.trim="ruleForm.noticeContent" :rows="4" type="textarea" />
      </el-form-item>
      <el-form-item label="附件" prop="noticeTime">
        <span>{{ ruleForm.minioFileName }}</span>
        <el-button type="primary" @click="upload">
          上传
        </el-button>
        <input v-show="false" ref="fileRef" type="file" accept="pdf/*" @change="onFileChange">
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          发布
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style lang="ts" scoped></style>