<!-- 历史文件详情 -->
<script name="SysDocDetail" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { IFileInfo } from './historyDoc-interface'
import useUserStore from '@/store/modules/user'
import { UploadFile } from '@/api/file'
import { addFileSystem, updateFileSystem } from '@/api/resource/fileSystem'
import { getPhotoUrl } from '@/api/system/tool'
import type { IDictType } from '@/commonInterface/resource-interface'
import fileChangeList from '@/views/resource/system/sysDoc/components/fileChangeList.vue'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'

import fileGrantList from '@/views/resource/system/sysDoc/components/fileGrantList.vue'
// 从路由中传过来的参数
const type = ref<string>('')
const id = ref<string>('')
const user = useUserStore()
// 获取用户信息
const userInfo = useUserStore()
const route = useRoute()
const router = useRouter()
const title = ref('')
const basicFormRef = ref()

// 字典值
const fileTypeDict = ref<Array<IDictType>>([])

const historyFileInfo = ref<IFileInfo>({
  id: '',
  fileNo: '', // 文件编号
  fileName: '', // 文件名称
  fileDistributeNo: '', // 文件发放号
  fileType: '', // 文件类型
  fileTypeName: '', // 文件类型名称
  history: '1',
  versionNo: '', // 版本号
  createUserId: '', // 创建人id
  createUserName: '', // 创建人名称
  createTime: '', // 创建时间
  remark: '', // 备注
  wordUrl: '', // word文件附件
  pdfUrl: '', // pdf文件附件
  invalidReason: '', // 作废原因
  noticeFormId: '', //	文件发放通知单id（后台在发放通知单审批通过后填充）
  noticeFormNo: '', //	文件发放通知单编号（后台在发放通知单审批通过后填充）
  changeFormId: '', //	文件更改申请单id（后台在有更改申请单的发放通知单审批通过后填充）
  changeFormNo: '', //	文件更改申请单编号（后台在有更改申请单的发放通知单审批通过后填充）
  recallArchiveId: '', // 文件作废登记表id
  recallArchiveNo: '', // 文件作废登记表编号
})

const sysFileRules = ref({
  fileNo: [{ required: true, message: '文件编号不能为空', trigger: 'blur' }],
  fileName: [{ required: true, message: '文件名称不能为空', trigger: 'blur' }],
  fileType: [{ required: true, message: '文件类别不能为空', trigger: ['change', 'blur'] }],
  // fileDistributeNo: [{ required: true, message: '发放号不能为空', trigger: 'blur' }],
  // versionNo: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
  pdfUrl: [{ required: true, message: '文件附件(pdf版)不能为空', trigger: 'blur' }],
}) // 表单验证规则

const minioFileUrl = ref<string>('')
// 作废原因
const archiveReasonList = [{
  value: '因文件收回存档申请通过自动作废',
},
{
  value: '因文件更改申请通过自动作废',
}]
// -------------------------------------标签--------------------------------------------------
const radioMenus = ref([ // 标签内容
  { name: '基本信息', value: 'hisDoc-basic' },
  { name: '文件更改申请单', value: 'hisDoc-change' },
  { name: '文件发放通知单', value: 'hisDoc-grantNotice' },
])
const current = ref('hisDoc-basic') // 选择的tab 默认基本信息
// -------------------------------------字典--------------------------------------------------

const labCodeList = ref<dictType[]>([]) // 实验室
const groupCodeList = ref<dictType[]>([]) // 部门
function getDict() {
  // 实验室
  getDictByCode('bizLabCode').then((response) => {
    labCodeList.value = response.data
  })
  // 部门
  getDictByCode('bizGroupCode').then((response) => {
    groupCodeList.value = response.data
  })
}
// -------------------------------------------文件上传--------------------------------------
// 文件上传
const wordFileRef = ref() // 文件附件ref
const pdfFileRef = ref() // 文件附件pdfRef

// 考核表word
const onWordFileChange = (event: any) => {
  if (event.target.files[0].type !== 'application/msword' && event.target.files[0].type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
    ElMessage.warning('请上传doc、docx文件格式')
    return
  }
  UploadFileFn(event, 'wordUrl', '文件上传成功')
}
// 考核表pdf
const onPdfFileChange = (event: any) => {
  if (event.target.files[0].type !== 'application/pdf') {
    ElMessage.warning('请上传pdf格式')
    return
  }
  UploadFileFn(event, 'pdfUrl', '文件上传成功')
}

// 上传文件操作
function UploadFileFn(event: any, prop: string, message: string) {
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    const loading = ElLoading.service({
      lock: true,
      text: '文件上传中...',
      background: 'rgba(255, 255, 255, 0.6)',
    })
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        historyFileInfo.value[prop] = res.data[0]
        event.target.value = null
        // 重置当前验证
        ElMessage.success(message)
      }
      else {
        ElMessage.error(res.message)
      }
      loading.close()
    })
  }
}

