<template>
  <div class="app-container">
    <div>
      <b style="color: red;font-size: 15px;">根据您填报的项目信息，系统自动将需要上传的文件列出，每种类型文件只能上传单个文件（大小限制4M），如有多个请打包上传！</b><br><b style="color: red;font-size: 15px;">技术人员上传1-7项相关文件，财务人员上传8-10项相关文件。当技术、财务资料达到 100%时，可提交项目申报。</b>
    </div>
    <h3 class="toolbar">
      <!-- <span class="title">加计扣除备查资料清单</span> -->
      <div class="tool">
        <el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleDownloadBatch">批量下载</el-button>
      </div>
    </h3>
    <div class="table-con">
      <table class="table_register mt20 tablebar" style="width: 100%;">
            <tr>
              <th colspan="4" class="th_title">1、项目计划书
              </th>
            </tr>
            <tr>
              <th>项目计划书导入</th>
              <td colspan="3">
                <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleUpload('9')" v-if="techFlag && list9.length<=0">上传</el-button>
              </td>
            </tr>
            <tr>
              <th>下载</th>
              <td colspan="3">
                <ul>
                  <li v-for="(item, index) in list9" :key="index" style="margin: 2px;">
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <a :href="item.url">{{item.fileName}}</a>
                      </el-col>
                      <el-col :span="12">
                        <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDownload(item.id)">下载</el-button>
                        <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDelete(item.id)" v-if="techFlag">删除</el-button>
                      </el-col>
                    </el-row>
                  </li>
                </ul>

              </td>
            </tr>
          </table>

      <table class="table_register mt20 tablebar" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">2、研究成果报告
          </th>
        </tr>
        <tr>
          <th>研究成果导入</th>
          <td colspan="3">
            <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleUpload('10')" v-if="techFlag && list10.length <= 0">上传</el-button>
            <el-button type="primary" size="mini">
              <a href="/temp/研究成果报告模板.xls">模板下载</a>
            </el-button>
          </td>
        </tr>
        <tr>
          <th>下载</th>
          <td colspan="3">
            <ul>
              <li v-for="(item, index) in list10" :key="index" style="margin: 2px;">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <a :href="item.url">{{item.fileName}}</a>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDownload(item.id)">下载</el-button>
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDelete(item.id)" v-if="techFlag">删除</el-button>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </td>
        </tr>
      </table>
      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">3、自主、委托、合作研究开发项目计划书和企业有权部门关于自主、委托、合作研究开发项目立项的决议文件
          </th>
        </tr>
        <tr>
          <th>决议文件导入</th>
          <td colspan="3">
            <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleUpload('1')" v-if="techFlag && list1.length <= 0">上传</el-button>
            <el-button type="primary" size="mini">
              <a href="/temp/项目立项书模板.doc">模板下载</a>
            </el-button>
          </td>
        </tr>
        <tr>
          <th>下载</th>
          <td colspan="3">
            <ul>
              <li v-for="(item, index) in list1" :key="index" style="margin: 2px;">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <a :href="item.url">{{item.fileName}}</a>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDownload(item.id)">下载</el-button>
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDelete(item.id)" v-if="techFlag">删除</el-button>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </td>
        </tr>
      </table>
      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">4、自主、委托、合作研究开发专门机构或项目组的编制情况和研发人员名单
          </th>
        </tr>
        <tr>
          <th>研发人员名单导入</th>
          <td colspan="3">
            <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleUpload('2')" v-if="techFlag && list2.length <= 0">上传</el-button>
            <el-button type="primary" size="mini">
              <a href="/temp/项目负责人及研发人员模板.xls">模板下载</a>
            </el-button>

          </td>
        </tr>
        <tr>
          <th>下载</th>
          <td colspan="3">
            <ul>
              <li v-for="(item, index) in list2" :key="index" style="margin: 2px;">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <a :href="item.url">{{item.fileName}}</a>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDownload(item.id)">下载</el-button>
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDelete(item.id)" v-if="techFlag">删除</el-button>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </td>
        </tr>
      </table>
      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">5、经科技行政主管部门登记的委托、合作研究开发项目的合同
          </th>
        </tr>
        <tr>
          <th>研究开发合同导入</th>
          <td colspan="3">
            <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleUpload('3')" v-if="techFlag && list3.length <= 0">上传</el-button>
          </td>
        </tr>
        <tr>
          <th>下载</th>
          <td colspan="3">
            <ul>
              <li v-for="(item, index) in list3" :key="index" style="margin: 2px;">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <a :href="item.url">{{item.fileName}}</a>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDownload(item.id)">下载</el-button>
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDelete(item.id)" v-if="techFlag">删除</el-button>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </td>
        </tr>
      </table>


      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">6、“研发支出”辅助账及汇总表
          </th>
        </tr>
        <tr>
          <th>“研发支出”辅助账及汇总表导入</th>
          <td colspan="3">
            <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleUpload('6')" v-if="techFlag && list6.length <= 0">上传</el-button>
          </td>
        </tr>
        <tr>
          <th>下载</th>
          <td colspan="3">
            <ul>
              <li v-for="(item, index) in list6" :key="index" style="margin: 2px;">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <a :href="item.url">{{item.fileName}}</a>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDownload(item.id)">下载</el-button>
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDelete(item.id)" v-if="techFlag">删除</el-button>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </td>
        </tr>
      </table>
      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">7、企业如果已取得地市级（含）以上科技行政主管部门出具的鉴定意见，应作为资料留存备查
          </th>
        </tr>
        <tr>
          <th>科技主管部门鉴定意见导入</th>
          <td colspan="3">
            <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleUpload('7')" v-if="techFlag && list7.length <= 0">上传</el-button>
          </td>
        </tr>
        <tr>
          <th>下载</th>
          <td colspan="3">
            <ul>
              <li v-for="(item, index) in list7" :key="index" style="margin: 2px;">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <a :href="item.url">{{item.fileName}}</a>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDownload(item.id)">下载</el-button>
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDelete(item.id)" v-if="techFlag">删除</el-button>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </td>
        </tr>
      </table>

      <!-- 财务 -->
      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">8、从事研发活动的人员（包括外聘人员）和用于研发活动的仪器、设备、无形资产的费用分配说明（包括工作使用情况记录及费用分配计算证据材料）
          </th>
        </tr>
        <tr>
          <th>费用分配说明导入</th>
          <td colspan="3">
            <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleUpload('4')" v-if="finFlag && list4.length <= 0">上传</el-button>
          </td>
        </tr>
        <tr>
          <th>下载</th>
          <td colspan="3">
            <ul>
              <li v-for="(item, index) in list4" :key="index" style="margin: 2px;">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <a :href="item.url">{{item.fileName}}</a>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDownload(item.id)">下载</el-button>
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDelete(item.id)" v-if="finFlag">删除</el-button>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </td>
        </tr>
      </table>
      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">9、集中研发项目研发费决算表、集中研发项目费用分摊明细情况表和实际分享收益比例等资料
          </th>
        </tr>
        <tr>
          <th>资料导入</th>
          <td colspan="3">
            <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleUpload('5')"v-if="finFlag && list5.length <= 0">上传</el-button>
          </td>
        </tr>
        <tr>
          <th>下载</th>
          <td colspan="3">
            <ul>
              <li v-for="(item, index) in list5" :key="index" style="margin: 2px;">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <a :href="item.url">{{item.fileName}}</a>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDownload(item.id)">下载</el-button>
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDelete(item.id)" v-if="finFlag">删除</el-button>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </td>
        </tr>
      </table>
      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">10、《研发费用加计扣除优惠明细表》（a107012，选择预缴享受的企业留存备查）
          </th>
        </tr>
        <tr>
          <th>优惠明细表导入</th>
          <td colspan="3">
            <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleUpload('8')" v-if="finFlag && list8.length <= 0">上传</el-button>
          </td>
        </tr>
        <tr>
          <th>下载</th>
          <td colspan="3">
            <ul>
              <li v-for="(item, index) in list8" :key="index" style="margin: 2px;">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <a :href="item.url">{{item.fileName}}</a>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDownload(item.id)">下载</el-button>
                    <el-button type="primary"  icon="el-icon-upload2" size="mini" @click="handleDelete(item.id)" v-if="finFlag">删除</el-button>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </td>
        </tr>
      </table>
    </div>
    <!-- 技术 -->

    <upload-enclosure ref="uploadEnclosure" v-if="enclosureVisible" @refreshData="getList()" :dataId="dataId" :attachType="'PROJECT'"></upload-enclosure>
  </div>
