<template>
  <!-- 健康的 -->
  <div>
    <div class="synthesize">
      <div class="synthesizeTit">{{ tit }}领域综合表现</div>
      <verColumnar
        ref="cro"
        :verChartData="croData"
        :verCategories="bomCategories"
        :key="croData.toString() + 'b'"
      ></verColumnar>
      <croColumnar ref="cro" :chartData="verData" :categories="bomCategories" :key="verData.toString()"></croColumnar>

      <div class="FTit" v-if="fieldEvidence.length">
        关键证据:
      </div>
      <div class="proofCell" v-for="(i, index) in fieldEvidence">
        {{ i.recordDate }}-{{ i.recordTit }}-观察笔记
      </div>
    </div>
  </div>
</template>

<script>



import { selectHealthRecord } from '@/api/eva'

import croColumnar from './croColumnar'
import verColumnar from './verColumnar'
// import popTable from "./popTable";
// import { number } from "echarts";
export default {
  components: {
    croColumnar,
    verColumnar
  },
  props: {
    tit: {
      type: String,
      default: ''
    },
    tid: {
      type: String,  //大分类id
      default: ''
    },
    radarData: {
      type: Object,
      default: () => {}
    },
    classScoreData: {
      type: Array,
      default: () => []
    },
    claStuNum: {
      type: Number,
      default: 0
    },
    userid: {
      type: String,
      default: ''
    },
    year: {
      type: String,
      default: ''
    },
   
  },
  data() {
    return {
      proofIsShow: false,
      dialogVisible: false,
      croData: [],
      verData: [],
      bomCategories: [],
      fieldEvidence: []
    }
  },
  watch: {
    radarData(newVal, oldVal) {
      this.CroMap()
      this.verMap()
      // this.getEvidence();
    }
  },
  mounted() {
    // console.log(this.radarData);
    this.CroMap()
    this.verMap()
    this.getEvidence();
  },
  methods: {
    proofJudge() {
      this.proofIsShow = true
      this.dialogVisible = true
    },
    // proofBtn() {

    // },
    handleClose() {
      this.dialogVisible = false
      this.proofIsShow = false
    },
    // 获取关键证据数据
    getEvidence() {
      // this.isLoading = true;
      let params = {
        uid: this.userid,
        year: this.year,
        txt: this.tid,
        page: 1
      }

      selectHealthRecord(params).then(res => {
        this.fieldEvidence = res[0]
      }) //
    },
    // 横向柱状图
    CroMap() {
      // console.log(this.classScoreData);
      // console.log(this.tid);

      this.bomCategories = []
      let raData = this.radarData
      let healthData = raData[this.tid]
      healthData.forEach(e => {
        this.bomCategories.push(e.sname)
      })

      let croMapData = []
      healthData.forEach(e => {
        croMapData.push(e[e.id])
      })
      // console.log("croMapData", croMapData);

      this.croData = this.combineArrays(croMapData)
      // console.log("this.croData",this.croData);
    },
    // 纵向柱状图
    verMap() {
      // 班级平均数据开始
      let newArr = []
      this.classScoreData.forEach(e => {
        for (let i in e) {
          if (i == this.tid) {
            newArr.push(e[i])
          }
        }
      })
      // console.log(newArr);
      // 整合学生小分类数据
      let AvaArr = []
      newArr.forEach(e => {
        AvaArr.push(e.child)
      })

      let AvaArr2 = []
      AvaArr2 = this.combineArrays(AvaArr)
      let _that = this

      let att = []
      AvaArr2.forEach((e, index) => {
        att[index] = []
        e.forEach(k => {
          att[index] = _that.addArrays(att[index], k)
        })
      })
      // console.log("AvaArr", AvaArr);

      let lastData = []
      att.forEach((e, index) => {
        let k = 0
        k = e.reduce((per, cur) => {
          return per + cur
        }, 0)
        lastData.push(((k / 3 / this.claStuNum) * 1).toFixed(1))
      })
      // console.log("lastData", lastData);
      // 班级平均数据结束

      let raData = this.radarData
      let healthData = raData[this.tid]
      let croMapData = []
      healthData.forEach(e => {
        croMapData.push(e[e.id])
      })
      //   console.log("croMapData", croMapData);
      let app = []
      croMapData.forEach(e => {
        let a = e.reduce((pre, next, index) => {
          return pre + next
          //pre+next=10+5=15
        }, 0)
        app.push(a)
      })
      //   console.log(app);
      this.verData = app.map(e => {
        return (e / 3).toFixed(1)
      })
      this.verData = [this.verData, lastData]
      // console.log("this.verData", this.verData);
      // this.healthCroData = this.combineArrays(croMapData);
    },
    // 数据相同下标相加组成一个新数组
    combineArrays(arrays) {
      const result = []

      // 获取数组中的最大长度
      const maxLength = Math.max(...arrays.map(arr => arr.length))

      // 遍历每个下标
      for (let i = 0; i < maxLength; i++) {
        const combinedItem = []

        // 遍历每个数组
        for (let j = 0; j < arrays.length; j++) {
          const array = arrays[j]

          // 检查当前下标是否存在于数组中
          if (i < array.length) {
            const item = array[i]

            // 将当前下标的字段添加到组合数组中
            combinedItem.push(item)
          }
        }

        // 将组合数组添加到结果数组中
        result.push(combinedItem)
      }

      return result
    },

    // 数组相加
    addArrays(array1, array2) {
      const result = []

      for (let i = 0; i < array2.length; i++) {
        const sum = (array1[i] || 0) + array2[i]
        result.push(sum)
      }

      return result
    }
  }
}
</script>

<style scoped lang="scss">
.synthesize {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  background-color: #fff;
  margin: 10px 0;
  border-radius: 10px;
  .synthesizeTit {
    font-size: 16px;
    font-weight: bold;
    border-left: 3px #3681fc solid;
    padding-left: 10px;
    display: flex;
    align-items: center;
  }
}
.FTit{
  font-size: 16px;
  font-weight: bold;
}

.proofCell {
  width: 100%;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
  border-radius: 8px;
  background: var(--bg, #f0f2f5);
}
.content {
  width: 100%;
  height: 553px;
  flex-shrink: 0;
  border-radius: 16px;
  border: 1px solid var(--bg3, #e7e7e7);
  background: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.conTitle {
  width: 70%;
  margin: 20px auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.txt {
  flex: 1;
  width: 712px;
  height: 40px;
  line-height: 40px;
  flex-shrink: 0;
  border-radius: 4px;
  background: #f0f2f5;
  margin-left: 5px;
  box-sizing: border-box;
  padding: 0 15px;
}
.radarCss {
  width: 45%;
  height: 400px;
}
.proofCss {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.9);
  font-family: 'Microsoft YaHei';
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.7px;
  margin-right: 20px;
}
.proofCss2 {
  cursor: pointer;
  width: 200px;
  text-align: left;
  box-sizing: border-box;
  padding: 4px 20px;
  color: rgba(0, 0, 0, 0.9);
  background-color: #f0f2f5;
  font-family: 'Microsoft YaHei';
  border-radius: 3px;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.7px;
  margin-right: 20px;
}
.proofCells {
  width: 600px;

  /* background-color: aqua; */
  display: flex;
  flex-wrap: wrap;
}

</style>
