<script name="QualityReportDetail" lang="ts" setup>
import { ElMessage } from 'element-plus'
import baseInfo from './edit.vue'
import filePreview from '@/views/quality/supervise/record/components/filePreviewMultiple.vue'
import { getQualityReportFile } from '@/api/quality/supervise/report'
import pdfFile from '@/views/quality/supervise/record/components/pdfFile.vue'
import { exportFile, printContent } from '@/utils/exportUtils'
import { getFiles } from '@/utils/download'
import pdfFileItem from '@/views/quality/supervise/record/components/pdfFileItem.vue'
import { getQualityNoReportFile } from '@/api/quality/supervise/analysis'
const $router = useRouter()
const $route = useRoute()
// 不符合要求情况分析报告
const nonConformanceRepNameList = ref<any[]>([])
const nonConformanceRepFileList = ref<any[]>([])
// 问题文件
const problemNameList = ref<any[]>([])
const problemFileList = ref<any[]>([])
// 纠正措施处理单
const correctNameList = ref<any[]>([])
const correctFileList = ref<any[]>([])
// 预防措施处理单
const preventNameList = ref<any[]>([])
const preventFileList = ref<any[]>([])
// 整改
const rectificationNameList = ref<any[]>([])
const rectificationFileList = ref<any[]>([])
// 整理文件数据
const baseRef = ref()
const ruleForm = ref<any>({
  reps: [],
  processRecords: [],
  nonConformanceRep: [],
  correctiveRecords: [],
  preventRecords: [],
})
watch(() => baseRef.value?.ruleForm, (val) => {
  console.log(val, 'val')
  ruleForm.value = val
  // 不符合要求情况分析报告
  if (!Array.isArray(val.reps)) {
    ruleForm.value.reps = []
  }
  // if (!Array.isArray(val.processRecords)) {
  //   ruleForm.value.processRecords = []
  // }
  // if (!Array.isArray(val.nonConformanceRep)) {
  //   ruleForm.value.nonConformanceRep = []
  // }
  // 纠正措施处理单集合
  if (!Array.isArray(val.correctiveRecords)) {
    ruleForm.value.correctiveRecords = []
  }
  // 预防措施处理单集合
  if (!Array.isArray(val.preventRecords)) {
    ruleForm.value.preventRecords = []
  }
  // 不符合要求情况分析报告
  let arr = [] as any[]
  ruleForm.value.reps.forEach((item: any) => {
    arr = [...arr, ...item.conformanceFileRels]
    nonConformanceRepNameList.value.push(item)
    // if (item.fileName) {
    //   nonConformanceRepNameList.value.push(`${item.fileName}`)
    // }
    // else {
    //   nonConformanceRepNameList.value.push('')
    // }
    // if (item.filePath) {
    //   nonConformanceRepFileList.value.push(item.filePath)
    // }
    // else {
    //   nonConformanceRepFileList.value.push('')
    // }
  })
  // 问题文件
  arr.forEach((item: any) => {
    if (item.fileName) {
      problemNameList.value.push(`${item.fileName}`)
    }
    else {
      problemNameList.value.push('')
    }
    if (item.filePath) {
      problemFileList.value.push(item.filePath)
    }
    else {
      problemFileList.value.push('')
    }
  })
  // 纠正措施处理单
  let rectification = [] as any[]
  ruleForm.value.correctiveRecords.forEach((item: any) => {
    console.log(item, 'item')
    rectification = [...rectification, item.fileRelList]
    if (item.fileName) {
      correctNameList.value.push(`${item.fileName}`)
    }
    else {
      correctNameList.value.push('')
    }
    if (item.filePath) {
      correctFileList.value.push(item.filePath)
    }
    else {
      correctFileList.value.push('')
    }
  })
  // 预防
  ruleForm.value.preventRecords.forEach((item: any) => {
    if (item.fileName) {
      preventNameList.value.push(`${item.fileName}`)
    }
    else {
      preventNameList.value.push('')
    }
    if (item.filePath) {
      preventFileList.value.push(item.filePath)
    }
    else {
      preventFileList.value.push('')
    }
  })
  // 整改
  rectification.forEach((item: any) => {
    if (item.fileName) {
      rectificationNameList.value.push(`${item.fileName}`)
    }
    else {
      rectificationNameList.value.push('')
    }
    if (item.filePath) {
      rectificationFileList.value.push(item.filePath)
    }
    else {
      rectificationFileList.value.push('')
    }
  })
}, {
  deep: true,
})
const showMenu = () => {
  return baseRef?.value?.showMenu === '基本信息'
}
const { proxy } = getCurrentInstance() as any
// 获取文件流
const file = ref()
const getFile = (fun: any) => {
  getQualityReportFile({
    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('下载失败')
  }
}
// 点击不符合要求情况分析报告的详情
const getQualityNoReportFileItem = (id: string, fun: any) => {
  getQualityNoReportFile({ id, pdf: true }).then((res) => {
    fun(res.data)
  }).catch(() => {
    fun()
  })
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page title="质量监督报告">
      <template #btns>
        <el-button v-if="proxy.hasPerm('/quality/supervise/report/download')" type="primary" @click="downloadFile">
          下载
        </el-button>
        <el-button v-if="proxy.hasPerm('/quality/supervise/report/print')" type="primary" @click="printFile">
          打印
        </el-button>
        <el-button type="info" @click="$router.go(-1)">
          关闭
        </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">
                <!-- rep -->
                <!-- <file-preview :minio-file-name="nonConformanceRepNameList" :minio-file-path="nonConformanceRepFileList" /> -->
                <template v-for="item in nonConformanceRepNameList" :key="item">
                  <pdf-file-item :item="item" @get-file="getQualityNoReportFileItem" />
                </template>
              </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="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-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-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>