<template>
  <TrainChunkBox title="训练成绩统计">
    <div class="water-chart-box">
      <WaterPolo
        :duration="item.duration"
        :percent="item.score"
        :color="['#1890ff', '#208ac6','#2fc25b', '#facc14'][i]"
        :userInfo="item.userInfo"
        v-for="(item, i) in showGroupData"
        :key="i"
      ></WaterPolo>
    </div>
    <!-- <waterPolo :percent="30"></waterPolo> -->
  </TrainChunkBox>
</template>

<script>
import { getScoreApi } from '@/api/training/train-evealuation'
import TrainChunkBox from '@/views/training/training/components/train-chunk-box.vue'
import WaterPolo from './WaterPolo.vue'
export default {
  components: { TrainChunkBox, WaterPolo },
  props: {
    trainId: {
      type: Number,
      required: true
    },
    checkedGroup: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      allData: []
    }
  },
  methods: {
    async getScore (id) {
      const { data } = await getScoreApi(id)
      this.allData = data
    },
    init () {}
  },
  watch: {
    trainId () {
      this.getScore(this.trainId)
    },
  },
  computed: {
    showGroupData () {
      return this.allData.filter((item) => {
        return item.settingInfo.group === +this.checkedGroup
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.water-chart-box {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
</style>
