<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="16" 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>{{ item.fileExplain }}</span>
        </a-col>
        <a-col :span="16">
          <div class="special-middle">
            <div v-if="item.downloadUrl" class="file-box">
              <div>
                <document-view :fileUrl="item.downloadUrl" :fileName="item.fileName" :imageArray="[item.downloadUrl]"></document-view>
              </div>
            </div>
            <div v-else style="text-align: center;">无</div>
          </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.loading = false})//() => { this.$emit('close', 'close') }
        }
      },
    }
  };
  </script>