<template>
  <table class="info-table">
    <tbody>
      <tr>
        <td>
          <p align="center">性别：</p>
        </td>

        <td colspan="2">
          <el-input v-model="info.gender" clearable style="width: 160px;"> </el-input>
        </td>

        <td>
          <p>证件号码：</p>
        </td>

        <td colspan="2">
          <el-input v-model="info.cardId" clearable> </el-input>
        </td>

        <td  colspan="2" rowspan="3">
          <div>
              <img :src="info.cardImg" :onerror="errorImg" class="setting-img-2" @click="showImg(info.cardImg)">
              <do-upload  placeholder="毕业证" width="150px"> </do-upload>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <p>出生日期：</p>
        </td>
        <td colspan="2">
          <el-input v-model="info.birthday" clearable> </el-input>
        </td>
        <td>
          <p>手机：</p>
        </td>
        <td colspan="2">
          <el-input v-model="info.gender" clearable> </el-input>
        </td>
      </tr>

      <tr>
        <td>
          <p>工作单位：</p>
        </td>
        <td colspan="2">
          <el-input v-model="info.company" clearable> </el-input>
        </td>
        <td>
          <p>*施工现场实践</p>
          <p>年限：</p>
        </td>
        <td colspan="2">
          <el-input v-model="info.years" clearable> </el-input>
        </td>
      </tr>


      <tr>
        <td>
          <p>联系地址：</p>
        </td>

        <td colspan="6">
          <el-input v-model="info.address" clearable> </el-input>
        </td>

        <td style="width: 260px; height: 46px;" colspan="2">
          <p>照片上传</p>
        </td>
      </tr>
      <tr style="height: 46px;">
        <td style="width: 260px; height: 46px;" colspan="2">
          <p>照片审核情况：审核通过</p>
        </td>
      </tr>
      <tr style="height: 46px;">
        <td style="width: 379px; height: 46px;" colspan="3">
          <p> </p>
        </td>
        <td style="width: 138px; height: 46px;">
          <p>保存基础信息</p>
        </td>
        <td style="width: 422px; height: 46px;" colspan="3">
          <p> </p>
        </td>
      </tr>
      <tr style="height: 46px;">
        <td style="width: 945px; height: 46px;" colspan="7">
          <p> </p>
        </td>
      </tr>
      <tr style="height: 46px;">
        <td style="width: 117px; height: 46px;">
          <p>身份证信息</p>
        </td>
        <td style="width: 117px; height: 46px;">
          <p>学历信息</p>
        </td>
        <td style="width: 139px; height: 46px;">
          <p>工作年限证明</p>
        </td>
        <td style="width: 563px; height: 46px;" colspan="4">
          <p> </p>
        </td>
      </tr>
      <tr style="height: 0px;">
        <td style="width: 682px; height: 211px;" colspan="5" rowspan="3">
          <p><u>工作年限证明模板下载</u></p>
        </td>
        <td style="width: 260px; height: 211px;" colspan="2" rowspan="3">
          <p> </p>
        </td>
      </tr>
      <tr style="height: 46px;">
        <td style="width: 682px; height: 92px;" colspan="5" rowspan="2">
          <p>工作年限证明附件审核情况：审核通过</p>
        </td>
        <td style="width: 98px; height: 46px;">
          <p>选择文件</p>
        </td>
        <td style="width: 159px; height: 46px;">
          <p>未选择任何文件</p>
        </td>
      </tr>
      <tr style="height: 46px;">
        <td style="width: 260px; height: 46px;" colspan="2">
          <p>上传工作年限证明</p>
        </td>
      </tr>
      <tr style="height: 46px;">
        <td style="width: 945px; height: 46px;" colspan="7">
          <p> </p>
        </td>
      </tr>
      <tr style="height: 46px;">
        <td style="width: 379px; height: 46px;" colspan="3">
          <p> </p>
        </td>
        <td style="width: 300px; height: 46px;" colspan="2">
          <p>保存工作年限证明</p>
        </td>
        <td style="width: 260px; height: 46px;" colspan="2"> </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
  import DoUpload from '@/components/upload/index.vue'
  export default {
    components: {
      DoUpload
    },

    data() {
      return {
        info:{
          cardId:'',
          gender:'',
          phone:'',
          birthday:'',
          cardImg:''
        },
        errorImg: 'this.src="' + require('../../../../assets/images/default-photo_hash88f70f5253.jpg') + '"',
      }
    },
    methods:{
      showImg(){

      }
    }
  }
</script>

<style>
  .info-table{ height: 800px; width: 1000px; border-collapse: collapse;}
  .info-table tr{border-bottom:#333 1px dashed;}

</style>
