<template>
  <div class="curriculumVitaePreview">
    <div class="title">{{ $t('curriculumVitae:preview:title') }}</div>
    <div class="message">
      <div class="userInfo">
        <span>张三</span>
        <span>医学博士</span>
        <span>广州医院</span>
        <span>社会兼职中华医学会XXXXXX</span>
      </div>
      <div class="userTitle">
        <span class="el-icon-first-aid-kit">放射科</span>
        <span class="el-icon-user">主任</span>
        <span class="el-icon-medal">副主任医师</span>
        <span class="el-icon-trophy">副教授</span>
      </div>
      <div class="userTel">
        <span class="el-icon-phone-outline">18616815282</span>
        <span class="el-icon-message">sicauzhangye@sina.com</span>
        <span class="el-icon-chat-dot-round">wechat666</span>
      </div>
    </div>
    <div class="message">
      <div class="title">{{ $t('curriculumVitae:summarize:title') }}</div>
      <span class="text">
        哈斯卡基本的喀山举办的卡拉说不定就卡了奥斯本大数据量的把数据来看不打算了解到
      </span>
    </div>
    <div class="message">
      <el-form class="demo-form-inline">
        <el-form-item :label="$t('curriculumVitae:specialty:specialty')">
          <span>放射科</span>
        </el-form-item>
        <el-form-item :label="$t('curriculumVitae:specialty:submajor')">
          <el-tag type="info" v-for="item in ['1', '2', '3']" :key="item">
            标签三
          </el-tag>
        </el-form-item>
        <el-form-item :label="$t('curriculumVitae:specialty:equipment')">
          <el-tag type="info" v-for="item in ['1', '2', '3']" :key="item">
            标签三
          </el-tag>
        </el-form-item>
      </el-form>
    </div>
    <div class="message">
      <div class="title">
        {{ $t('curriculumVitae:EducationalExperience:title') }}
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#eee', color: '#606266' }"
      >
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:EducationalExperience:table:time')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:EducationalExperience:table:specialy')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:EducationalExperience:table:degree')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:EducationalExperience:table:school')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:EducationalExperience:table:city')"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="message">
      <div>{{ $t('curriculumVitae:continuingTraining:title') }}</div>
      <el-table
        :data="tableData2"
        style="width: 100%"
        :header-cell-style="{ background: '#eee', color: '#606266' }"
      >
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:continuingTraining:table:time')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:continuingTraining:table:type')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:continuingTraining:table:direction')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:continuingTraining:table:school')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:continuingTraining:table:city')"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="message">
      <div class="title">
        {{ $t('curriculumVitae:scientificResearchProject:title') }}
      </div>
      <div class="content">
        <el-form class="demo-form-inline">
          <el-form-item
            :label="$t('curriculumVitae:scientificResearchProject:direction')"
          >
            <div>direction</div>
          </el-form-item>
          <el-form-item
            :label="$t('curriculumVitae:scientificResearchProject:subject')"
          >
            <div>subject</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="message">
      <!--临床试验-->
      <div class="title">
        {{ $t('curriculumVitae:clinicalTrials:title') }}
      </div>
      <el-table
        :data="tableData3"
        style="width: 100%"
        :header-cell-style="{ background: '#eee', color: '#606266' }"
      >
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:clinicalTrials:table:byStages')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:clinicalTrials:table:criterion')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:clinicalTrials:table:indication')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:clinicalTrials:table:viewingVolumeNum')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:clinicalTrials:table:year')"
        >
        </el-table-column>
      </el-table>
      <!--GCP证书-->
      <div class="title">
        {{ $t('curriculumVitae:clinicalTrials:GCPtitle') }}
      </div>
      <el-table
        :data="tableData4"
        style="width: 100%"
        :header-cell-style="{ background: '#eee', color: '#606266' }"
      >
        <el-table-column
          prop="has"
          :label="$t('curriculumVitae:clinicalTrials:table:hasCertificate')"
        >
        </el-table-column>
        <el-table-column
          prop="time"
          :label="$t('curriculumVitae:clinicalTrials:table:certificateTime')"
        >
        </el-table-column>
        <el-table-column
          prop="adress"
          :label="
            $t('curriculumVitae:clinicalTrials:table:certificateHospital')
          "
        >
        </el-table-column>
      </el-table>
      <!--其他相关经历-->
      <div class="title">
        {{ $t('curriculumVitae:clinicalTrials:otherTitle') }}
      </div>
      <template v-if="true">
        <div class="message">三的卡上不能打卡上班打卡</div>
      </template>
      <div class="noData" v-else>{{ $t('curriculumVitae:noData') }}</div>
    </div>
    <div class="message">
      <div class="title">{{ $t('curriculumVitae:treatise:title') }}</div>
      <el-table
        :data="tableData5"
        style="width: 100%"
        :header-cell-style="{ background: '#eee', color: '#606266' }"
      >
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:treatise:table:author')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:treatise:table:name')"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('curriculumVitae:treatise:table:publish')"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="message">
      <div class="title">{{ $t('curriculumVitae:other:title') }}</div>
      <div class="content">
        <div>{{ $t('curriculumVitae:other:AH') }}</div>
        <p>a诺夫卡刷积分八九十快点把手里的v八路军那是的健康蓝色的艰苦拉萨的</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'curriculumVitaePreview',
  data() {
    return {
      tableData: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
    }
  },
}
</script>
<style lang="scss" scoped>
.curriculumVitaePreview {
  max-width: 1200px;
  margin: auto;
  .title {
    font-size: 18px;
  }
  .message {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    .title {
      font-size: 14px;
      line-height: 30px;
      margin-bottom: 10px;
    }
    .text {
      color: #909399;
    }
    .content {
      background-color: #eee;
      padding: 10px;
      line-height: 30px;
      border-radius: 5px;
    }
  }
  .userInfo,
  .userTitle,
  .userTel {
    line-height: 30px;
    margin-bottom: 15px;
    span {
      margin-right: 20px;
      &:last-child {
        margin: 0;
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  .userTitle,
  .userTel {
    span {
      display: inline-block;
      min-width: 80px;
      border-right: 1px solid #ddd;
      padding-right: 10px;
      &::before {
        margin-right: 5px;
      }
      &:last-child {
        border: none;
      }
    }
  }
}
::v-deep .el-tag {
  margin-right: 10px;
  &:last-child {
    margin-right: 0;
  }
}
</style>