<!-- 文件列表 -->
<script name="fileListTable" lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import addFileDialog from './addFileDialog.vue'
import selectFileDialog from './selectFileDialog.vue'
import { getDictByCode } from '@/api/system/dict'
import { useCheckList, useCheckNoTips } from '@/commonMethods/useCheckList'
import { exportFile, printContent } from '@/utils/exportUtils'
import { getQualityNoReportFile } from '@/api/quality/supervise/analysis'
import { getReviewFormFile } from '@/api/quality/internal/inspect'
import { getNonReviewFormFile } from '@/api/quality/internal/dissatisfied'
import { getReviewRepFile } from '@/api/quality/review/report'
const $props = defineProps({
  data: {
    type: Array,
    required: true,
  },
  type: {
    type: String,
    default: '',
  },
})
const $route = useRoute()
const $router = useRouter()
const list = ref<any[]>([])
watch(() => $props.data, (newVal) => {
  if (newVal.length) {
    list.value = $props.data
  }
  else {
    list.value = []
  }
}, {
  deep: true,
})
const columns = ref([
  { text: '文件类型', value: 'fileTypeName', isSelect: true, required: true },
  { text: '文件编号', value: 'fileCode', isSelect: false, required: true },
  { text: '文件名称', value: 'fileName', isSelect: false, required: true },
  { text: '创建人', value: 'creatorName', isSelect: false, isDate: true, required: false },
  { text: '创建时间', value: 'createTime', isSelect: false, isDate: true, required: true },
])

// 检查数据列表
function checkCertificateList() {
  return useCheckList(list.value, columns.value, '文件列表')
}
// 将列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of list.value) {
    item.editable = false
  }
}
// 编辑行
const dblclickRow = (row: any) => {
  if ($route.path.includes('detail')) { return }
  setAllRowReadable()
  row.editable = true
}
// 删除行
const deleteRow = (row: any) => {
  ElMessageBox.confirm(
    '确认删除当前行数据吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const data = list.value.findIndex(item => item === row)
    list.value.splice(data, 1)
  })
}
const swapArray = (index1: number, index2: number) => {
  list.value[index1] = list.value.splice(index2, 1, list.value[index1])[0]
}
const handler = (type: string, index: number) => {
  if (type === 'insert') {
    if (!checkCertificateList()) { return }
    setAllRowReadable()
    list.value.splice(index + 1, 0, {
      inspectionContent: '',
      inspectionMethod: '',
      inspectionRes: '',
      refStandard: '',
      editable: true,
    })
  }
  else if (type === 'delete') {
    deleteRow(list.value[index])
  }
  else if (type === 'update') {
    if (!checkCertificateList()) { return }
    dblclickRow(list.value[index])
  }
  else if (type === 'up') {
    if (index === 0) {
      return
    }
    swapArray(index, index - 1)
  }
  else if (type === 'down') {
    if (index === list.value.length - 1) {
      return
    }
    swapArray(index, index + 1)
  }
}
// 鼠标移出表格 自动置为不可编辑状态
const eventBlur = () => {
  if ($route.path.includes('detail')) { return }
  if (useCheckNoTips(list.value, columns.value)) {
    setAllRowReadable()
  }
}
defineExpose({
  list,
  checkCertificateList,
})
// 字典
const typeList = ref<any[]>([])
const typeFileList = ref<any[]>([])
getDictByCode('externalFileType').then((res) => {
  // 外审文件类型
  typeList.value = res.data
})
getDictByCode('auditManagementFileType').then((res) => {
  // 外审文件类型
  typeFileList.value = res.data
})

