<!-- 通知公告详情弹窗 -->
<script lang="ts" setup name="noticeDetail">
import { Editor } from '@wangeditor/editor-for-vue'
import type { noticeType } from './notice-interface'
import { getNoticeDetail } from '@/api/system/notice'
import { getPhotoUrl } from '@/api/system/tool'
const ruleForm = reactive({
  noticeNo: '', // 通知公告编号
  noticePublisher: '', // 发布人
  noticeCompany: '', // 发布单位
  noticeTime: '', // 发布时间
  noticeSketch: '', // 内容简述
  noticeContent: '', // 发布内容
  minioFileName: '', // 上传文件名
  noticeTitle: '', // 标题
}) // 表单
const dialogVisible = ref<boolean>(false) // 弹窗显示
// 弹窗初始化
const initDialog = (row: noticeType) => {
  dialogVisible.value = true
  // 获取详情信息
  getNoticeDetail({
    noticeNo: row.noticeNo,
    noticePublisher: row.noticePublisher,
    // noticeTime: row.noticeTime,
    noticeTitle: row.noticeTitle,
    noticeEndTime: '',
    noticeStartTime: '',
  }).then((res) => {
    if (res.code === 200 && res.data.rows.length) {
      ruleForm.noticeNo = res.data.rows[0].noticeNo
      ruleForm.noticePublisher = res.data.rows[0].noticePublisher
      ruleForm.noticeCompany = res.data.rows[0].noticeCompany
      ruleForm.noticeTime = res.data.rows[0].noticeTime
      ruleForm.noticeSketch = res.data.rows[0].noticeSketch
      ruleForm.noticeContent = res.data.rows[0].noticeContent
      ruleForm.minioFileName = res.data.rows[0].minioFileName
      ruleForm.noticeTitle = res.data.rows[0].noticeTitle
    }
  })
  // ruleForm.noticePublisher = userInfo.$state.name
  // ruleForm.noticeCompany = userInfo.$state.deptName
  // ruleForm.noticeTime = dayjs().format('YYYY-MM-DD')
}
defineExpose({ initDialog })
// 提交
const submitForm = () => {
  dialogVisible.value = false
}
const minioFileUrl = ref('')
watch(() => ruleForm.minioFileName, (newVal) => {
  if (newVal) {
    getPhotoUrl(newVal).then((res) => {
      minioFileUrl.value = res.data
    })
  }
})
// 编辑器配置
const editorConfig = ref({
  readOnly: true,
})
// 富文本实例对象
const editorRef = shallowRef()
const onCreated = (editor: any) => {
  editorRef.value = editor
  nextTick(() => {
    editorRef.value = editor // 一定要用 Object.seal() ，否则会报错
  })
}
</script>

<template>
  <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="详情" width="50%" append-to-body>
    <el-form label-position="right" label-width="110px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="通知公告编号" prop="noticeNo">
            <el-input :value="ruleForm.noticeNo" placeholder="" disabled />
          </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" disabled />
      </el-form-item>
      <el-form-item label="内容简述" prop="noticeSketch">
        <el-input v-model.trim="ruleForm.noticeSketch" disabled />
      </el-form-item>
      <el-form-item label="发布内容" prop="noticeContent">
        <!-- <el-input v-model.trim="ruleForm.noticeContent" :rows="4" type="textarea" disabled /> -->
        <!-- <div style="border: 1px solid #dcdfe6;width: 100%;border-radius: 4px;padding: 12px;" v-html="ruleForm.noticeContent" ></div> -->
        <div style="border: 1px solid #dcdfe6;width: 100%;border-radius: 4px;">
          <editor
            ref="editorRef"
            v-model="ruleForm.noticeContent"
            style="height: 300px; overflow-y: hidden;"
            :default-config="editorConfig"
            mode="default"
            :disabled="true"
            @onCreated="onCreated"
          />
        </div>
      </el-form-item>
      <el-form-item label="查看附件">
        <el-link v-if="ruleForm.minioFileName" :href="minioFileUrl" type="primary" target="_blank">
          {{ ruleForm.minioFileName }}
        </el-link>
        <span v-else>暂无附件</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer footer">
        <el-button type="primary" @click="submitForm()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="ts" scoped>

</style>