<!-- 体系文件详情 -->
<script name="SysDocDetail" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { IFileInfo } from './sysDoc-interface'
import fileChangeList from './components/fileChangeList.vue'
import fileGrantList from './components/fileGrantList.vue'
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 type { dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
// 从路由中传过来的参数
const type = ref<string>('')
const id = ref<string>('')

// 获取用户信息
const userInfo = useUserStore()
const route = useRoute()
const router = useRouter()
const title = ref('')

const basicFormRef = ref()

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

const sysFileInfo = ref<IFileInfo>({
  id: '',
  formNo: '', // 系统编号
  labCode: '', // 实验室
  labCodeName: '', // 实验室名称
  groupCode: '', // 部门代码
  groupCodeName: '', // 部门名称
  fileNo: '', // 文件编号
  fileName: '', // 文件名称
  fileDistributeNo: '', // 文件发放号
  fileType: '', // 文件类别
  fileTypeName: '',
  history: '0',
  versionNo: '', // 版本号
  effectiveDate: '', // 实施日期
  promulgateTime: '', // 颁布日期
  createUserId: '',
  createUserName: '',
  createTime: '',
  remark: '',
  noticeFormId: '', //	文件发放通知单id（后台在发放通知单审批通过后填充）
  noticeFormNo: '', //	文件发放通知单编号（后台在发放通知单审批通过后填充）
  changeFormId: '', //	文件更改申请单id（后台在有更改申请单的发放通知单审批通过后填充）
  changeFormNo: '', //	文件更改申请单编号（后台在有更改申请单的发放通知单审批通过后填充）
  wordUrl: '', // 文件附件word版
  pdfUrl: '', // 文件附件pdf版
})

// -------------------------------------标签--------------------------------------------------
const radioMenus = ref([ // 标签内容
  { name: '基本信息', value: 'sysDoc-basic' },
  { name: '文件更改申请单', value: 'sysDoc-change' },
  { name: '文件发放通知单', value: 'sysDoc-grantNotice' },
])
const current = ref('sysDoc-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 $router = useRouter()

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

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

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

  switch (params.type) {
    case 'detail':
      title.value = '体系文件（详情）'
      id.value = params.id
      sysFileInfo.value = JSON.parse(sessionStorage.getItem('sysFileInfo')!)

      break
    default:
      title.value = ''
      break
  }
}

// 监听 显示中文 立即监听
watch(() => sysFileInfo.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) {
    sysFileInfo.value.fileTypeName = targetList[0].name
  }
  else {
    sysFileInfo.value.fileTypeName = ''
  }
}, { immediate: true })

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

<template>
  <app-container>
    <detail-page :title="`${title}`">
      <template #btns>
        <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"
        >
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </detail-page>
    <detail-block v-show="current === 'sysDoc-basic'">
      <el-form ref="basicFormRef" :model="sysFileInfo" label-position="right" label-width="110px" border stripe>
        <el-row :gutter="24">
          <!-- <el-col :span="6">
            <el-form-item label="系统编号">
              <el-input v-model="sysFileInfo.formNo" placeholder="系统自动生成" disabled />
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input v-model="sysFileInfo.createUserName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-input v-model="sysFileInfo.createTime" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实验室" prop="labCode">
              <el-select
                v-model="sysFileInfo.labCode"
                placeholder="实验室"
                disabled
                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="sysFileInfo.groupCode"
                placeholder="部门"
                disabled
                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="sysFileInfo.fileType" placeholder="文件类型" disabled>
                <el-option v-for="dict in fileTypeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
              </el-select>
              <el-input v-model="sysFileInfo.fileTypeName" type="hidden" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="文件编号" prop="fileNo">
              <el-input v-model="sysFileInfo.fileNo" placeholder="文件编号" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="文件名称" prop="fileName">
              <el-input v-model="sysFileInfo.fileName" placeholder="文件名称" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="发放号" prop="fileDistributeNo">
              <el-input v-model="sysFileInfo.fileDistributeNo" placeholder="发放号" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="版本号" prop="versionNo">
              <el-input v-model="sysFileInfo.versionNo" placeholder="版本号" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="颁布日期" prop="promulgateTime">
              <!-- <el-date-picker
                v-model="sysFileInfo.promulgateTime"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="颁布日期"
                disabled
              /> -->
              <el-input v-model="sysFileInfo.promulgateTime" placeholder="颁布日期" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="实施日期" prop="effectiveDate">
              <!-- <el-date-picker
                v-model="sysFileInfo.effectiveDate"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="实施日期"
                disabled
              /> -->
              <el-input v-model="sysFileInfo.effectiveDate" placeholder="实施日期" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="sysFileInfo.remark" type="textarea" autosize disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第四行 -->
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="文件附件(word版):" label-width="130">
              <show-photo v-if="sysFileInfo.wordUrl" :minio-file-name="sysFileInfo.wordUrl" />
              <span v-else>/</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件附件(pdf版):" label-width="130">
              <show-photo v-if="sysFileInfo.pdfUrl" :minio-file-name="sysFileInfo.pdfUrl" />
              <span v-else>/</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件更改申请单:" label-width="130">
              <div v-if="sysFileInfo.changeFormNo" style="cursor: pointer; color: #3d7eff;text-decoration: underline;" @click="handleClickFormNo('change')">
                {{ sysFileInfo.changeFormNo }}
              </div>
              <span v-else>/</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件发放通知单:" label-width="130">
              <div v-if="sysFileInfo.noticeFormNo" style="cursor: pointer; color: #3d7eff;text-decoration: underline;" @click="handleClickFormNo('grant')">
                {{ sysFileInfo.noticeFormNo }}
              </div>
              <span v-else>/</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>

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