// 上传文件组件
const fileRef = ref()
// 选择文件组件
const sfileRef = ref()
// 上传/选择组件
const selectFile = (type: string) => {
  if (!checkCertificateList()) { return }
  setAllRowReadable()
  if (type === 'add') {
    fileRef.value.initDialog()
  }
  else {
    sfileRef.value.initDialog()
  }
}
// 确认添加文件
const addFile = (data: any) => {
  console.log(data, '添加的文件')
  if (list.value.filter((item: any) => item.id === data.id).length && data.id) {
    return
  }
  list.value.push({ ...data, externalFileType: typeList.value.filter(item => item.name === $props.type)[0].value, fileName: data.fileName ? data.fileName : data.certificateName, fileCode: data.fileCode ? data.fileCode : data.certificateNo })
}
// 预览文件
const preview = (row: any) => {
  console.log(row)
  switch (String(row.fileType)) {
    // 不符合要求情况分析表
    case '1':
      getQualityNoReportFile({
        id: row.id,
        pdf: true,
      }).then((res) => {
        if (res.data.type.includes('json')) {
          ElMessage.error('文件获取失败')
          return
        }
        exportFile(res.data, `${row.fileName}-${row.fileCode}.pdf`)
      }).catch(() => {
        ElMessage.error('文件获取失败')
      })
      break
    // 内部审核检查表
    case '2':
      getReviewFormFile({
        id: row.id,
        pdf: true,
      }).then((res) => {
        if (res.data.type.includes('json')) {
          ElMessage.error('文件获取失败')
          return
        }
        exportFile(res.data, `${row.fileName}-${row.fileCode}.pdf`)
      }).catch(() => {
        ElMessage.error('文件获取失败')
      })
      break
    // 内部审核不符合顶报告
    case '3':
      getNonReviewFormFile({
        id: row.id,
        pdf: true,
      }).then((res) => {
        if (res.data.type.includes('json')) {
          ElMessage.error('文件获取失败')
          return
        }
        exportFile(res.data, `${row.fileName}-${row.fileCode}.pdf`)
      }).catch(() => {
        ElMessage.error('文件获取失败')
      })
      break
    // 管理评审报告
    case '5':
      getReviewRepFile({
        id: row.id,
        pdf: true,
      }).then((res) => {
        if (res.data.type.includes('json')) {
          ElMessage.error('文件获取失败')
          return
        }
        exportFile(res.data, `${row.fileName}-${row.fileCode}.pdf`)
      }).catch(() => {
        ElMessage.error('文件获取失败')
      })
      break
    // 证书
    case '7':
      // getReviewRepFile({
      //   id: row.id,
      //   pdf: true,
      // }).then((res) => {
      //   exportFile(res.data, `${row.fileName}-${row.fileCode}.pdf`)
      // }).catch(() => {
      //   ElMessage.error('文件获取失败')
      // })
      break
    case '6':
      window.open(row.filePath, '_target')
      // console.log(row.filePath)
      // getReviewRepFile({
      //   id: row.id,
      //   pdf: true,
      // }).then((res) => {
      //   exportFile(res.data, `${row.fileName}-${row.fileCode}.pdf`)
      // }).catch(() => {
      //   ElMessage.error('文件获取失败')
      // })
      break
  }
  // window.open(row.filePath, '_blank')
  // console.log(row, '111111111111111')
  // 1.不符合要求情况分析表
  // 2.内部审核检查表
  // 3.内部审核不符合顶报告
  // 5.理评审报告
  // 7.证书
  // 6.其他
}
</script>

<template>
  <detail-block title="文件列表">
    <!-- 添加文件 -->
    <add-file-dialog ref="fileRef" @confirm="addFile" />
    <select-file-dialog ref="sfileRef" @add="addFile" />
    <template v-if="!$route.path.includes('detail')" #btns>
      <el-button type="primary" @click="selectFile('select')">
        选择文件
      </el-button>
      <el-button type="primary" @click="selectFile('add')">
        添加文件
      </el-button>
    </template>
    <el-table ref="multipleTableRef" :data="list" style="width: 100%;" border>
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" align="center">
        <template #header>
          <span v-show="item.required && !$route.path.includes('detail')" style="color: red;">*</span><span>{{ item.text
          }}</span>
        </template>
        <template #default="scope">
          <span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
          <el-input
            v-if="scope.row.editable && !item.isSelect && !item.isDate" v-model="scope.row[item.value]"
            :autofocus="true" :placeholder="`${item.text}`" class="input"
          />
          <el-select
            v-if="scope.row.editable && item.isSelect && !item.isDate" v-model="scope.row[item.value]"
            placeholder="必选"
          >
            <el-option v-for="item in typeFileList" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>

          <el-date-picker
            v-if="scope.row.editable && !item.isSelect && item.isDate" v-model="scope.row[item.value]"
            type="datetime" placeholder="必选" value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
            style="width: 100%;"
          />
        </template>
      </el-table-column>

      <el-table-column v-if="!$route.path.includes('detail')" align="center" label="操作" width="180">
        <template #default="scope">
          <el-button
            v-if="!scope.row.editable" size="small" type="primary" link
            @click="handler('update', scope.$index)"
          >
            编辑
          </el-button>
          <el-button size="small" type="danger" link @click="handler('delete', scope.$index)">
            删除
          </el-button>
          <el-button size="small" type="primary" link @click="handler('down', scope.$index)">
            下移
          </el-button>
          <el-button size="small" type="primary" link @click="handler('up', scope.$index)">
            上移
          </el-button>
        </template>
      </el-table-column>
      <el-table-column v-else align="center" label="操作" width="100">
        <template #default="scope">
          <el-button size="small" type="primary" link @click="preview(scope.row)">
            预览
          </el-button>
          <!-- <a ref="previerRef" style="display: none;" :href="filePath" target="_blank" /> -->
        </template>
      </el-table-column>
    </el-table>
  </detail-block>
</template>