<!-- 特种设备证书列表 -->
<script lang="ts" setup name="DeviceCertificateTable">
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import showPhoto from './showPhotoSinge.vue'
import { uploadApi } from '@/api/system/notice'
import { useCheckList } from '@/utils/useCheckList'
const $props = defineProps({
  data: {
    type: Array,
    default: () => ([]),
  },
})
const $route = useRoute()
// 表头显示标题
const columns = ref([
  {
    text: '证书编号',
    value: 'certificateNo',
    required: true,
    isDate: false, // 是否下拉框
    isUpload: false,
  },
  {
    text: '证书名称',
    value: 'certificateName',
    required: true,
    isDate: false, // 是否下拉框
    isUpload: false,
  },
  {
    text: '校准(检定)单位',
    value: 'checkOrganization',
    required: true,
    isDate: false, // 是否下拉框
    isUpload: false,
  },
  {
    text: '证书日期',
    value: 'checkDate',
    required: true,
    isDate: true, // 是否下拉框
    isUpload: false,
  },
  {
    text: '证书有效期',
    value: 'certificateValid',
    required: true,
    isDate: true, // 是否下拉框
    isUpload: false,
  },
  {
    text: '证书附件',
    value: 'minioFileName',
    required: true,
    isUpload: true, // 是否下拉框
    isDate: false,
  },
])
const list = ref<any[]>([])
// 检查数据列表
function checkCertificateList() {
  return useCheckList(list.value, columns.value as any, '证书列表')
}
// 将列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of list.value) {
    item.editable = false
  }
}
// 双击行显示输入框
const dblclickRow = (row: any) => {
  if ($route.path.includes('detail')) {
    return
  }
  if (row.certificateType !== '3') {
    ElMessage.warning('此数据不可编辑')
    return
  }
  setAllRowReadable()
  row.editable = true
}
const SelectionList = ref()
// 表格选中
const handleSelectionChange = (e: any[]) => {
  SelectionList.value = e
}
// 添加行
const addRow = () => {
  // certificateRef.value.initDialog({ title: '添加' })
  if (checkCertificateList()) {
    setAllRowReadable()
    list.value.push({
      certificateNo: '',
      certificateName: '',
      checkOrganization: '',
      checkDate: '',
      certificateValid: '',
      minioFileName: '',
      certificateType: '3',
      editable: true,
    })
  }
}
// 删除行
const removeRow = () => {
  list.value = list.value.filter((item) => {
    return !SelectionList.value.includes(item)
  })
}
watch(() => $props.data, (newVal) => {
  if (newVal) {
    list.value = newVal
  }
})
const initDialog = () => {
  list.value = $props.data
}
initDialog()
defineExpose({
  list,
})
const fileRef = ref() // 文件上传input
const currentIndex = ref()
const onFileChange = (event: any) => {
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    fd.append('multipartFile', event.target.files[0])
    uploadApi(fd).then((res) => {
      if (res.code === 200) {
        console.log(list.value[currentIndex.value], 'list.value[currentIndex.value]')
        list.value[currentIndex.value].minioFileName = res.data[0]
        //  res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
        fileRef.value.value = ''
        loading.close()
      }
      else {
        fileRef.value.value = ''
        ElMessage.error(res.message)
        loading.close()
      }
    }).catch(() => {
      fileRef.value.value = ''
      loading.close()
    })
  }
}
const upload = (index: number) => {
  currentIndex.value = index
  fileRef.value.click()
}
</script>

<template>
  <detail-block-switch title="">
    <template v-if="!$route.path.includes('detail')" #btns>
      <!-- <el-button type="primary">
        扫描增加
      </el-button> -->
      <el-button type="primary" @click="addRow">
        增加行
      </el-button>
      <el-button type="info" @click="removeRow">
        删除行
      </el-button>
    </template>
    <el-table
      ref="multipleTableRef" :data="list" style="width: 100%;" border @selection-change="handleSelectionChange"
      @row-dblclick="dblclickRow"
    >
      <el-table-column v-if="!$route.path.includes('detail')" type="selection" width="38" />
      <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 && !item.isUpload">{{ scope.row[item.value] }}</span>
          <el-input
            v-if="scope.row.editable && !item.isDate && !item.isUpload" v-model="scope.row[item.value]" :autofocus="true"
            :placeholder="`${item.text}`" class="input"
          />
          <el-date-picker
            v-if="scope.row.editable && item.isDate && !item.isUpload" v-model="scope.row[item.value]" type="date"
            format="YYYY-MM-DD" value-format="YYYY-MM-DD" :placeholder="`${item.text}`"
          />
          <span v-if="item.isUpload && !item.isDate" style="display: flex;">
            <show-photo :minio-file-name="scope.row[item.value]" />
            <el-button v-if="!$route.path.includes('detail')" type="primary" @click="upload(scope.$index)">
              {{ scope.row[item.value] ? '更换' : '上传' }}
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <input ref="fileRef" style="display: none;" type="file" accept="pdf/*" @change="onFileChange">
  </detail-block-switch>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>