<script name="QualityReportDetail" lang="ts" setup>
import baseInfo from './edit.vue'
import filePreview from '@/views/quality/supervise/record/components/filePreviewMultiple.vue'
const $router = useRouter()
// 不符合要求情况分析报告
const nonConformanceRepNameList = ref<string[]>([])
const nonConformanceRepFileList = ref<string[]>([])
// 问题文件
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({
  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]
    if (item.fileName) {
      nonConformanceRepNameList.value.push(`${item.fileCode}-${item.fileName}`)
    }
    else {
      nonConformanceRepNameList.value.push('')
    }
    if (item.filePath) {
      nonConformanceRepFileList.value.push(`${item.fileCode}-${item.fileName}`)
    }
    else {
      nonConformanceRepFileList.value.push('')
    }
  })
  // 问题文件
  arr.forEach((item: any) => {
    if (item.fileName) {
      problemNameList.value.push(`${item.fileCode}-${item.fileName}`)
    }
    else {
      problemNameList.value.push('')
    }
    if (item.filePath) {
      problemFileList.value.push(`${item.fileCode}-${item.fileName}`)
    }
    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.fileCode}-${item.fileName}`)
    }
    else {
      correctNameList.value.push('')
    }
    if (item.filePath) {
      correctFileList.value.push(`${item.fileCode}-${item.fileName}`)
    }
    else {
      correctFileList.value.push('')
    }
  })
  // 预防
  ruleForm.value.preventRecords.forEach((item: any) => {
    if (item.fileName) {
      preventNameList.value.push(`${item.fileCode}-${item.fileName}`)
    }
    else {
      preventNameList.value.push('')
    }
    if (item.filePath) {
      preventFileList.value.push(`${item.fileCode}-${item.fileName}`)
    }
    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.fileCode}-${item.fileName}`)
    }
    else {
      rectificationFileList.value.push('')
    }
  })
}, {
  deep: true,
})
const showMenu = () => {
  return baseRef?.value?.showMenu === '基本信息'
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page title="质量监督报告">
      <template #btns>
        <el-button type="primary">
          下载
        </el-button>
        <el-button type="primary">
          打印
        </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" />
              </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>
      </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>