</template>

<script>
  import {getEnclosureApi,deleteEnclosureApi,getProjectInfoApi,downloadApi} from '@/api/enterprise/project/project'
  import UploadEnclosure from './UploadEnclosure'
  import { getExtend, readBuffer, render } from '@/utils/util';
  import { parse } from 'qs';
  import axios from 'axios'
  import FileUpload from '@/components/FileUpload'
  import { downLoadZip } from "@/utils/zipdownload";
  export default {
    components: {
      UploadEnclosure,
      FileUpload
    },
    props: {
      type: {
        type: String
      }
    },
    data() {
      return {
        total: 0,
        enclosureVisible: false,
        list: [],
        id: this.$route.query.id,
        dataId: undefined,
        attachType: 'FINACIAL',
        loading: false,
        selectionList: [],
        ids: '',
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        list1: [],
        list2: [],
        list3: [],
        list4: [],
        list5: [],
        list6: [],
        list7: [],
        list8: [],
        list9: [],
        list10: []
      };
    },
    computed: {
      userType() {
        return this.$store.state.user.userType
      },
      techFlag() {
        let roleType = this.$store.state.user.userType
        return this.type != 'view' ? ['ENT_TECH', 'ADMIN', 'ENT_ADMIN'].includes(roleType) : false //判断是否为技术
      },
      finFlag() {
        let roleType = this.$store.state.user.userType
        return this.type != 'view' ? ['ENT_FIN', 'ADMIN', 'ENT_ADMIN'].includes(roleType) : false //判断是否为财务
      }
    },
    created() {
      this.id = this.$route.query.id || undefined;
      if(this.id) {
        this.getList()
      }
    },
    methods: {
      getList() {
        getEnclosureApi(this.attachType,this.id).then(res => {
          if(res.code == 200) {
            this.list = res.data.records
            this.list1 = []
            this.list2 = []
            this.list3 = []
            this.list4 = []
            this.list5 = []
            this.list6 = []
            this.list7 = []
            this.list8 = []
            this.list9 = []
            this.list10 = []
            this.list.map(item => {
              if(item.fileType == 'file1') {
                this.list1.push(item)
              }
              if(item.fileType == 'file2') {
                this.list2.push(item)
              }
              if(item.fileType == 'file3') {
                this.list3.push(item)
              }
              if(item.fileType == 'file4') {
                this.list4.push(item)
              }
              if(item.fileType == 'file5') {
                this.list5.push(item)
              }
              if(item.fileType == 'file6') {
                this.list6.push(item)
              }
              if(item.fileType == 'file7') {
                this.list7.push(item)
              }
              if(item.fileType == 'file8') {
                this.list8.push(item)
              }
              if(item.fileType == 'file9') {
                this.list9.push(item)
              }
              if(item.fileType == 'file10') {
                this.list10.push(item)
              }

            })
            this.total = res.data.total
          }
        })
      },
      handleUpload(type) {
        let params = {
          attachType: 'FINACIAL',
          fileType: 'file'+type,
          dataId: this.id
        }
        this.enclosureVisible = true
        this.$nextTick(() => {
          this.$refs.uploadEnclosure.init(params)
        })
      },
      /** 导出按钮操作 */
      // handleDownload(id) {
      //   this.download(`/common/attach/${id}`, {
      //   }, `附件`)
      // },
      handleDownload(id) {
        window.open(process.env.VUE_APP_BASE_API+`/common/attach/${id}`)
      },
      handleDownloadBatch() {
        let id = this.id
        downLoadZip(`/ent/data/download/${id}`, "加计扣除备查资料清单")
        this.getList();
      },
      // 从url加载
      handleView(row) {
        let routeUrl = this.$router.resolve({
          path: '/enclosurePreview',
          query: {url: row.url,fileName: row.fileName,id: row.id}
        });
        window.open(routeUrl.href, "_blank");
      },
      handleDelete(id) {
        // const id = row.id;
        this.$confirm('是否确认删除该数据?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return deleteEnclosureApi(id);
          }).then(() => {
            this.queryParams.pageNum = 1;
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
      },
      // 取消全选
      selectAll(selection) {
        if (selection.length == 0) {
          let list = this.selectedList.filter(item => !this.list.some(ele => ele.id === item.id));
          this.selectionList = list;
        }
      },
      handleSelectionChange(val) {
        this.selectionList = val;
        if(this.selectionList.length > 0) {
          let selectionIds = []
          for (let i = 0, len = this.selectionList.length; i < len; i++) {
          	selectionIds.push(this.selectionList[i].id)
          }
          this.ids = selectionIds.join(',')
        }else {
          this.ids = ''
        }
      }
    }
  };
  </script>

</script>

<style lang="scss" scoped>
</style>
