<!--
  @description: 项目负责人信息
   @Modifier: ht
  @date: 2020-7-17-10:57
-->
<template>
    <div>
        <div class="title p0-16 clearfix">
            <div class="title-back pointer" @click="back">
                <i class="iconfont icon-fanhui mr10" />项目负责人信息
            </div>
        </div>
        <div :class="invitationDetailType = 'view'">
            <!--项目负责人信息-->
            <dl class="projectInfoDetail">
                <dt>
                    <p class="projectInfoDetail_icon">
                        <i class="iconfont icon-xiangmujibenxinxi" />
                    </p>
                    项目负责人信息
                </dt>
                <dd>
                    <table class="tableData">
                        <tr>
                            <td>姓名</td>
                            <td>{{ formData.leaderName }}</td>
                            <td>年龄</td>
                            <td>{{ formData.age }}</td>
                        </tr>
                        <tr>
                            <td>身份证号</td>
                            <td>{{ formData.idNumber }}</td>
                            <td>工作经验（年）</td>
                            <td>{{ formData.workExperience }}</td>
                        </tr>
                        <tr>
                            <td>当前职务</td>
                            <td>{{ formData.jobTitle }}</td>
                        </tr>
                    </table>
                </dd>
            </dl>
            <!--工作经历信息-->
            <dl class="projectInfoDetail">
                <el-tabs type="border-card">
                    <el-tab-pane>
                        <span slot="label">工作经历</span>
                        <el-table
                                ref="smallTable"
                                v-loading="loading"
                                :data="GZtableData"
                        >
                            <el-table-column
                                    type="index"
                                    label="序号"
                                    width="60px"
                                    align="center"
                            />
                            <el-table-column
                                    prop="time"
                                    align="center"
                                    label="时间"
                                    width="140"
                            />
                            <el-table-column
                                    header-align="center"
                                    prop="projectName"
                                    label="参加的类型项目"
                                    min-width="230"
                            />
                            <el-table-column
                                    header-align="center"
                                    label="担任职务"
                                    prop="jobTitle"
                                    align="left"
                                    min-width="200"
                            />
                            <el-table-column
                                    header-align="companyName"
                                    label="发包人及联系电话"
                                    prop="contractInfo"
                                    align="center"
                                    width="200"
                            >
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="资质证书">
                        <el-table
                                ref="smallTable"
                                v-loading="loading"
                                :data="ZZtableData"
                        >
                            <el-table-column
                                    type="index"
                                    label="序号"
                                    width="60px"
                                    align="center"
                            />
                            <el-table-column
                                    prop="certificateNo"
                                    align="center"
                                    label="证书编号"
                                    width="140"
                            />
                            <el-table-column
                                    header-align="center"
                                    prop="certificateName"
                                    label="证书名称"
                                    min-width="230"
                            />
                            <el-table-column
                                    header-align="center"
                                    label="证书等级"
                                    prop="certificateLevel"
                                    align="left"
                                    min-width="200"
                            />
                            <el-table-column
                                    header-align="center"
                                    label="下载附件"
                                    width="500"
                            >
                                <template slot-scope="scope">
                                    <el-link
                                             v-if = "scope.row.scanCertificate.length > 0"
                                             type="primary"
                                    >
                                        <span @click="downLoadClick(scope.row.scanCertificate[0])">
                                        <i class="iconfont icon-icon_file" />
                                        {{ scope.row.scanCertificate[0].fileName }}
                                      </span>
                                    </el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </dl>
            <!--邀请函信息-->
            <dl class="projectInfoDetail">
                <dt>
                    <p class="projectInfoDetail_icon">
                        <i class="iconfont icon-xiangmujibenxinxi" />
                    </p>
                    附件信息
                </dt>
                <dd>
                    <table class="tableData">
                        <tr class="singleRow">
                            <td>附件下载</td>
                            <td colspan="3">
                                <div v-for="(item,index) in scanCertificate" :key="index" class="file">
                                    <a ref="oneDownload" class="inline-file">
                                      <span @click="downLoadClick(item)">
                                        <i class="iconfont icon-icon_file" />
                                        {{ item.fileName }}
                                      </span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </table>
                </dd>
            </dl>
        </div>
        <!--当前页面从哪进来的  01 驱动内列表页 并且不是工作流-->
        <div class="but_footer">
            <div class="but_footer-h" />
            <div class="but_footer-but">
                <el-button @click="back()">
                    返 回
                </el-button>
            </div>
        </div>
    </div>
</template>
<script>
/* 接口*/
import { findPeopleInfo, downAttachmentLoadFile } from '@api/bidding/bidderRepresentative'
import { download } from '@/assets/js/utils/index'
/* 公用方法*/
import { filterObj } from '@/assets/js/utils'// 常用方法

export default {
  name: 'PeopleInfo',
  data() {
    return {
      loading: true,
      searchForm: {
        id: this.$route.query.id
      },
      scanCertificate: [],
      formData: {
        jobTitle: '', // 当前职务
        workExperience: '', // 工作经验（年）
        idNumber: '', // 身份证号
        age: '', // 年龄
        leaderName: '' // 姓名
      },
      GZtableData: [],
      ZZtableData: []
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      const params = this.getQueryParams() // 查询条件
      findPeopleInfo(params).then(response => {
        this.loading = false
        this.formData = response.data
        this.scanCertificate = response.data.scanCertificate
        this.GZtableData = response.data.workExperienceList
        this.ZZtableData = response.data.certificateList
      }).catch(() => {
        this.loading = false
      })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      return filterObj(param)
    },
    // 返回
    back() {
      this.$router.push('/bidderRepresentative/peopleList')
    },
    downLoadClick(item) {
      const params = {
        fileName: item.fileName,
        fileId: item.fileId
      }
      downAttachmentLoadFile(params).then(res => {
        download(res, item.fileName)
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
