<template>
  <uni-collapse>
    <eikon-collapse-item title="出勤投入" name="attendance" :borderColor="'#00A5BC'">
      <div class="collapse-content">

        <!-- isZhanZhang为true时显示统计表格 -->
        <div v-if="isZhanZhang">
          <statistic-table :columns="attendanceColumns" :data="stationAttendanceData" />
        </div>

        <!-- isPersonal为true时显示原有内容 -->
        <div v-else-if="isPersonal">
          <div class="content-item">
            <div class="item-label">出勤天数：</div>
            <div class="item-value">{{ attendanceData && attendanceData.workingDate ? attendanceData.workingDate : '-' }}</div>
          </div>
          <div class="content-item">
            <div class="item-label">上岗时长：</div>
            <div class="item-value">{{ attendanceData && attendanceData.workingHours ? attendanceData.workingHours : '-' }}H</div>
          </div>
        </div>


        <div v-else>
          <div class="content-item">
            <div class="item-label">出勤人均天数：</div>
            <div class="item-value">{{ attendanceData && attendanceData.workingDate ? attendanceData.workingDate.averagePersonnel || '-' : '-' }}</div>
          </div>
          <div class="content-item">
            <div class="item-label">上岗人均时长：</div>
            <div class="item-value">{{ attendanceData && attendanceData.workingHours ? attendanceData.workingHours.averagePersonnel || '-' : '-' }}小时</div>
          </div>
        </div>

      </div>
    </eikon-collapse-item>
  </uni-collapse>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import EikonCollapseItem from "./eikon-collapse-item.vue";
import StatisticTable from "@/components/statistic-table/statistic-table.vue";

export default {
  name: "Attendance",
  components: {
    EikonCollapseItem,
    StatisticTable
  },
  computed: {
    ...mapGetters('eikonLevel', ['isZhanZhang', 'isPersonal']),
    ...mapState({
      attendanceData: state => state.eikonLevel.attendanceData,
      stationAttendanceData: state => state.eikonLevel.stationAttendanceData
    }),
  },
  data() {
    return {
      // 出勤统计表格列配置
      attendanceColumns: [
        { props: 'dimension', title: '统计维度' },
        { props: 'avgWorkingDays', title: '人均出勤天数' },
        { props: 'avgWorkingHours', title: '人均上岗时长' }
      ],

    }
  },

}
</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>