<template>
  <view class="general-overview">
    <!-- 左右镜像布局容器 -->
    <view class="mirror-layout">
      <!-- 左边重叠view -->
      <view class="left-stack">
        <view class="stack-item item-1">
          <view class="item-content">
            <view class="item-label">资质能力</view>
            <view class="item-number">{{ !isPersonal ? '高级' : '' }}{{ localOverviewData.qualificationLevel }}{{
              !isPersonal ?
                '人' : '' }}</view>
            <view class="item-description">资质等级</view>
          </view>
        </view>
        <view class="stack-item item-2">
          <view class="item-content">
            <view class="item-label">出勤投入</view>
            <view class="item-number">{{ localOverviewData.avgWorkingHours || 0 }}H</view>
            <view class="item-description">{{ isPersonal ? '上岗时长' : '人均上岗时长' }}</view>
          </view>
        </view>
        <view class="stack-item item-3">
          <view class="item-content">
            <view class="item-label">标准执行</view>
            <view class="item-number">{{ localOverviewData.checkCount || 0 }}</view>
            <view class="item-description">巡检问题总次数</view>
          </view>
        </view>
        <view class="stack-item item-4">
          <view class="item-content">
            <view class="item-label">协调配合</view>
            <view class="item-number">{{ localOverviewData.workingStyle }}</view>
            <view class="item-description">{{ isPersonal ? '工作风格' : '高频风格' }}</view>
          </view>
        </view>
      </view>

      <!-- 右边镜像重叠view -->
      <view class="right-stack">
        <view class="stack-item item-5">
          <view class="item-content">
            <view class="item-label">工作履历</view>
            <view class="item-number">{{ localOverviewData.workYears || 0 }}</view>
            <!-- <view class="item-number">{{ isPersonal ? localOverviewData.workYears || 0 :
              systemData.securityWorkYearsStats && systemData.securityWorkYearsStats.averageWorkYears || 0 }}</view> -->
            <view class="item-description">{{ isPersonal ? '安检工作年限' : '平均安检工作年限' }}</view>
          </view>
        </view>
        <view class="stack-item item-6">
          <view class="item-content">
            <view class="item-label">工作产出</view>
            <view class="item-number">{{ localOverviewData.avgSeizureCount || 0 }}</view>
            <view class="item-description">有效查获数据</view>
          </view>
        </view>
        <view class="stack-item item-7">
          <view class="item-content">
            <view class="item-label">学习成长</view>
            <view class="item-number">{{ localOverviewData.learningGrowthScore || 0 }}</view>
            <view class="item-description">平均分</view>
          </view>
        </view>
        <view class="stack-item item-8">
          <view class="item-content">
            <view class="item-label">主观印象</view>
            <view class="item-number">{{ localOverviewData.subjectiveImpression || '' }}</view>
            <view class="item-description">高频词</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDictLabelByValue } from "@/utils/common"
import { mapState, mapGetters } from 'vuex'
import useDictMixin from '@/utils/dict'
export default {
  name: 'GeneralOverview',
  data() {
    return {
      localOverviewData: {}
    }
  },
  mixins: [useDictMixin],
  computed: {
    ...mapState({
      overviewData: state => state.eikonLevel.overviewData,
      systemData: state => state.eikonLevel.systemData,
    }),
    ...mapGetters('eikonLevel', ['isPersonal']),
  },
  watch: {
    overviewData: {
      handler(newVal, oldVal) {
        if (this.isPersonal) {
          this.handlePersonalData(newVal)
        } else {
          this.handleDeptData(newVal)
        }
      },
    },
    systemData: {
      handler(newVal, oldVal) {
        if (!this.isPersonal) {
          this.handleSystemData(newVal)
        }

      }
    }
  },
  methods: {
    async handleSystemData(newVal) {
      if (newVal) {
        const { qualificationLevelStats } = newVal;
        let levelOne = qualificationLevelStats && qualificationLevelStats.find(item => item.levelName === '高级')?.count || 0;
        this.localOverviewData.qualificationLevel = levelOne;
        // this.localOverviewData.workYears = newVal.workYearsStats && newVal.workYearsStats.averageWorkYears;
      }
    },
    async handleDeptData(newVal) {
      const res = { ...newVal };

      const dict = await this.useDict(
        'sys_user_personality_trait',
        'sys_user_capability_performance',
        'sys_user_interpersonal_interaction',
        'sys_user_growth_potential',
      )
      let dictArr = Object.values(dict).reduce((prev, cur) => prev.concat(cur), [])

      res.subjectiveImpression = dictArr.find(item => item.value === res.subjectiveImpression)?.label || '';
      res.workingStyle = await getDictLabelByValue('sys_user_working_style', newVal
        && newVal.workingStyle)
      delete res.qualificationLevel
      // delete res.workYears;

      this.localOverviewData = { ...this.localOverviewData, ...res };
    },
    async handlePersonalData(newVal) {
      const res = { ...newVal };

      res.qualificationLevel = await getDictLabelByValue('sys_user_qualification_level', newVal
        && newVal.qualificationLevel)

      res.workingStyle = await getDictLabelByValue('sys_user_working_style', newVal
        && newVal.workingStyle)

      const dict = await this.useDict(
        'sys_user_personality_trait',
        'sys_user_capability_performance',
        'sys_user_interpersonal_interaction',
        'sys_user_growth_potential',
      )
      let dictArr = Object.values(dict).reduce((prev, cur) => prev.concat(cur), [])

      res.subjectiveImpression = dictArr.find(item => item.value === res.subjectiveImpression)?.label || '';

      this.localOverviewData = res;
    }
  }
}
</script>

