<!-- 不符合要求情况分析报告详情 -->
<script name="QualityNoAyalysisDetail" lang="ts" setup>
import { ElMessage } from 'element-plus'
import baseInfo from './edit.vue'
import filePreview from '@/views/quality/supervise/record/components/filePreviewMultiple.vue'
import { getQualityNoReportFile } from '@/api/quality/supervise/analysis'
import pdfFile from '@/views/quality/supervise/record/components/pdfFile.vue'
import { exportFile, printContent } from '@/utils/exportUtils'
import { getFiles } from '@/utils/download'
const $router = useRouter()
const $route = useRoute()
// 问题文件
const problemNameList = ref<string[]>([])
const problemFileList = ref<string[]>([])
// 纠正措施处理单
const correctNameList = ref<string[]>([])
const correctFileList = ref<string[]>([])
// 预防措施处理单
const preventNameList = ref<string[]>([])
const preventFileList = ref<string[]>([])
// 整改
const rectificationNameList = ref<string[]>([])
const rectificationFileList = ref<string[]>([])
// 整理文件数据
const baseRef = ref()
const ruleForm = ref<any>({
  conformanceFileRels: [],
  preventRecords: [],
  correctiveRecords: [],
})
watch(() => baseRef.value?.ruleForm, (val) => {
  ruleForm.value = val
  // 问题文件
  if (!Array.isArray(val.conformanceFileRels)) {
    ruleForm.value.conformanceFileRels = []
  }
  // 预防
  if (!Array.isArray(val.preventRecords)) {
    ruleForm.value.preventRecords = []
  }
  // 整改
  if (!Array.isArray(val.correctiveRecords)) {
    ruleForm.value.correctiveRecords = []
  }

  // 整理问题文件
  ruleForm.value.conformanceFileRels.forEach((item: any) => {
    problemNameList.value.push(`${item.fileName}`)
    problemFileList.value.push(item.filePath)
  })
  // 预防
  ruleForm.value.preventRecords.forEach((item: any) => {
    preventNameList.value.push(`${item.fileName}`)
    preventFileList.value.push(item.filePath)
  })
  // 整改
  ruleForm.value.correctiveRecords.forEach((item: any) => {
    rectificationNameList.value.push(`${item.fileName}`)
    rectificationFileList.value.push(item.filePath)
    item.correctiveActionFiles.forEach((citem: any) => {
      // 纠正
      correctNameList.value.push(`${item.fileName}`)
      correctFileList.value.push(item.filePath)
    })
  })
}, {
  deep: true,
})
const showMenu = () => {
  return baseRef?.value?.showMenu === '基本信息'
}
// 关闭页面
const close = () => {
  // 向预防措施单页面传递填充页面信号
  if (sessionStorage.getItem('QualityPreventHandler-info')) {
    sessionStorage.setItem('QualityPreventHandler-info-flag', '1')
  }
  // 向纠正措施单页面传递填充页面信号
  if (sessionStorage.getItem('QualityCorrectHandler-info')) {
    sessionStorage.setItem('QualityCorrectHandler-info-flag', '1')
  }
  $router.go(-1)
}
// 启动预防措施管理
const startPrevent = () => {
  const data = JSON.parse($route.query.row as string)
  $router.push({
    path: `/preventhandle/create/${data.id}`,
    query: {
      row: $route.query.row as string,
      fileType: '1', // 输入来源类型
    },
  })
}
// 启动纠正措施管理
const startCorrect = () => {
  const data = JSON.parse($route.query.row as string)
  $router.push({
    path: `/correcthandle/create/${data.id}`,
    query: {
      row: $route.query.row as string,
      fileType: '1', // 输入来源类型
    },
  })
}
// 获取文件流
const file = ref()
const getFile = (fun: any) => {
  getQualityNoReportFile({
    id: $route.query.id,
    pdf: true,
  }).then((res) => {
    file.value = res.data
    fun(res)
  }).catch(() => {
    fun()
  })
}
// 打印
const printFile = () => {
  if (file.value) {
    printContent(getFiles(file.value, 'application/pdf;chartset=UTF-8'))
  }
  else {
    ElMessage.warning('打印失败')
  }
}
// 下载
const downloadFile = () => {
  if (file.value) {
    exportFile(file.value, `${ruleForm.value.fileName}-${ruleForm.value.fileCode}.pdf`)
  }
  else {
    ElMessage.warning('下载失败')
  }
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page title="不符合要求情况分析报告">
      <template #btns>
        <el-button type="primary" @click="startCorrect">
          启动纠正措施管理
        </el-button>
        <el-button type="primary" @click="startPrevent">
          启动预防措施管理
        </el-button>
        <el-button type="primary" @click="downloadFile">
          下载
        </el-button>
        <el-button type="primary" @click="printFile">
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <div class="base-info-report">
      <base-info ref="baseRef" />
      <detail-block v-show="showMenu()" title="">
        <el-form ref="ruleFormRef" :model="{}">
          <!-- <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="不符合要求情况分析报告" label-width="180px">
                <file-preview :minio-file-name="nonConformanceRepNameList" :minio-file-path="nonConformanceRepFileList" />
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="问题文件" label-width="180px">
                <!-- rep -->
                <file-preview :minio-file-name="problemNameList" :minio-file-path="problemFileList" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="整改文件" label-width="180px">
                <!-- rep -->
                <file-preview :minio-file-name="rectificationNameList" :minio-file-path="rectificationFileList" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="纠正措施处理单" label-width="180px">
                <!-- rep -->
                <file-preview :minio-file-name="correctNameList" :minio-file-path="correctFileList" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="预防措施处理单" label-width="180px">
                <!-- rep -->
                <file-preview :minio-file-name="preventNameList" :minio-file-path="preventFileList" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <pdf-file @get-file="getFile" />
      </detail-block>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.base-info-report {
  ::v-deep(.app-container) {
    padding: 0 !important;

    .info-header {
      display: none;
    }

    .info-body {
      display: none;
    }
  }
}
</style>