const upload = (fileRef: any) => {
  fileRef.click()
}
// -----------------------------------------------------------------------------------------
const resetForm = () => {
  sessionStorage.removeItem('historyFileInfo') // 返回列表时 将缓存中的数据删除
  router.go(-1)
}

// 添加
const saveFileHistoryForm = () => {
  // 将创建时间改为提交的时间
  historyFileInfo.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
  addFileSystem(historyFileInfo.value).then((res) => {
    if (res.code === 200) {
      // 提示保存成功
      ElMessage.success('保存成功')
      type.value = 'detail'
      title.value = '历史文件（详情）'
    }
    else {
      // 提示失败信息
      ElMessage.error(`保存失败：${res.message}`)
    }
  })
}
// 编辑
const updateFileHistoryById = () => {
  updateFileSystem(historyFileInfo.value).then((res) => {
    if (res.code === 200) {
      // 提示保存成功
      ElMessage.success('保存成功')
      type.value = 'detail'
      title.value = '历史文件（详情）'
    }
    else {
      // 提示失败信息
      ElMessage.error(`保存失败：${res.message}`)
    }
  })
}

// 保存
const saveForm = () => {
  if (!basicFormRef.value) { return }

  basicFormRef.value.validate((valid: boolean, fields: any) => {
    if (valid === true) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        if (type.value === 'create') {
          saveFileHistoryForm()
        }
        else if (type.value === 'update') {
          updateFileHistoryById()
        }
      })
    }
  })
}

const $router = useRouter()

// 点击文件发放通知单或者文件修改申请单，跳转详情页面
const handleClickFormNo = (type: 'change' | 'grant' | 'cancel') => {
  switch (type) {
    case 'change': // 文件更改申请单
      $router.push({
        query: {
          id: historyFileInfo.value.changeFormId,
          status: '0',
        },
        path: '/file/change/approved/detail',
      })
      break
    case 'grant': // 文件发放通知单
      $router.push({
        query: {
          id: historyFileInfo.value.noticeFormId,
          status: '0',
        },
        path: '/file/grantNotice/approved/detail',
      })
      break
    case 'cancel': // 文件作废登记表
      $router.push({
        query: {
          id: historyFileInfo.value.recallArchiveId,
          status: '0',
        },
        path: '/file/recallArchive/approved/detail',
      })
      break
  }
}

const initDialog = (params: any) => {
  // 从路由中获取参数
  type.value = params.type
  id.value = params.id !== undefined ? params.id : ''

  switch (params.type) {
    case 'create' :
      title.value = '历史文件（新增）'

      // 创建人和创建时间设置默认值
      historyFileInfo.value.createUserId = userInfo.id
      historyFileInfo.value.createUserName = userInfo.name
      historyFileInfo.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      historyFileInfo.value.labCode = user.bizLabCode
      historyFileInfo.value.labCodeName = user.labCodeName
      historyFileInfo.value.groupCode = user.groupNo
      historyFileInfo.value.groupCodeName = user.groupName
      break
    case 'detail':
      title.value = '历史文件（详情）'
      id.value = params.id

      historyFileInfo.value = JSON.parse(sessionStorage.getItem('historyFileInfo')!)

      break
    default:
      title.value = '历史文件（编辑）'
      id.value = params.id

      historyFileInfo.value = JSON.parse(sessionStorage.getItem('historyFileInfo')!)
  }
}

// 监听 显示中文 立即监听
watch(() => historyFileInfo.value.fileType, (newVal) => {
  if (fileTypeDict.value.length === 0) {
    fileTypeDict.value = JSON.parse(sessionStorage.getItem('bizFileType')!)
  }
  const targetList = fileTypeDict.value.filter(item => item.value === newVal)
  if (targetList.length > 0) {
    historyFileInfo.value.fileTypeName = targetList[0].name
  }
  else {
    historyFileInfo.value.fileTypeName = ''
  }
}, { immediate: true })

onMounted(async () => {
  getDict()
  initDialog(route.query)
})
</script>