<style lang="scss" scoped>
.general-overview {
  padding: 20rpx 0;
}

.mirror-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.left-stack,
.right-stack {
  position: relative;
  width: 49%;
  height: 880rpx;
}

.stack-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;


  background: #ffffff;

  &.item-1 {
    z-index: 1;
    height: 880rpx;
    border-right: 4rpx solid #B790F7;
    border-bottom: 4rpx solid #B790F7;
    border-radius: 0 50rpx 0 0;


    .item-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-left: 40rpx;
      justify-content: space-evenly;
      border-radius: 0 50rpx;
      border: 4rpx solid #B790F7;
      margin-right: -4rpx;
    }
  }

  &.item-2 {
    z-index: 2;
    height: 670rpx;
    top: 200rpx;
    width: 95%;
    border-right: 4rpx solid #39CFCA;
    border-bottom: 4rpx solid #39CFCA;
    border-radius: 0 50rpx 0 0;

    .item-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-left: 40rpx;
      justify-content: space-evenly;
      border-radius: 0 50rpx;
      border: 4rpx solid #39CFCA;
      margin-right: -4rpx;
    }
  }

  &.item-3 {
    z-index: 3;
    height: 460rpx;
    top: 400rpx;
    width: 90%;
    border-right: 4rpx solid #4BA93B;
    border-bottom: 4rpx solid #4BA93B;
    border-radius: 0 50rpx 0 0;

    .item-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-left: 40rpx;
      justify-content: space-evenly;
      border-radius: 0 50rpx;
      border: 4rpx solid #4BA93B;
      margin-right: -4rpx;
    }
  }

  &.item-4 {
    z-index: 4;
    height: 250rpx;
    width: 85%;
    top: 600rpx;
    border-right: 4rpx solid #2E81FF;
    border-bottom: 4rpx solid #2E81FF;
    border-radius: 0 50rpx 0 0;

    .item-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-left: 40rpx;
      justify-content: space-evenly;
      border-radius: 0 50rpx;
      border: 4rpx solid #2E81FF;
      margin-right: -4rpx;
    }
  }
}

.right-stack {
  .stack-item {
    left: auto;
    right: 0;

    &.item-5 {
      z-index: 1;
      height: 880rpx;
      border-left: 4rpx solid #ED8E1C;
      border-bottom: 4rpx solid #ED8E1C;
      border-radius: 50rpx 0 0 0;

      .item-content {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-right: 40rpx;
        justify-content: space-evenly;
        border-radius: 50rpx 0;
        border: 4rpx solid #ED8E1C;
        margin-left: -4rpx;
      }
    }

    &.item-6 {
      z-index: 2;
      height: 670rpx;
      top: 200rpx;
      width: 95%;
      border-left: 4rpx solid #F14E4E;
      border-bottom: 4rpx solid #F14E4E;
      border-radius: 50rpx 0 0 0;

      .item-content {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-right: 40rpx;
        justify-content: space-evenly;
        border-radius: 50rpx 0;
        border: 4rpx solid #F14E4E;
        margin-left: -4rpx;
      }
    }

    &.item-7 {
      z-index: 3;
      height: 460rpx;
      top: 400rpx;
      width: 90%;
      border-left: 4rpx solid #E437F3;
      border-bottom: 4rpx solid #E437F3;
      border-radius: 50rpx 0 0 0;

      .item-content {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-right: 40rpx;
        justify-content: space-evenly;
        border-radius: 50rpx 0;
        border: 4rpx solid #E437F3;
        margin-left: -4rpx;
      }
    }

    &.item-8 {
      z-index: 4;
      height: 250rpx;
      width: 85%;
      top: 600rpx;
      border-left: 4rpx solid #FF9B7E;
      border-bottom: 4rpx solid #FF9B7E;
      border-radius: 50rpx 0 0 0;

      .item-content {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-right: 40rpx;
        justify-content: space-evenly;
        border-radius: 50rpx 0;
        border: 4rpx solid #FF9B7E;
        margin-left: -4rpx;
      }
    }
  }
}

.item-content {
  text-align: center;
  height: 180rpx;
  color: #333333;
}

.item-number {
  font-size: 25rpx;
  font-weight: bold;

}

.item-label {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  position: relative;


  &::before {
    content: '';
    position: absolute;
    left: -16%;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 28rpx;
    border-radius: 2rpx;
  }
}

.left-stack {
  .item-1 .item-label::before {
    background: #B68FF7;
  }

  .item-2 .item-label::before {
    background: #39CFCA;
  }

  .item-3 .item-label::before {
    background: #4BA93B;
  }

  .item-4 .item-label::before {
    background: #2E81FF;
  }
}

.right-stack {
  .item-label {
    padding-left: 0;
    padding-right: 16rpx;

    &::before {
      left: auto;
      right: 0;
    }
  }

  .item-5 .item-label::before {
    background: #ED8E1C;
  }

  .item-6 .item-label::before {
    background: #F14E4E;
  }

  .item-7 .item-label::before {
    background: #E437F3;
  }

  .item-8 .item-label::before {
    background: #FF9B7E;
  }
}

.item-description {
  font-size: 24rpx;

  color: #999999;
}
</style>