<template>
  <div class="from-table font-line-space">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
    <a-row type="flex">
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>项目编号</div>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="special-middle">
          <div>{{projectInfo.projNo}}</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>项目名称</div>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="special-middle">
          <div>{{projectInfo.projName}}</div>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex">
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>申报人</div>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="special-middle">
          <div>{{projectInfo.personName}}</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>申报单位</div>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="special-middle">
          <div>{{projectInfo.appUnitName}}</div>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex">
        <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>申报年度</div>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="special-middle">
          <div>{{projectInfo.reportYear}}</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>项目开始结束时间</div>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="special-middle">
          <div>{{moment(projectInfo.startDate).format('YYYY-MM-DD')}} 至 {{moment(projectInfo.endDate).format('YYYY-MM-DD')}}</div>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <div class="tb-title">
          附件上传
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="8" class="bg-gray">
        <div class="special-middle">
          <div>附件名称</div>
        </div>
      </a-col>
      <a-col :span="10" class="bg-gray">
        <div class="special-middle">
          <div>附件上传</div>
        </div>
      </a-col>
      <a-col :span="6" class="bg-gray">
        <div class="special-middle">
          <div>说明</div>
        </div>
      </a-col>
    </a-row>
    <a-row v-for="(item, index) in projectInfo.fileList" :key="'fileList' + index" type="flex">
      <a-col :span="8" style="text-align: center; margin-top: 10px;">
        <span class="required"></span>{{ item.fileExplain }}
        <!-- <a-form-model-item :prop="'fileList.' + index + '.fileExplain'" :rules="{required: true, message: '*',trigger: 'blur',}">
          <a-input v-model="item.fileExplain" :maxLength="100" style="width: 80%" :disabled="item.required" />
        </a-form-model-item> -->
      </a-col>
      <a-col :span="10">
        <div class="special-middle">
          <div v-if="item.downloadUrl" class="file-box">
            <div>
              <!-- <a-icon type="file" style="margin-right: 8px" />
              <span class="hover-pointer" @click="downloadfile(item)">{{item.fileName}}</span> -->
              <document-view :fileUrl="item.downloadUrl" :fileName="item.fileName" :imageArray="[item.downloadUrl]"></document-view>
            </div>
            <a-icon type="delete" class="hover-pointer d-icon" @click="deleteTaskFile(item, index)" />
          </div>
          <div v-else>
            <a-form-model-item :prop="'fileList.' + index + '.downloadUrl'" :rules="{required: true, message: '请上传附件',trigger: 'blur',}">
              <input type="file" :ref="'fileElem' + index" class="visually-hidden" @change="handleFiles(item, index)" />
              <a-button @click="fileSelect(item, index)"><a-icon type="upload" />选择文件</a-button>
            </a-form-model-item>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="special-middle">
            <span style="margin-left: 10px; font-size: 10pt; color:red; font-weight: bold;">请上传项目任务书附件(文件类型必须为：pdf),文件大小不能超过{{fileSize}}M！</span>
        </div>
      </a-col>
    </a-row>
  </a-spin>
  </div>
</template>

<script>
import moment from 'moment'
import documentView from '@/views/components/common/documentView'

const File = { fileName: "", downloadUrl: "", fileExplain: "项目任务书", downloadId: "" };

export default {
  name: "taskFileEdit",
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
  },
  components: { documentView },
  data() {
    return {
      projectInfo: {
        projNo: '',
        projName: '',
        startDate: '',
        endDate: '',
        appPersonName: '',
        appUnitName: '',
        mobile: '',
        address: '',
        fileList: [{ ...File }],
      },
      fileSize: 15,
    };
  },
  created () {
    this.getProjectBasicInfoById()
  },
  methods: {
    moment,
    getProjectBasicInfoById () {
      if (this.value != null) {
        this.loading = true
        this.$api.project.getProjectBasicInfoById({ id: this.value }).then(({ data = {} }) => {
          if (data) {
            this.projectInfo = data
            if (this.projectInfo.fileList == null || this.projectInfo.fileList.length <= 0)
              this.projectInfo.fileList = [{ ...File }]
            this.loading = false
          }
        }).catch(() => { this.$emit('close', 'close') })
      }
    },
    downloadfile() {
      
    },
    deleteTaskFile (item, index) {
      this.$api.taskReport.deleteTaskFile({ id: item.downloadId }).then(({ data = {} }) => {
        if (data) {
          item.fileName = ''
          item.downloadUrl = ''
          item.downloadId = ''
        }
      }).catch(() => {
        this.$message.error('删除失败')
      })
    },
    uploadHandle (file, fileName, projId) {
      let formData = new FormData()
      formData.append('file', file)
      formData.append('fileName', fileName)
      formData.append('projId', projId)
      return formData
    },
    handleFiles(item, index) {
        let fileElem = this.$refs['fileElem' + index][0]
      let files = fileElem.files
      if (files.length <= 0) {
        this.$message.error('未选中文件，请尝试重新选择')
        return
      }
      if (!this.fileCheck(files[0]))
        return

      this.$api.taskReport.asyncUploadTaskFile(this.uploadHandle(files[0], files[0].name, this.value)).then(({ data = {} }) => {
        if (data) {
          item.fileName = data.fileName
          item.downloadUrl = data.downloadUrl
          item.downloadId = data.id
          item.fileExplain = data.fileExplain
        } else
          this.$message.error('上传失败')
      }).catch(() => {
        this.$message.error('上传失败')
      })
    },
    fileSelect (item, index) {
      let fileElem = this.$refs['fileElem' + index][0]
      if (fileElem) {
        fileElem.click()
      }
    },
    fileCheck (file) {
      //判断是否小于1M
      let isLtSize = file.size < 1024 * 1024 * this.fileSize;
      if (!isLtSize) {
        this.$message.error('文件大小不能超过' + this.fileSize + 'M！');
        return false
      }
      if (file.type !== "application/pdf") {
        this.$message.error('项目任务书附件必须为pdf文件类型！');
        return false
      }
      return true
    },
  }
};
</script>