<template>
  <el-form :model="formData" ref="applyForm" :rules="rules" :label-position="labelPosition"  :style="{marginLeft: label==='项目验收附件'?'25px': label==='项目立项附件'?'25px':'5px'}">
    <el-row>
      <!--      <el-col :span="24">-->
      <!--        <el-form-item :label="label" prop="attachment" >-->
      <!--          <template v-if="preview">-->
      <!--            <file-upload @getFile="getAttachment" :multiple="false"-->
      <!--                         :disabled="singleFileArray?.length>0?true:false" title="如需修改需求申请书附件，请先删除文件再上传！"/>-->
      <!--            <fvTable style="width: 100%;max-height: 80px;" height="80" v-if="singleFileArray?.length>0"-->
      <!--                     :tableConfig="editSingleTableConfig"-->
      <!--                     :data="singleFileArray" :isSettingCol="false" :pagination="false">-->
      <!--            </fvTable>-->
      <!--          </template>-->
      <!--          <template v-else-if="!preview">-->
      <!--            <file-upload @getFile="getAttachment" :multiple="false"-->
      <!--                         :disabled="isSingleFile"/>-->
      <!--            <fvTable style="width: 100%;max-height: 80px;" v-if="showSingleTable" height="80"-->
      <!--                     :tableConfig="singleTableConfig"-->
      <!--                     :data="_singleFileValue" :isSettingCol="false" :pagination="false">-->
      <!--            </fvTable>-->
      <!--          </template>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <el-col :span="24">
        <el-form-item :label="label" prop="" :required="label!='项目归档附件'">
          <file-upload @getFile="getOtherFile"/>
          <el-button color="#DED0B2" v-if="templateDownloadBtnShow" @click="handleImportTemplateDownload"
                     style="margin-left: 10px">模板下载
          </el-button>
          <fvTable style="width: 100%;"  :height="label=='项目立项附件'?'160':'160'" :scrollbar-always-on="true" :style="{maxHeight:label=='项目立项附件'?'160px':'160px',height:label=='项目立项附件'?'160px':'160px'}" v-if="showTable" :tableConfig="tableConfig"
                   :data="allFileList" :isSettingCol="false" :pagination="false">
            <template #empty>
              <el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
            </template>
          </fvTable>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName"
                :fileUrl="filePreviewParam.fileUrl"
                :fileType="filePreviewParam.fileType"/>
</template>

<script setup lang="jsx">
import FileUpload from '@/components/FileUpload.vue'
import {deleteFile, downloadFile, downloadTemplate, downloadTemplateZip} from "@/api/project-demand";
import {ElMessageBox, ElNotification} from "element-plus";


