<template>
  <div class="dossier-container">
    <div class="dossier-code">档案编号：{{ bizUserBasic.userArchive }}</div>
    <div class="dossier-name">
      《 个人 {{ activeItem.year }} 年军事训练情况 》
    </div>
    <div class="person-dossier">
      <div class="dossier-list">
        <div class="dossier-item">
          <div class="item-name">姓名</div>
          <div class="item-value">{{ bizUserBasic.userName }}</div>
        </div>
        <div class="dossier-item">
          <div class="item-name">性别</div>
          <div class="item-value">{{ bizUserBasic.sex }}</div>
        </div>
      </div>

      <div class="mian-title">专 业 共 同</div>
      <div class="notes-list">
        <div class="notes-item">
          <div class="notes-name">课目名称</div>
          <div class="notes-name">成 绩</div>
          <div class="notes-name">评 定</div>
        </div>
        <div
          class="notes-item"
          v-for="item in activeItem.professionalCommonDetail"
          :key="item"
        >
          <div class="notes-name">{{ item.tiYuKaoPingKeMuMingCheng }}</div>
          <div class="notes-name">{{ item.tiYuKaoPingKeMuChengJi }}</div>
          <div class="notes-name">
            {{ dictionaryEscape('dagl-pjdj', item.level) }}
          </div>
        </div>
      </div>
      <div class="mian-title">专 业 训 练</div>
      <div class="notes-list">
        <div class="notes-item">
          <div class="notes-name">课目名称</div>
          <div class="notes-name">成 绩</div>
          <div class="notes-name">评 定</div>
        </div>
        <div
          class="notes-item"
          v-for="(item, i) in activeItem.professionalXXDetail"
          :key="i"
        >
          <div class="notes-name">{{ item.tiYuKaoPingKeMuMingCheng }}</div>
          <div class="notes-name">{{ item.tiYuKaoPingKeMuChengJi }}</div>
          <div class="notes-name">
            {{ dictionaryEscape('dagl-pjdj', item.level) }}
          </div>
        </div>
      </div>
      <div class="mian-title">军 人 共 同</div>
      <div class="notes-list">
        <div class="notes-item">
          <div class="notes-name">课目名称</div>
          <div class="notes-name">成 绩</div>
          <div class="notes-name">评 定</div>
        </div>
        <div
          class="notes-item"
          v-for="(item, i) in activeItem.xxcommonDetail"
          :key="i"
        >
          <div class="notes-name">{{ item.tiYuKaoPingKeMuMingCheng }}</div>
          <div class="notes-name">{{ item.tiYuKaoPingKeMuChengJi }}</div>
          <div class="notes-name">
            {{ dictionaryEscape('dagl-pjdj', item.level) }}
          </div>
        </div>
      </div>
      <div class="mian-title">军 事 体 育</div>
      <div class="notes-list">
        <div class="notes-item">
          <div class="notes-name">课目名称</div>
          <div class="notes-name">成 绩</div>
          <div class="notes-name">评 定</div>
        </div>
        <div
          class="notes-item"
          v-for="(item, i) in activeItem.xxsportsDetail"
          :key="i"
        >
          <div class="notes-name">{{ item.tiYuKaoPingKeMuMingCheng }}</div>
          <div class="notes-name">{{ item.tiYuKaoPingKeMuChengJi }}</div>
          <div class="notes-name">
            {{ item.level }}
          </div>
        </div>
      </div>
      <div class="mian-title">课目成绩统计</div>
      <div class="notes-list">
        <div class="notes-item four">
          <div class="notes-name">等级区分</div>
          <div class="notes-name">课目数量</div>
          <div class="notes-name">课目总数量</div>
          <div class="notes-name">所占比例</div>
        </div>
        <div
          class="notes-item four"
          v-for="(item, i) in activeItem.subjectScoreCounts"
          :key="i"
        >
          <div class="notes-name">
            {{ dictionaryEscape('dagl-pjdj', String(item.type)) }}
          </div>

          <div class="notes-name">
            {{ item.subjects || 0 }}
          </div>
          <div class="notes-name">{{ item.subjectsTotal || 0 }}</div>
          <div class="notes-name">{{ item.ratio }}%</div>
        </div>

        <div class="notes-item two">
          <div class="notes-name">职业教育分数及评定</div>
          <div class="notes-name">
            {{ activeItem.examUserEvaluation.vocationalEducationScore }}分 ({{
              dictionaryEscape(
                'dagl-pjdj',
                activeItem.examUserEvaluation.vocationalEducationEvaluation
              )
            }})
          </div>
        </div>
        <div class="notes-item two">
          <div class="notes-name">个人年度成绩</div>
          <div class="notes-name">无</div>
        </div>
      </div>

      <div class="mian-title">军事训练资质认证</div>
      <div class="notes-list">
        <div class="notes-item two">
          <div class="notes-name">专业等级评定</div>
          <div class="notes-name">
            {{ activeItem.bizUserAchieveDetailList[0].professionAssess }}
          </div>
        </div>
        <div class="notes-item two">
          <div class="notes-name">教学能力评定</div>
          <div class="notes-name">
            {{ activeItem.bizUserAchieveDetailList[0].teachAssess }}
          </div>
        </div>
        <div class="notes-item two">
          <div class="notes-name">职业技能评定</div>
          <div class="notes-name">
            {{ activeItem.bizUserAchieveDetailList[0].vocationAssess }}
          </div>
        </div>
        <div class="notes-item two">
          <div class="notes-name">执业资格认证</div>
          <div class="notes-name">
            {{ activeItem.bizUserAchieveDetailList[0].practiceAssess }}
          </div>
        </div>
      </div>
      <div class="mian-title">参加或参与组织军事行动、演训活动</div>
      <div class="experience-list">
        {{ activeItem.bizUserThroughDetailList[0].field2 }}
      </div>
      <div class="mian-title">参加或参与组织集训培训、比武竞赛</div>
      <div class="experience-list">
        {{ activeItem.bizUserThroughDetailList[0].field4 }}
      </div>
      <div class="mian-title">教学组训</div>
      <div class="experience-list">
        {{ activeItem.bizUserThroughDetailList[0].field3 }}
      </div>
      <div class="mian-title">训练成果</div>
      <div class="experience-list">
        {{ activeItem.bizUserAchieveDetailList[0].archivement }}
      </div>
      <div class="mian-title">训练奖惩</div>
      <div class="experience-list">
        {{ activeItem.bizUserGradeList[0].rewardsContent }}
      </div>
      <div class="sign-list">
        <div class="sign-item">
          <div class="sign-name">
            上一级指导员对该同志训练水平综合鉴定：<br />
          </div>
          <div style="margin-top: 10px; text-indent: 2em">
            {{
              activeItem.examUserEvaluation.comprehensiveAppraisalDescription
            }}
          </div>
        </div>
        <div class="sign-item">
          <div class="sign-name">年度军事训练总体评价：</div>
          <div style="margin-top: 10px; text-indent: 2em">
            {{
              activeItem.examUserEvaluation.comprehensiveAppraisalDescription
            }}
          </div>
          <div class="sign-date">
            <div>（单位盖章）</div>
            <div class="date">年 月 日</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'

