<template>
  <ChartsContainer title="资质能力">
    <div style="height: 100%; overflow-y: auto;">
      <div class="content-item">
        <div class="item-label">资质等级：</div>
        <div class="item-value">{{ getLabel(localSystemData.qualificationLevel, sys_user_qualification_level) }}</div>
      </div>
      <div class="content-item">
        <div class="item-label">可上岗岗位：</div>
        <div class="item-value">{{ localSystemData.availablePositions }}</div>
      </div>
      <div class="content-item">
        <div class="item-label">政治面貌：</div>
        <div class="item-value">{{ getLabel(localSystemData.politicalStatus, sys_user_political_status) }}</div>
      </div>
      <div class="content-item">
        <div class="item-label">学历：</div>
        <div class="item-value">{{ getLabel(localSystemData.education, sys_user_schooling) }}</div>
      </div>
      <div class="content-item">
        <div class="item-label">年龄：</div>
        <div class="item-value">{{ localSystemData.age }}岁</div>
      </div>
      <div class="content-item">
        <div class="item-label">是否通过政审：</div>
        <div class="item-value">{{ localSystemData.isPoliticalReviewPassed ? '是' : '否' }}</div>
      </div>
      <div class="content-item">
        <div class="item-label">身体健康情况：</div>
        <div class="item-value">{{ !localSystemData.isHealthy ? '健康' : localSystemData.isHealthy }}</div>
      </div>
      <div class="content-item">
        <div class="item-label">有无行政处罚：</div>
        <div class="item-value">{{ !localSystemData.hasAdministrativePenalty ? '无' : localSystemData.hasAdministrativePenalty }}</div>
      </div>
    </div>
  </ChartsContainer>
  <ChartsContainer title="工作履历">
    <div style="height: 100%;  overflow-y: auto;">
      <div class="content-item">
        <div class="item-label">工作年限：</div>
        <div class="item-value">{{ localSystemData.workYears || 0 }}</div>
      </div>
      <div class="content-item">
        <div class="item-label">安检工作年限：</div>
        <div class="item-value">{{ localSystemData.securityWorkYears || 0 }}</div>
      </div>
      <div class="content-item">
        <div class="item-label">曾任安检最高职务：</div>
        <div class="item-value">{{ localSystemData.securityWorkPosition || '-' }}</div>
      </div>
      <div class="content-item">
        <div class="item-label">工作奖励次数：</div>
        <div class="item-value">{{ localSystemData.workRewards || 0  }}</div>
      </div>
      <div class="content-item">
        <div class="item-label">工作处罚次数：</div>
        <div class="item-value">{{ localSystemData.workPenalties || 0 }}</div>
      </div>
    </div>
  </ChartsContainer>
</template>

<script setup>
import ChartsContainer from '../ChartsContainer.vue';
import { ref, inject } from 'vue';
import { getModuleMetrics } from '@/api/item/items'
import { useTimeOut } from '../pageItems/useTimeOut'
import { useDict } from '@/utils/dict'
const props = defineProps({
  personal: {
    type: Boolean,
    default: false
  }
})
const {
  sys_user_political_status,
  sys_user_qualification_level,
  sys_user_schooling
} = useDict('sys_user_political_status', 'sys_user_qualification_level', 'sys_user_schooling')

const getLabel = (value, list = []) => {
  const item = list.find(item => item.value.includes(value)) || {}
  return item.label
}

const localSystemData = ref({})
const params = inject('provideParams')

const handleDeptData = async (newVal) => {
  // 检查newVal是否为null或undefined
  if (!newVal) {
    localSystemData.value = {};
    return;
  }
  localSystemData.value = {
    ...newVal,
    availablePositions: newVal.availablePositions.map(item => item.postName).join('、')
  };
}
useTimeOut(() => {
  params.value.deptId && getModuleMetrics({ userId: params.value.deptId, userTypeStr: 'personal' }).then(res => {
    const { moduleResults = { system: {} } } = res.data
    handleDeptData(moduleResults.system)
  })
}, [params])

</script>

<style lang="scss" scoped>
.content-item {
  display: flex;
  column-gap: 5px;
  margin-bottom: 8px;
  font-size: 16px;

  .item-label {
    color: #fff;
    font-weight: bold;
    width: 10em;
  }

  .item-value {
    color: #fefefe;
    flex: 1;
    text-align: end;
  }
}
</style>