const props = defineProps({
  showFileList: {
    type: Boolean,
    default: false
  },
  label: {
    type: String,
    default: '项目附件'
  },
  showTable: {
    type: Boolean,
    default: false
  },
  showSingleTable: {
    type: Boolean,
    default: false
  },
  preview: {
    type: Boolean,
    default: false
  },
  //是否显示模板下载按钮
  templateDownloadBtnShow: {
    type: Boolean,
    default: false
  },
  //模板下载时的文件名
  templateName: {
    type: String,
    default: ''
  },
  singleList: {
    type: Array,
    default: []
  },
  otherFileList: {
    type: Array,
    default: []
  },
  formData: {
    type: Object,
    default: {}
  },
  labelPosition: {
    type: String,
    default: ''
  },
  tag: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(["getAttachment", "getOtherFile", "update:singleList"])

const baseTableConf = reactive(
    [
      {
        prop: 'index',
        type: 'index',
        label: '序号',
        align: 'center',
        width: '80',
      },
      {
        prop: 'originalFileName',
        label: '文件名',
        align: 'center',
        width: 400,
        currentRender: ({row, index}) => (
            <div style="color: #2a99ff;cursor: pointer;"
                 onClick={() => clickToPreview(row)}>{row.originalFileName}</div>)
      },
      {
        prop: 'tag',
        label: '标签',
        align: 'center',
      //   currentRender: ({row, index}) => (
      //       <el-input placeholder={row.tag} onClick={() => {}}></el-input>)
      },
      {
        prop: 'size',
        label: '文件大小',
        align: 'center',
        currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
      },
    ]
)
const tableConfig = reactive({
  columns: [
    ...baseTableConf,
    {
      prop: 'oper',
      label: '操作',
      align: 'center',
      showOverflowTooltip: false,
      currentRender: ({row, index}) => {
        let btn = []
        btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
        // if (row.newFile) {
        //   btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
        // }
        return (
            <div style={{width: '100%'}}>
              {
                btn.map(item => (
                    <el-button
                        type={item.type}
                        onClick={() => item.func()}
                        link
                    >
                      {item.label}
                    </el-button>
                ))
              }
              {
                row.newFile || props.preview || !props.preview ?
                    <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
                        // perm={['']}
                                    onDelete={() => handleDelete(row)}/>
                    : ''
              }
            </div>
        )
      }
    }
  ]
})
const singleTableConfig = reactive({
  columns: [
    ...baseTableConf,
    {
      prop: 'oper',
      label: '操作',
      align: 'center',
      showOverflowTooltip: false,
      currentRender: ({row, index}) => {
        let btn = []
        btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
        // if (row.newFile) {
        //   btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
        // }
        return (
            <div style={{width: '100%'}}>
              {
                btn.map(item => (
                    <el-button
                        type={item.type}
                        onClick={() => item.func()}
                        link
                    >
                      {item.label}
                    </el-button>
                ))
              }
              {
                row.newFile || props.preview || !props.preview ?
                    <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
                        // perm={['']}
                                    onDelete={() => handleSingleDelete(row)}/>
                    : ''
              }
            </div>
        )
      }
    }
  ]
})
const editSingleTableConfig = reactive({
  columns: [
    ...baseTableConf,
    {
      prop: 'oper',
      label: '操作',
      align: 'center',
      showOverflowTooltip: false,
      currentRender: ({row, index}) => {
        let btn = []
        btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
        // if (row.newFile) {
        //   btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
        // }
        return (
            <div style={{width: '100%'}}>
              {
                btn.map(item => (
                    <el-button
                        type={item.type}
                        onClick={() => item.func()}
                        link
                    >
                      {item.label}
                    </el-button>
                ))
              }
              {
                row.newFile || props.preview || !props.preview ?
                    <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
                        // perm={['']}
                                    onDelete={() => deleteSingleFile(row, 1)}/>
                    : ''
              }
            </div>
        )
      }
    }
  ]
})
const singleFileArray = ref([])
const rules = reactive({
  // attachment: [{required: true, message: '请上传附件', trigger: ['blur', 'change']}],
})
const applyForm = ref()
const singleFile = ref({})
const isSingleFile = ref(false)
const isHaveOneFile = ref(false)
const allFileList = ref([])
if (localStorage.getItem('singleFile')) {
  singleFileArray.value.push(JSON.parse(localStorage.getItem('singleFile')))
  singleFile.value = JSON.parse(localStorage.getItem('singleFile'))
}

const filePreviewParam = ref({
  fileUrl: '',
  fileName: '',
  fileType: 'pdf'
})
const filePreviewRef = ref()
const filePreviewShow = ref(false)

const _singleFileValue = computed({
  get() {
    return props.singleList;
  },
  set(value) {
    emit('update:singleList', value)
  }
})
const _otherFileListValue = computed({
  get() {
    return props.otherFileList;
  },
  set(value) {
    emit('update:otherFileList', value)
  }
})
if (_otherFileListValue.value && _otherFileListValue.value.length > 0) {
  isHaveOneFile.value = true
  _otherFileListValue.value.forEach(item => {
    allFileList.value.push(item)
  })
}
// watch(() => props.showSingleTable, (newVal) => {
//   props.showSingleTable = newVal
// }, {deep: true})
watch(() => props.formData.fileList, (newVal) => {
  if (props.preview) {
    newVal?.forEach(item => {
      isHaveOneFile.value = true
      allFileList.value.push(item)
    })
  }
}, {immediate: true})

watch(() => props.formData.singleFile, (newVal) => {
  props.formData.singleFile = newVal
  if (newVal != null) {
    singleFileArray.value.push(newVal)
  } else {
    singleFileArray.value = []
  }
  singleFile.value = newVal
}, {immediate: true})


// watch(() => props.otherFileList, (newVal) => {
//   props.otherFileList=newVal
// if (props.preview) {
//   console.log('newotherFileList', newVal,props.preview,props.formData.fileList)
//   if (props.formData.fileList === null || props.formData.fileList?.length === 0) {
//     allFileList.value = newVal
//   } else {
//     console.log('props.otherFileList',props.otherFileList)
//     // props.otherFileList?.forEach(item => {
//     //   allFileList.value.push(item)
//     // })
//   }
// } else {
//   allFileList.value = newVal
// }
// }, {deep: true})
watch(() => props.showTable, (newVal) => {
  props.showTable = newVal
}, {deep: true})
// watch(() => props.singleList, (newVal) => {
//   console.log('singleFile', newVal)
//   singleFileList.value = newVal
// }, {deep: true})

watch(() => isSingleFile.value, (newVal) => {
  isSingleFile.value = newVal
}, {deep: true})
watch(() => isHaveOneFile.value, (newVal) => {
  isHaveOneFile.value = newVal
}, {deep: true})
// watch(() => singleFile.value, (newVal) => {
//   singleFile.value = newVal
// }, {deep: true})


const handleImportTemplateDownload = async () => {
  console.info("🚀 ~method:handleImportTemplateDownload -----", props.tag)
  let templateType = ''
  let templateTypeList = ''
  let isZip = false
  if (props.tag === '需求上报') {
    templateType = '2'
    isZip = false
  } else if (props.tag === '项目立项') {
    templateTypeList = '5,6'
    isZip = true
  } else if (props.tag === '项目验收') {
    templateType = '7'
    isZip = false
  } else if (props.tag === '阶段变更') {
    templateTypeList = '8,9'
    isZip = true
  }
  let res = ''
  if (isZip) {
    res = await downloadTemplateZip(templateTypeList)
    let fileName = props.templateName +'.zip'
    const blob = new Blob([res.data])
    let a = document.createElement('a')
    a.href = URL.createObjectURL(blob)
    a.download = fileName
    a.click()
  } else {
    res = await downloadTemplate(templateType)
    const blob = new Blob([res])
    let a = document.createElement('a')
    a.href = URL.createObjectURL(blob)
    a.download = props.templateName + ".docx"
    a.click()
  }

}


const clickToPreview = (row) => {
  filePreviewShow.value = false
  console.log('clickToPreview', row, row.fileType)
  filePreviewParam.value = {
    fileUrl: row.url,
    fileName: row.originalFileName,
    fileType: row.fileType
  }
  nextTick(() => {
    filePreviewShow.value = true
  })
  // filePreviewRef.value.show()
}


const handleDelete = (row, type) => {
  // deleteFile(row.fileId).then(res => {
  //   ElNotification({
  //     title: '提示',
  //     message: res.msg,
  //     type: res.code === 1000 ? 'success' : 'error'
  //   })
  //   if (res.code === 1000) {
      if (type === 'single') {
        _singleFileValue.value.splice(_singleFileValue.value.findIndex((item) => item.fileId === row.fileId), 1);
        isSingleFile.value = false
      } else {
        allFileList.value.splice(allFileList.value.findIndex((item) => item.fileId === row.fileId), 1);
        isHaveOneFile.value = !(allFileList.value && allFileList.value?.length == 0);
        console.log('allFileList.value',allFileList.value)
        if (localStorage.getItem('collectData')) {
          let collectData = JSON.parse(localStorage.getItem('collectData'))
          collectData.fileList = allFileList.value
          localStorage.setItem('collectData', JSON.stringify(collectData))
        }
        if (localStorage.getItem('otherFileList')) {
          localStorage.setItem('otherFileList', JSON.stringify(allFileList.value))
        }
      }
    // }
  // });
}
const handleSingleDelete = (row) => {
  handleDelete(row, 'single')
}
const getAttachment = (val) => {
  isSingleFile.value = true
  emit('getAttachment', val)
}
const compositeParam = (item) => {
  return {
    fileId: item.id,
    size: item.size,
    originalFileName: item.originalFilename,
    fileType: item.fileType,
    url: item.url,
    newFile: true,
    tag: props.tag
  }
}
const getOtherFile = (val) => {
  if (props.preview) {
    allFileList.value.push(compositeParam(val))
  } else {
    allFileList.value = _otherFileListValue.value
  }
  isHaveOneFile.value = true
  emit('getOtherFile', val)
}
const deleteAttachment = (val) => {
  deleteFile(val).then(res => {
    if (res.code === 1000) {
      ElNotification({
        title: '提示',
        message: "删除成功",
        type: 'success'
      })
      isSingleFile.value = false
      singleFile.value = null
      singleFileArray.value = []
    }
  });
}
const deleteSingleFile = (row, type) => {
  ElMessageBox.confirm(`确认删除名称为${row.originalFileName}的文件吗?`, '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteFile(row.fileId).then(res => {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: res.code === 1000 ? 'success' : 'error'
      })
      if (res.code === 1000) {
        isSingleFile.value = false
        if (type === 1) {
          singleFile.value = null
          singleFileArray.value = []
        } else {
          props.otherFileList.splice(props.otherFileList.findIndex((item) => item.fileId === row.fileId), 1);
        }
      }
    });
  }).catch(() => {
    ElNotification({
      title: '提示',
      message: "用户取消删除! ",
      type: 'warning'
    })
  })
}
const handleDownload = (row) => {
  downloadFile(row.fileId).then(res => {
    const blob = new Blob([res])
    let a = document.createElement('a')
    a.href = URL.createObjectURL(blob)
    a.download = row.originalFileName
    a.click()
  })
}
defineExpose({
  validate() {
    return applyForm.value.validate()
  },
  clearValidate() {
    return applyForm.value.clearValidate()
  },
  allFileList,
  singleFile,
  isSingleFile,
  isHaveOneFile,
})
</script>

<style lang="scss" scoped>
:deep(.el-table--fit ) {
  height: 160px !important;
}
:deep(.el-table__header) {
  .is-leaf:first-child {
    .cell {
      margin-left: -22px !important;
    }
  }
}

:deep(.el-table__body) {
  .el-table__cell:first-child {
    .cell {
      margin-left: -11px !important;
    }
  }
}
</style>