export default {
  name: 'docTypeOne',
  props: {
    activeItem: {
      type: Object,
      default: () => {},
    },
    bizUserBasic: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    dictionaryEscape,
  },
}
</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;
    .dossier-list {
      display: grid;

      grid-template-columns: repeat(2, 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;
        }
      }
    }
  }

  .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: auto 200px 200px;
      min-height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #000;

      .notes-name {
        border-right: 1px solid #000;
      }
    }
    .four {
      grid-template-columns: 200px 1fr 1fr 1fr;
      & :first-child.notes-name {
        font-weight: bold;
      }
    }
    .two {
      grid-template-columns: 200px auto;
      & :first-child.notes-name {
        font-weight: bold;
      }
    }
  }
  .experience-list {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    border-bottom: 1px solid #000;
  }
  .sign-list {
    display: grid;
    grid-template-columns: auto 500px;
    & :first-child.sign-item {
      border-right: 1px solid #000;
    }
    .sign-item {
      padding: 16px;
      min-height: 300px;
      // display: flex;
      // flex-direction: column;
      text-align: left;
      position: relative;
      .sign-name {
        font-size: 15px;
        font-weight: bold;
      }
      .sign-date {
        display: flex;
        flex-direction: column;
        position: absolute;
        justify-content: center;
        align-items: center;
        right: 20px;
        bottom: 20px;
        .date {
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
