<template>
  <uni-collapse>
    <eikon-collapse-item title="工作履历" name="workExperience" :borderColor="'#ED8D1A'">
      <div class="collapse-content" v-if="!isPersonal">
        <div class="content-item">
          <div class="item-label">平均工作年限：</div>
          <div class="item-value">{{ systemData && systemData.workYearsStats ? systemData.workYearsStats.averageWorkYears || 0 : 0 }}</div>
        </div>
        <div class="content-item">
          <div class="item-label">平均安检工作年限：</div>
          <div class="item-value">{{ systemData && systemData.securityWorkYearsStats ? systemData.securityWorkYearsStats.averageWorkYears || 0 : 0 }}</div>
        </div>
        <div class="content-item">
          <div class="item-label">曾担任过班组长人数：</div>
          <div class="item-value">{{ systemData && systemData.securityWorkPositionStats ? systemData.securityWorkPositionStats.teamLeaderCount || 0 : 0 }}</div>
        </div>
        <div class="content-item">
          <div class="item-label">工作奖励次数：</div>
          <div class="item-value">{{ systemData && systemData.workRewardsStats ? systemData.workRewardsStats.totalPersonTimes || 0 : 0 }}</div>
        </div>
        <div class="content-item">
          <div class="item-label">工作处罚次数：</div>
          <div class="item-value">{{ systemData && systemData.workPenaltiesStats ? systemData.workPenaltiesStats.totalPersonTimes || 0 : 0 }}</div>
        </div>
      </div>
      <div class="collapse-content" v-else>
        <div class="content-item">
          <div class="item-label">工作年限：</div>
          <div class="item-value">{{ systemData ? systemData.workYears || 0 : 0 }}</div>
        </div>
        <div class="content-item">
          <div class="item-label">安检工作年限：</div>
          <div class="item-value">{{ systemData ? systemData.securityWorkYears || 0 : 0 }}</div>
        </div>
        <div class="content-item">
          <div class="item-label">曾任安检最高职务：</div>
          <div class="item-value">{{ systemData ? systemData.securityWorkPosition || '' : '' }}</div>
        </div>
        <div class="content-item">
          <div class="item-label">工作奖励次数：</div>
          <div class="item-value">{{ systemData ? systemData.workRewards || 0 : 0 }}</div>
        </div>
        <div class="content-item">
          <div class="item-label">工作处罚次数：</div>
          <div class="item-value">{{ systemData ? systemData.workPenalties || 0 : 0 }}</div>
        </div>
      </div>
    </eikon-collapse-item>
  </uni-collapse>
</template>

<script>
import EikonCollapseItem from "./eikon-collapse-item.vue";
import { mapState } from 'vuex'
export default {
  name: "WorkExperience",
  components: {
    EikonCollapseItem
  },
  computed: {
    ...mapState({
      systemData: state => state.eikonLevel.systemData,
      isPersonal: state => state.eikonLevel.isPersonal
    })
  }
}
</script>

<style lang="scss" scoped>
.collapse-content {
  padding: 20rpx;
}

.content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.item-label {
  font-size: 26rpx;
  color: #333333;
  font-weight: 500;
}

.item-value {
  font-size: 26rpx;
  color: #999999;
  font-weight: 500;
}
</style>