<template>
  <app-container>
    <detail-page :title="`${title}`">
      <template #btns>
        <el-button v-if="type !== 'detail'" type="primary" @click="saveForm">
          保存
        </el-button>
        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>

      <el-radio-group v-model="current">
        <el-radio-button
          v-for="item in radioMenus"
          :key="item.value"
          :label="item.value"
          :disabled="type === 'create' && (item.value === 'hisDoc-change' || item.value === 'hisDoc-grantNotice')"
        >
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </detail-page>
    <detail-block v-show="current === 'hisDoc-basic'">
      <el-form ref="basicFormRef" :model="historyFileInfo" :rules="sysFileRules" label-position="right" label-width="110px" border stripe>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input v-model="historyFileInfo.createUserName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-input v-model="historyFileInfo.createTime" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实验室" prop="labCode">
              <el-select
                v-model="historyFileInfo.labCode"
                placeholder="实验室"
                :disabled="type === 'detail'"
                class="full-width-input"
              >
                <el-option
                  v-for="item in labCodeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="部门" prop="groupCode">
              <el-select
                v-model="historyFileInfo.groupCode"
                placeholder="部门"
                :disabled="type === 'detail'"
                class="full-width-input"
              >
                <el-option
                  v-for="item in groupCodeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="文件类型" prop="fileType">
              <el-select v-model="historyFileInfo.fileType" placeholder="请选择文件类型" tabindex="5" style="width: 100%;" :clearable="true" :disabled="type === 'detail'">
                <el-option v-for="dict in fileTypeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
              </el-select>
              <el-input v-model="historyFileInfo.fileTypeName" type="hidden" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="文件编号" prop="fileNo">
              <el-input v-model="historyFileInfo.fileNo" placeholder="请输入文件编号" :clearable="true" :disabled="type === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="文件名称" prop="fileName">
              <el-input v-model="historyFileInfo.fileName" :clearable="true" placeholder="请输入文件名称" :disabled="type === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发放号" prop="fileDistributeNo">
              <el-input v-model="historyFileInfo.fileDistributeNo" :clearable="true" placeholder="请输入发放号" :disabled="type === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="版本号" prop="versionNo">
              <el-input v-model="historyFileInfo.versionNo" :clearable="true" placeholder="请输入版本号" :disabled="type === 'detail'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="文件附件(word版):" label-width="150px" prop="wordUrl">
              <show-photo v-if="historyFileInfo.wordUrl" :minio-file-name="historyFileInfo.wordUrl" />
              <input v-show="false" ref="wordFileRef" type="file" @change="onWordFileChange">
              <el-button v-if="type !== 'detail'" id="file" type="primary" :style="{ 'margin-left': historyFileInfo.wordUrl === '' ? '0px' : '20px' }" @click="upload(wordFileRef)">
                {{ historyFileInfo.wordUrl === '' ? '上传' : '更换附件' }}
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件附件(pdf版):" label-width="150px" prop="pdfUrl">
              <show-photo v-if="historyFileInfo.pdfUrl" :minio-file-name="historyFileInfo.pdfUrl" />
              <input v-show="false" ref="pdfFileRef" type="file" @change="onPdfFileChange">
              <el-button v-if="type !== 'detail'" id="file" type="primary" :style="{ 'margin-left': historyFileInfo.pdfUrl === '' ? '0px' : '20px' }" @click="upload(pdfFileRef)">
                {{ historyFileInfo.pdfUrl === '' ? '上传' : '更换附件' }}
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作废原因">
              <el-autocomplete
                v-model="historyFileInfo.invalidReason"
                :fetch-suggestions="archiveReasonList"
                placeholder="作废原因"
                style="width: 100%;"
                :disabled="type === 'detail'"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="historyFileInfo.remark" placeholder="请输入备注信息" type="textarea" autosize :clearable="true" :disabled="type === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col v-if="type === 'detail'" :span="12">
            <el-form-item label="文件更改申请单:" label-width="150">
              <div v-if="historyFileInfo.changeFormNo" style="cursor: pointer; color: #3d7eff;text-decoration: underline;" @click="handleClickFormNo('change')">
                {{ historyFileInfo.changeFormNo }}
              </div>
              <span v-else>/</span>
            </el-form-item>
          </el-col>
          <el-col v-if="type === 'detail'" :span="12">
            <el-form-item label="文件发放通知单:" label-width="150">
              <div v-if="historyFileInfo.noticeFormNo" style="cursor: pointer; color: #3d7eff;text-decoration: underline;" @click="handleClickFormNo('grant')">
                {{ historyFileInfo.noticeFormNo }}
              </div>
              <span v-else>/</span>
            </el-form-item>
          </el-col>
          <el-col v-if="type === 'detail'" :span="12">
            <el-form-item label="文件收回存档登记表:" label-width="150">
              <div v-if="historyFileInfo.recallArchiveNo" style="cursor: pointer; color: #3d7eff;text-decoration: underline;" @click="handleClickFormNo('cancel')">
                {{ historyFileInfo.recallArchiveNo }}
              </div>
              <span v-else>/</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>

    <!-- 文件更改申请单 -->
    <file-change-list v-show="current === 'hisDoc-change'" :file-no="historyFileInfo.fileNo" />
    <!-- 文件发放通知单 -->
    <file-grant-list v-show="current === 'hisDoc-grantNotice'" :file-no="historyFileInfo.fileNo" />
  </app-container>
</template>