<template>
  <uni-collapse>
    <eikon-collapse-item :title="title" name="memberDetails" :borderColor="'#2F54EB'">
      <div class="collapse-content">
        <statistic-table :columns="memberTableColumns" :data="memberTableData">
          <template v-slot:column-name="{ row, index }">
            <span class="clickable-name" @click="handleNameClick(row)">
              {{ row.name }}
            </span>
          </template>
        </statistic-table>
      </div>
    </eikon-collapse-item>
  </uni-collapse>
</template>

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

import useDictMixin from "@/utils/dict";
export default {
  name: "MemberDetails",
  components: { EikonCollapseItem, StatisticTable },
  mixins: [useDictMixin],
  data() {
    return {
      memberTableData: []
    }
  },
  watch: {
    detailData: {
      handler(newVal, oldVal) {
        // 检查newVal是否为null或undefined
        if (!newVal) {
          this.memberTableData = [];
          return;
        }


        if (this.isBanZuZhang) {
          this.handlePersonalData(newVal)
        } else {
          this.memberTableData = newVal.map((item) => {
            return {
              ...item,
              avgWorkingHours: `${item.avgWorkingHours}H`
            }
          })
          
        }
      },
    }
  },
  computed: {
    ...mapState({
      currentLevel: state => state.eikonLevel.currentLevel,
      detailData: state => state.eikonLevel.detailData,
    }),
    ...mapGetters('eikonLevel', ['isBanZuZhang', 'isKeZhang', 'isZhanZhang','isJingLi']),
    title() {
      if (this.currentLevel === 'team') {
        return '成员明细'
      }
      if (this.currentLevel === 'department') {
        return '班组明细'
      }
      if (this.currentLevel === 'station') {
        return '科室明细'
      }
      if (this.currentLevel === 'brigade') {
        return '大队明细'
      }
    },
    memberTableColumns() {
      if (this.currentLevel === 'team') {
        return [
          { props: 'name', title: '姓名', slot: true },
          { props: 'qualificationLevel', title: '资质等级' },
          { props: 'avgWorkingDays', title: '出勤天数' },
          { props: 'avgWorkingHours', title: '上岗时长' },
          { props: 'avgSeizureCount', title: '查获数量' },
          { props: 'checkCount', title: '巡检问题数' },
          { props: 'testScore', title: '测试平均分' },
        ]
      }
      if (this.currentLevel === 'department') {
        return [
          { props: 'name', title: '班组', slot: true },
          { props: 'qualificationLevel', title: '资质等级1级' },
          { props: 'avgWorkingDays', title: '人均出勤天数' },
          { props: 'avgWorkingHours', title: '人均上岗时长' },
          { props: 'avgSeizureCount', title: '人均查获数量' },
          { props: 'checkCount', title: '人均巡检问题数' },
          { props: 'testScore', title: '测试平均分' },
        ]
      }
      if (this.currentLevel === 'station') {
        return [
          { props: 'name', title: '科室', slot: true },
          { props: 'qualificationLevel', title: '资质等级1级' },
          { props: 'avgWorkingDays', title: '人均出勤天数' },
          { props: 'avgWorkingHours', title: '人均上岗时长' },
          { props: 'avgSeizureCount', title: '人均查获数量' },
          { props: 'checkCount', title: '人均巡检问题数' },
          { props: 'testScore', title: '测试平均分' },
        ]
      }
      if (this.currentLevel === 'brigade') {
        return [
          { props: 'name', title: '主管', slot: true },
          { props: 'qualificationLevel', title: '资质等级1级' },
          { props: 'avgWorkingDays', title: '人均出勤天数' },
          { props: 'avgWorkingHours', title: '人均上岗时长' },
          { props: 'avgSeizureCount', title: '人均查获数量' },
          { props: 'checkCount', title: '人均巡检问题数' },
          { props: 'testScore', title: '测试平均分' },
        ]
      }
    }
  },
  methods: {
    ...mapActions('eikonLevel', ['changeLevel', 'loadData']),
    // 处理性格特征圆形数据
    async handlePersonalData(newVal) {
      // 检查newVal是否为null或undefined
      if (!newVal) {
        this.memberTableData = [];
        return;
      }

      const res = [...newVal]

      // 批量获取资质等级字典数据
      const dict = await this.useDict('sys_user_qualification_level')
      const qualificationDict = dict['sys_user_qualification_level'] || []

      // 将qualificationLevel字段转换为文字显示
      for (let i = 0; i < res.length; i++) {
        const item = res[i];
        if (item.qualificationLevel !== undefined && item.qualificationLevel !== null) {
          const dictItem = qualificationDict.find(d => d.value === item.qualificationLevel.toString())
          item.qualificationLevel = dictItem ? dictItem.label : item.qualificationLevel
        }
        item.avgWorkingHours = `${item.avgWorkingHours}H`
      }

      this.memberTableData = res
    },



    async handleNameClick(row) {
      // 根据当前角色和级别决定点击行为
      if (this.isBanZuZhang) {
        this.changeLevel({ level: 'personal', levelId: row.id })
      }
      if (this.isKeZhang) {
        this.changeLevel({ level: 'team', levelId: row.id })
      }
      if (this.isZhanZhang) {
        this.changeLevel({ level: 'department', levelId: row.id })
      }
      if (this.isJingLi) {
        this.changeLevel({ level: 'brigade', levelId: row.id })
      }
      await this.loadData()
      this.$emit('nameClick', row)
    }

  }
}
</script>

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

.clickable-name {
  color: #1890ff;
  cursor: pointer;


  &:hover {
    color: #40a9ff;
  }
}
</style>