<template>
  <div class="dossier-container">
    <div class="dossier-code">档案编号：{{ contentDate.userArchive }}</div>
    <div class="dossier-name">《 个人历年军事训练情况 》</div>
    <div class="person-dossier">
      <div class="person-info">
        <div class="dossier-list">
          <div class="dossier-item">
            <div class="item-name">姓名</div>
            <div class="item-value">{{ contentDate.userName }}</div>
          </div>
          <div class="dossier-item">
            <div class="item-name">性别</div>
            <div class="item-value">{{ contentDate.sex }}</div>
          </div>
          <div class="dossier-item">
            <div class="item-name">民族</div>
            <div class="item-value">{{ contentDate.nation }}</div>
          </div>
          <div class="dossier-item">
            <div class="item-name">籍 贯</div>
            <div class="item-value">{{ contentDate.nativePlace }}</div>
          </div>
          <div class="dossier-item">
            <div class="item-name">出生年月</div>
            <div class="item-value">{{ contentDate.birthDate }}</div>
          </div>
          <div class="dossier-item">
            <div class="item-name">入伍时间</div>
            <div class="item-value">{{ contentDate.rdDate }}</div>
          </div>
          <div class="dossier-item">
            <div class="item-name">现军衔及时间</div>
            <div class="item-value">{{ contentDate.rwDate }}</div>
          </div>
          <div class="dossier-item">
            <div class="item-name">入党（团）时间</div>
            <div class="item-value">{{ contentDate.xjxDate }}</div>
          </div>
          <div class="dossier-item">
            <div class="item-name">学历学位</div>
            <div class="item-value">{{ contentDate.highEducation }}</div>
          </div>
          <div class="dossier-item">
            <div class="item-name">血 型</div>
            <div class="item-value">{{ contentDate.bloodType }}</div>
          </div>
          <div class="dossier-item">
            <div class="item-name">入伍地</div>
            <div class="item-value">{{ contentDate.registeredResidence }}</div>
          </div>
          <div class="dossier-item">
            <div class="item-name">人员类别</div>
            <div class="item-value">{{ contentDate.userClass }}</div>
          </div>
        </div>
        <div class="img">
          <img src="" alt="" />
        </div>
      </div>
      <div class="mian-title">入伍后简历</div>
      <div class="notes-list">
        <div class="notes-item">
          <div class="notes-name">起止年月</div>
          <div class="notes-value">在何单位任何职</div>
        </div>
        <div
          class="notes-item"
          v-for="(item, i) in contentDate.bizUserWorkDetailList"
          :key="i"
        >
          <div class="notes-name">{{ item.startDate }}-{{ item.endDate }}</div>
          <div class="notes-value">{{ item.position }}</div>
        </div>
      </div>
      <div class="mian-title">参 训 经 历</div>
      <div class="experience-list">
        <div class="experience-item">
          <div class="experience-name">参加重大军事行动</div>
          <div class="experience-value">
            {{ contentDate.bizUserThroughStaticList[0].field1 }}
          </div>
        </div>
        <div class="experience-item">
          <div class="experience-name">参加重大演训活动</div>
          <div class="experience-value">
            {{ contentDate.bizUserThroughStaticList[0].field2 }}
          </div>
        </div>
        <div class="experience-item">
          <div class="experience-name">参加院校教育培训</div>
          <div class="experience-value">
            {{ contentDate.bizUserThroughStaticList[1].field3 }}
          </div>
        </div>
        <div class="experience-item">
          <div class="experience-name">参加重大集训、比武竞赛</div>
          <div class="experience-value">
            {{ contentDate.bizUserThroughStaticList[1].field4 }}
          </div>
        </div>
      </div>
      <div class="mian-title">组 训 经 历</div>
      <div class="experience-list">
        <div class="experience-item">
          <div class="experience-name">参与组织重大演习导调裁评</div>
          <div class="experience-value">
            {{ contentDate.bizUserThroughStaticList[1].field1 }}
          </div>
        </div>
        <div class="experience-item">
          <div class="experience-name">参加组织重大专项训练任务</div>
          <div class="experience-value">
            {{ contentDate.bizUserThroughStaticList[1].field2 }}
          </div>
        </div>
      </div>
      <div class="mian-title">训 练 资 质 及 成 果</div>
      <div class="experience-list">
        <div class="experience-item">
          <div class="experience-name">专业等级评定</div>
          <div class="experience-value">
            {{ contentDate.bizUserAchieveStatic.professionAssess }}
          </div>
        </div>
        <div class="experience-item">
          <div class="experience-name">教学能力评定</div>
          <div class="experience-value">
            {{ contentDate.bizUserAchieveStatic.teachAssess }}
          </div>
        </div>
        <div class="experience-item">
          <div class="experience-name">职业技能鉴定</div>
          <div class="experience-value">
            {{ contentDate.bizUserAchieveStatic.vocationAssess }}
          </div>
        </div>
        <div class="experience-item">
          <div class="experience-name">执业资格认证</div>
          <div class="experience-value">
            {{ contentDate.bizUserAchieveStatic.practiceAssess }}
          </div>
        </div>
        <div class="experience-item">
          <div class="experience-name">训练成果</div>
          <div class="experience-value">
            {{ contentDate.bizUserAchieveStatic.archivement }}
          </div>
        </div>
      </div>
      <div class="mian-title">训 练 成 绩</div>
      <div class="experience-list">
        <div class="experience-item">
          <div class="experience-name">历年训练成绩评定</div>
          <div class="experience-value">
            {{ contentDate.bizUserGradeStatic.gradeContent }}
          </div>
        </div>
      </div>
      <div class="mian-title">训 练 奖 惩</div>
      <div class="experience-list">
        <div class="experience-item">
          <div class="experience-name">训练奖惩</div>
          <div class="experience-value">
            {{ contentDate.bizUserGradeStatic.rewardsContent }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'docTypeOne',
  props: {
    contentDate: {
      type: Object,
      default: () => {},
    },
  },
}
</script>

<style lang="scss" scoped>
.dossier-container {
  width: 90%;
  text-align: center;
  overflow: hidden;
  overflow-y: auto;
  .dossier-code {
    text-align: left;
  }
  .dossier-name {
    font-size: 24px;
    font-weight: bold;
  }
  .person-dossier {
    width: 100%;
    margin-top: 20px;
    border: 2px solid #000;
    .person-info {
      display: grid;

      grid-template-columns: auto 150px;
      .dossier-list {
        display: grid;
        grid-template-rows: repeat(4, 40px);

        grid-template-columns: repeat(3, 1fr);

        .dossier-item {
          // border: 1px solid #000;
          border-right: 1px solid #000;
          border-bottom: 1px solid #000;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          .item-name {
            height: 100%;
            border-right: 1px solid #000;
            line-height: 40px;
            font-weight: bold;
          }
          .item-value {
            height: 100%;
            line-height: 40px;
          }
        }
      }
      .img {
        border-bottom: 1px solid #000;
      }
    }
  }

  .mian-title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #000;
  }
  .notes-list {
    & :first-child.notes-item {
      font-weight: bold;
    }
    .notes-item {
      display: grid;
      grid-template-columns: 200px auto;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #000;

      .notes-name {
        border-right: 1px solid #000;
      }
    }
  }
  .experience-item {
    display: grid;
    grid-template-columns: 200px auto;
    border-bottom: 1px solid #000;
    min-height: 90px;
    .experience-name {
      border-right: 1px solid #000;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .experience-value {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
