<template>
  <div>
    <a-row>
      <a-col :span="24" style="border-top: 0px;">
        <div class="tb-title">
          <span>基础信息</span>
        </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="20">
        <div class="special-middle">
          <div>{{value.projNo}}</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="20">
        <div class="special-middle">
          <div>{{value.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>{{value.appPersonName}}</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>{{value.telephone}}</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="20">
        <div class="special-middle">
          <div>{{value.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="20">
        <div class="special-middle">
          <div>{{value.planCategory}}</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="20">
        <div class="special-middle">
          <div><span v-if="value.startDate&&value.endDate">{{value.startDate +"~"+value.endDate}}</span></div>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" style="border-top: 0px;">
        <div class="tb-title">
          <span>完成或推广情况</span>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex">
      <a-col :span="5" class="bg-gray">
        <div class="special-middle">
          <div>研究或推广内容完成情况</div>
        </div>
      </a-col>
      <a-col :span="19">
        <div class="special-middle">
          <div><para-view v-model="value.promotionContent" :typeId="60" :code="'1'" /></div>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex">
      <a-col :span="5" class="bg-gray">
        <div class="special-middle">
          <div>研究或推广目标实现情况</div>
        </div>
      </a-col>
      <a-col :span="19">
        <div class="special-middle">
          <div><para-view v-model="value.promotionTarget" :typeId="60" :code="'2'" /></div>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex">
      <a-col :span="5" class="bg-gray">
        <div class="special-middle">
          <div>研究水平的自我评价</div>
        </div>
      </a-col>
      <a-col :span="19">
        <div class="special-middle">
          <div><para-view v-model="value.selfEvaluation" :typeId="60" :code="'3'" /></div>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex">
      <a-col :span="5" class="bg-gray">
        <div class="special-middle">
          <div>取得成果情况</div>
        </div>
      </a-col>
      <a-col :span="19">
        <div class="special-middle">
          <div><para-view v-model="value.achievingResults" :typeId="60" :code="'4'" /></div>
        </div>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" style="border-top: 0px;">
        <div class="tb-title">
          <span>论文发表情况（省级以上刊物）</span>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="2" 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-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div>作者姓名</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div>发表年月</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div>发表在何种刊物</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div>国内外反映应用情况</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>论文</div>
        </div>
      </a-col>
    </a-row>
    <a-row v-for="(thesis, index) in value.thesisList" :key="index" type="flex" class="row_center">
      <a-col :span="2">
        <div class="special-middle">
          <div>{{index+1}}</div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="special-middle">
          <div>{{thesis.name}}</div>
        </div>
      </a-col>
      <a-col :span="3">
        <div class="special-middle">
          <div>{{thesis.author}}</div>
        </div>
      </a-col>
      <a-col :span="3">
        <div class="special-middle">
          <div>{{thesis.publishDate}}</div>
        </div>
      </a-col>
      <a-col :span="3">
        <div class="special-middle">
          <div>{{thesis.publication}}</div>
        </div>
      </a-col>
      <a-col :span="3">
        <div class="special-middle">
          <div>{{thesis.application}}</div>
        </div>
      </a-col>
      <a-col :span="4" style="text-align: center;">
        <div class="special-middle">
          <div v-if="thesis.fileName" style="text-align: left;">
            <document-view :fileUrl="thesis.downloadUrl" :fileName="thesis.fileName" :imageArray="[thesis.downloadUrl]"></document-view>
          </div>
          <div v-else>无</div>
        </div>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" style="border-top: 0px;">
        <div class="tb-title">
          <span>主要研究人员（按贡献大小排序）</span>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="2" class="bg-gray">
        <div class="special-middle">
          <div>序号</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>姓名</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>性别</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>年龄</div>
        </div>
      </a-col>
      <a-col :span="4" 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="(researcher, index) in value.researchersList" :key="'researcher'+index+''" type="flex" class="row_center">
      <a-col :span="2">
        {{index+1}}
      </a-col>
      <a-col :span="4">
        {{researcher.name}}
      </a-col>
      <a-col :span="4">
        {{researcher.sex}}
      </a-col>
      <a-col :span="4">
        {{researcher.age}}
      </a-col>
      <a-col :span="4">
        {{researcher.technicalTitle}}
      </a-col>
      <a-col :span="6">
        {{researcher.contributions}}
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" style="border-top: 0px;">
        <div class="tb-title">
          <span>经费决算</span>
        </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="20" class="inner_from">
        <a-row type="flex" class="row_center">
          <a-col v-for="(grant, index) in value.grant" :key="'year'+index" :span="4">
            <div class="special-middle">
              <div>{{grant.year}}年</div>
            </div>
          </a-col>
          <a-col :span="4">
            <div class="special-middle">
              <div style="text-align:center">合计</div>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex" class="row_center">
          <a-col v-for="(grant, index) in value.grant" :key="'amount'+index" :span="4">
            <div class="special-middle">
              <div><span>{{grant.amount}}</span></div>
            </div>
          </a-col>
          <a-col :span="4">
            <div class="special-middle" style="text-align:center">
              {{fundsCount(value.grant)}}
            </div>
          </a-col>
        </a-row>
      </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="20" class="inner_from">
        <a-row type="flex" class="row_center">
          <a-col v-for="(finance, index) in value.finance" :key="'finance_year'+index" :span="4">
            <div class="special-middle">
              <div><span>{{finance.year}}年</span></div>
            </div>
          </a-col>
          <a-col :span="4">
            <div class="special-middle">
              <div style="text-align:center">合计</div>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex" class="row_center">
          <a-col v-for="(finance, index) in value.finance" :key="'finance_amount'+index" :span="4">
            <div class="special-middle">
              <div><span>{{finance.amount}}</span></div>
            </div>
          </a-col>
          <a-col :span="4">
            <div class="special-middle" style="text-align:center">
              {{fundsCount(value.finance)}}
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="6" class="bg-gray">
        <div class="special-middle">
          <div>主要支出项目</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>金额(万元)</div>
        </div>
      </a-col>
      <a-col :span="14" class="bg-gray">
        <div class="special-middle">
          <div>用途</div>
        </div>
      </a-col>
    </a-row>
    <a-row v-for="(spending, index) in value.spending" :key="'spending'+index" type="flex" class="row_center">
      <a-col :span="6">
        <div class="special-middle">
          <div>{{spending.name}}</div>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="special-middle">
          <div>{{spending.amount}}</div>
        </div>
      </a-col>
      <a-col :span="14">
        <div class="special-middle">
          <div>{{spending.used}}</div>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="6">
        <div class="special-middle">
          <div>合计</div>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="special-middle">
          {{fundsCount(value.spending)}}
        </div>
      </a-col>
      <a-col :span="14"></a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="6" class="bg-gray">
        <div class="special-middle">
          <div>结余</div>
        </div>
      </a-col>
      <a-col :span="4" style="border-left:0px !important;">
        <div class="special-middle">
          {{value.balance}}
        </div>
      </a-col>
      <a-col :span="14">

      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" style="border-top: 0px;">
      </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="20">
        <div class="special-middle">
          <div>{{value.researchContent}}</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="20">
        <div class="special-middle">
          <div>{{value.workPlan}}</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="20">
        <div class="special-middle">
          <div>{{value.extensionReport}}</div>
        </div>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" style="border-top: 0px;">
        <div class="tb-title">
          <span>验收材料目录</span>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="2" class="bg-gray">
        <div class="special-middle">
          <div>序号</div>
        </div>
      </a-col>
      <a-col :span="22" class="bg-gray">
        <div class="special-middle">
          <div>材料名称</div>
        </div>
      </a-col>
    </a-row>
    <a-row v-for="(catalog, index) in value.catalogList" :key="'catalogList'+index+''" type="flex" class="row_center">
      <a-col :span="2">
        <div class="special-middle">
          <div>{{index+1}}</div>
        </div>
      </a-col>
      <a-col :span="20">
        <div class="special-middle">
          <div>{{catalog.name}}</div>
        </div>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" style="border-top: 0px;">
        <div class="tb-title">
          <span>结题材料</span>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="2" 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-col :span="12" class="bg-gray">
        <div class="special-middle">
          <div>附件</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>下载</div>
        </div>
      </a-col>
    </a-row>
    <a-row v-for="(item, index) in value.fileList" :key="'fileList' + index" type="flex" class="row_center">
      <a-col :span="2">
        <div class="special-middle">
          <div>{{index+1}}</div>
        </div>
      </a-col>
      <a-col :span="6" style="text-align: center;">
        <div class="special-middle">
          <div>{{item.fileExplain}}</div>
        </div>
      </a-col>
      <a-col :span="12" style="text-align: center;">
        <div class="special-middle">
          <div v-if="item.fileName" style="text-align: left;">
            <document-view :fileUrl="item.downloadUrl" :fileName="item.fileName" :imageArray="[item.downloadUrl]"></document-view>
          </div>
          <div v-else>无</div>
        </div>
      </a-col>
      <a-col :span="4" style="text-align: center;">
        <div class="special-middle">
          <div v-if="item.downloadUrl"><a :href="item.downloadUrl" :download="item.fileName">下载</a></div>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <div class="tb-title">
          <span>审核记录</span>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <audit-list v-model="value.auditList" />
      </a-col>
    </a-row>
    <!-- <a-row>
        <a-col :span="24" style="border-top: 0px;">
          <div class="tb-title">
            <span>结题材料</span>
          </div>
        </a-col>
      </a-row> -->
    <!-- <a-row>
        <a-col :span="24">
          <div style="height:160px" class="file-layout">
            <div v-for="(item, index) in value.fileList" :key="index" class="file-box">
              <div>
                <a-icon type="paper-clip" style="margin-right: 8px" />
                <a target="_blank" rel="noopener noreferrer" :title="item.fileName" :href="item.downloadUrl">{{item.fileName}}</a>
                <span class="hover-pointer" @click="downloadfile">{{item.fileName}}</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row> -->
  </div>
</template>

<script>

import paraView from '@/views/conclusion/components/paraView'
import documentView from '@/views/components/common/documentView'
import AuditList from '@/views/audit/components/auditInfo'

export default {
  name: "conclusionView",
  components: {
    paraView, documentView,AuditList
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return null
      }
    },
  },
  data () {
    return {

    };
  },
  created () {

  },
  computed: {

  },
  methods: {
    downloadfile () {

    },
    fundsCount (list) {
      let total = 0.00
      list.forEach(e => {
        if (e.amount) {
          total = total + e.amount
        }
      })
      return total
    },
  },
};
</script>
<style scoped lang="less">
.file-layout {
  height: 100%;
  width: 100%;
  .file-box {
    line-height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 8px;

    > div:nth-child(1) {
      max-width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .visually-hidden {
    display: none !important;
  }
}
.inner_from {
  .ant-row-flex:last-child .ant-col {
    border-bottom: 0;
  }
  .ant-row-flex .ant-col:first-child {
    border-left: 0;
  }
  .ant-row-flex {
    border-right: 0;
  }
}
.special-middle {
  .font_s {
    margin: 0 6px;
  }
}
</style>
