<template>
  <uni-collapse>
    <eikon-collapse-item title="工作产出" name="workOutput" :borderColor="'#F14C4C'">
      <div class="collapse-content">
        <!-- isZhanZhang为false时显示原有内容 -->
        <div v-if="!isZhanZhang">
          <!-- 查获排名 -->
          <div class="seize-ranking-section">
            <div class="ranking-header">
              <div class="ranking-title">查获排名</div>
              <SwitchTab :tabList="switchOptions" :defaultActive="switchValue" @tabChange="handleTabChange" />
            </div>

            <div class="ranking-content">
              <h-rank-line :percentage="seizeRankingPercentage">
                <text class="progress-text">
                  <text class="progress-rank">第{{ extraData.rank || 0 }}名</text>
                  /
                  <text class="progress-count">{{ extraData.rankCount || 0 }}</text>
                </text>
              </h-rank-line>
            </div>
          </div>
          <div class="content-item">
            <div class="item-label">有效查获数量：</div>
            <div class="item-value">{{ isPersonal ? (itemData ? itemData.effectiveSeizureCount || 0 : 0) :
              (itemData && itemData.effectiveSeizureCount ? itemData.effectiveSeizureCount.totalCount || 0 : 0) }}</div>
          </div>
          <div class="content-item">
            <div class="item-label">移交公安查获数量：</div>
            <div class="item-value">{{ isPersonal ? (itemData ? itemData.referToPoliceCount || 0 : 0) :
              (itemData && itemData.referToPoliceCount ? itemData.referToPoliceCount.totalCount || 0 : 0) }}</div>
          </div>
          <div class="content-item">
            <div class="item-label">故意隐匿数量：</div>
            <div class="item-value">{{ isPersonal ? (itemData ? itemData.willfulConcealmentCount || 0 : 0) :
              (itemData && itemData.willfulConcealmentCount ? itemData.willfulConcealmentCount.totalCount || 0 : 0) }}</div>
          </div>
        </div>

        <!-- isZhanZhang为true时显示统计表格 -->
        <div v-else>
          <statistic-table :columns="workOutputColumns" :data="stationSiteData" />
        </div>
      </div>
    </eikon-collapse-item>
  </uni-collapse>
</template>

<script>
import EikonCollapseItem from "./eikon-collapse-item.vue";
import SwitchTab from "./switch-tab.vue"
import HRankLine from "@/components/h-rank-line/h-rank-line.vue";
import StatisticTable from "@/components/statistic-table/statistic-table.vue";
import { mapGetters, mapState } from 'vuex'
import { getRankInfo } from '@/api/eikonStatistics/eikonStatistics'
export default {
  name: "WorkOutput",
  components: {
    EikonCollapseItem,
    SwitchTab,
    HRankLine,
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      itemData: state => state.eikonLevel.itemData,
      stationSiteData: state => state.eikonLevel.stationSiteData,
      currentLevel: state => state.eikonLevel.currentLevel,
      currentLevelId: state => state.eikonLevel.currentLevelId,
    }),
    ...mapGetters('eikonLevel', ['isZhanZhang', 'isKeZhang', 'isPersonal', 'isBanZuZhang', 'isJingLi']),
    switchOptions() {
      if (this.isKeZhang) {
        return [
          { value: 'station', label: '全站' },
          { value: 'brigade', label: '本大队' },
        ]
      }
      if (this.isBanZuZhang) {
        return [
          { value: 'station', label: '全站' },
          { value: 'brigade', label: '本大队' },
          { value: 'department', label: '本主管' },
        ]
      }
      if (this.isPersonal) {
        return [
          { value: 'station', label: '全站' },
          { value: 'brigade', label: '本大队' },
          { value: 'department', label: '本主管' },
          { value: 'team', label: '本班' }
        ]
      }

      return []
    },
  },
  data() {
    return {
      // switch-tab配置
      switchValue: 'station',
      // 查获排名百分比
      seizeRankingPercentage: 0,
      // 工作产出表格列配置
      workOutputColumns: [
        {
          title: '统计维度',
          props: 'deptName',
          align: 'left'
        },
        {
          title: '有效查获总数',
          props: 'effectiveSeizureCount',
          align: 'center'
        },
        {
          title: '移交公安总数',
          props: 'policeTotal',
          align: 'center'
        },
        {
          title: '故意隐匿总数',
          props: 'concealTotal',
          align: 'center'
        }
      ],

      extraData: {}
    }
  },
  mounted() {
    this.loadSeizeRankingData(this.switchValue);
  },
  watch: {
    currentLevel(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.loadSeizeRankingData(this.switchValue);
      }
    }
  },
  methods: {
    // switch-tab切换处理
    handleTabChange(event) {
      this.switchValue = event.value;
      // 根据切换的值重新加载查获排名数据
      this.loadSeizeRankingData(event.value);
    },
    // 加载查获排名数据
    loadSeizeRankingData(range) {
      let params = { level: range }
      if (this.isPersonal) {
        params.userId = this.currentLevelId
      } else {
        params.deptId = this.currentLevelId
      }
      getRankInfo(params).then(res => {
        this.extraData = res.data || {};
        // console.log(this.extraData, "this.extraData")
        this.seizeRankingPercentage = this.extraData.rankCount > 0 ? Number((this.extraData.rank / this.extraData.rankCount * 100).toFixed(2)) : 0;

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

/* 查获排名样式 */
.seize-ranking-section {}

.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.ranking-content {
  margin: 33rpx 0;
}

.ranking-title {
  font-size: 26rpx;
  color: #333333;
  font-weight: 500;
}

.progress-text {
  font-size: 26rpx;
  color: #999999;
  line-height: 1.5;
}

.progress-rank {
  font-size: 26rpx;
  font-weight: 500;
  color: #333333;
  line-height: 1.5;
}

.progress-count {
  font-size: 26rpx;
  font-weight: 500;
  color: #999999;
  line-height: 1.5;
}



// .ranking-content {
//   background: #f8f9fa;
//   border-radius: 12rpx;
//   padding: 20rpx;
// }

// /* 查获排名进度条样式 */
// .ranking-progress {
//   margin-top: 20rpx;
//   padding: 20rpx;
//   background: #ffffff;
//   border-radius: 12rpx;

//   .progress-text {
//     font-size: 28rpx;
//     color: #333;
//     font-weight: 500;
//   }
// }</style>