<template>
  <div class="echart">
    <div class="top">
      <img
        class="img"
        width="50"
        src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/Rectangle%20192301712643054648.png"
        alt=""
      />
      <div class="userName">{{ studentInfo.name }}</div>
      <div class="vla">班级： {{ studentInfo.cname }}</div>
      <van-dropdown-menu>
        <van-dropdown-item @change="getClassAva" v-model="year" title="学期" :options="termList" />
      </van-dropdown-menu>
    </div>

    <div class="synthesize" v-if="chartData.length">
      <div class="synthesizeTit">学期综合表现</div>
      <radar ref="radar" :chartData="chartData" :categories="categories" :key="chartData.toString()"></radar>
      <croColumnar
        ref="cro"
        :chartData="croColumnarData"
        :categories="categories"
        :key="croColumnarData.toString() + 'a'"
      ></croColumnar>
    </div>

    <div v-if="chartData.length">
      <div v-for="(i, index) in VeidooList" :key="i.id + 'c'">
        <fieldMap
          :tid="i.id"
          :tit="i.name"
          :userid="userid"
          :classScoreData="classScoreData"
          :claStuNum="claStuNum"
          :year="year"
          :radarData="radarData"
        ></fieldMap>
        <!-- :key="radarData.toString()" -->
      </div>
    </div>
    <div class="noData" v-if="!chartData.length && !chartDataShow">
      暂未评分
    </div>
  </div>
</template>

<script>
import { selectTerm } from '@/api/eva'
import { selectMapStuScore } from '@/api/eva'
import { selectSTEType } from '@/api/eva'
import { selectClaAvaScore } from '@/api/eva'
import { selectStudentDetail } from '@/api/eva'

import radar from './components/radar'
import croColumnar from './components/croColumnar'
import fieldMap from './components/fieldMap'

export default {
  name: 'PblAppExcher',
  components: {
    radar,
    croColumnar,
    fieldMap
  },
  data() {
    return {
      studentInfo: {},

      // 学期列表
      termList: [],
      // 单个班级学生人数
      claStuNum: 0,
      // 班级分数数据
      classScoreData: [],
      classAvaScoreData: [],
      // 雷达图数据
      chartData: [], //数据
      chartDataShow: 0, //数据

      categories: [], //标签    雷达图与平均分共用
      value: '',
      VeidooList: [], //大分类
      VeidooJsonList: [], //小分类

      // 平均分柱状图数据
      croColumnarData: [],
      // 后端获取的数据
      radarData: {},
      year: '',
      // userid: '698ab9e3-4017-11ee-91d8-005056b86db5',
      userid: '',
      oid: '', //学校id
      org: '', //组织id
      cid: ''
    }
  },

  methods: {
    selTerm() {
      this.termList = []
      selectTerm().then(res => {
        // console.log('获取学期筛选框', res[0])
        res[0].forEach(e => {
          if (e.defaultC === 1) {
            this.termData = e.id
            this.year = e.id
          }
          const a = { value: '', text: '' }
          a.value = e.id
          a.text = e.name
          this.termList.push(a)

          // this.getEvidence()
        })
        this.getClassAva()
      })
    },
    // 获取打分数据
    getData() {
      this.chartDataShow = 1
      this.chartData = [] //数据
      this.categories = [] //标签    雷达图与平均分共用

      let params = {
        uid: this.userid,
        year: this.year
      }
      // console.log('params', params)
      selectMapStuScore(params).then(res => {
        // console.log('获取打分数据', res)
        if (!res[0].length) return (this.radarData = {}), (this.chartDataShow = 0)
        let data = res[0][0]
        this.radarData = JSON.parse(data.json)
        this.getVeidooType()
      })
    },
    getUserInfo() {
      const stuData = {
        uid: this.userid
      }
      selectStudentDetail(stuData).then(res => {
        this.studentInfo = res[0][0]
      })
    },
    //获取分类
    getVeidooType() {
      let params = {
        org: this.org,
        oid: this.oid
      }
      selectSTEType(params)
        .then(res => {
          var ftype = res[0] //公共父级分类
          var stype = res[1] //公共子级分类
          var sctype = res[2] //该学校子级分类
          var fctype = res[3] //该学校父级分类
          var fotype = res[4] //组织父级分类
          var sotype = res[5] //组织子级分类
          var allfType = []
          var allsType = []
          if (fotype.length == 0 && sotype.length == 0) {
            if (fctype.length == 0 && sctype.length == 0) {
              for (var i = 0; i < ftype.length; i++) {
                allfType.push(ftype[i])
              }
              for (var i = 0; i < stype.length; i++) {
                allsType.push(stype[[i]])
              }
            } else {
              for (var i = 0; i < fctype.length; i++) {
                allfType.push(fctype[i])
              }
              for (var i = 0; i < sctype.length; i++) {
                allsType.push(sctype[[i]])
              }
            }
          } else {
            for (var i = 0; i < fotype.length; i++) {
              allfType.push(fotype[i])
            }
            for (var i = 0; i < sotype.length; i++) {
              allsType.push(sctysotypepe[[i]])
            }
          }
          var VeidooJson = {}
          for (var i = 0; i < allfType.length; i++) {
            this.ftypeId = allfType[0].id
            if (!VeidooJson[allfType[i].id]) {
              VeidooJson[allfType[i].id] = []
            }
            for (var j = 0; j < allsType.length; j++) {
              if (allfType[i].id == allsType[j].pid) {
                VeidooJson[allfType[i].id].push(allsType[j]) // 去除公共分类
              }
            }
          }

          this.VeidooList = allfType
          this.VeidooJsonList = VeidooJson

          // console.log('  allfType', allfType)
          // console.log('  allsType', allsType)
          // this.$forceUpdate();

          let aaa = []
          // 大分类标签
          allfType.forEach(e => {
            // console.log(e.name);
            aaa.push(e.name)
          })
          // 数据分类底部标签
          this.categories = aaa
          // console.log(this.categories)
          // 处理数据数据
          this.countRadar()
          // console.log(222);

          // 柱状图
          this.countCro()

          // 健康横向柱状图
          // this.healthCro();

          // 健康纵向柱状图
          // this.healthVer(allfType);
        })
        .catch(err => {
          console.error(err)
        })
    },
    countRadar() {
      // 分数数据并进行处理
      // 个人平均分数据开始

      // let raData = JSON.parse(JSON.stringify(this.radarData))
      let raData = this.radarData

      // console.log('raData', raData)
      // console.log('this.VeidooList', this.VeidooList)
      // 分数与分类是两个数组
      // 将分数数据复制在大分类里面用child来存储
      this.VeidooList.forEach(e => {
        // console.log(e);
        let fid = e.id
        e.child = raData[fid]
      })

      // 将每个大分类下的小分类数据提取出来，在大分类下创建一个child2来存储
      this.VeidooList.forEach((e, k) => {
        e.child2 = []
        e.child.forEach((i, index) => {
          e.child2.push(i[i.id])
        })
      })
      // console.log('iiiiiiiiiiiii')

      // 第三次提取，将每个小分类的数据进行相加再除以小分类的长度得到平均值，再将平均值存储在大分类的num中

      this.VeidooList.forEach((e, k) => {
        let stockpile = []
        e.child2.forEach((i, index) => {
          stockpile = this.addArrays(stockpile, i)
        })

        e.num = stockpile.map(item => {
          return (item / e.child2.length).toFixed(1)
        })
      })
      // 个人平均分数据结束

      // 班级平均分数据开始
      // console.log("????", this.classScoreData);
      // 先将每个学生的小分类整理好，放在child里面
      // console.log('this.classScoreData',this.classScoreData);

      this.classScoreData.forEach(i => {
        for (let j in i) {
          i[j].child = []
          // console.log(i[j]);
          for (let k in i[j]) {
            if (k != 'child') {
              i[j].child.push(i[j][k][i[j][k].id])
            }
          }
        }
      })

      // 将学生每个大分类的平均分整合
      this.classScoreData.forEach(i => {
        for (let j in i) {
          // console.log(i[j]);
          let arr = []
          i[j].child2 = []
          i[j].child.forEach(e => {
            arr = this.addArrays(arr, e)
          })
          // console.log(i[j].child);
          i[j].child2 = arr.map(item => {
            return ((item * 1) / i[j].child.length).toFixed(1)
          })
        }
      })
      // console.log(444);

      // 获取学生大分类平均分
      this.classScoreData.forEach(i => {
        i.arr = []
        for (let j in i) {
          if (j != 'arr') {
            let new1 = 0
            new1 = i[j].child2.reduce((pre, cur) => {
              return pre * 1 + cur * 1
            }, 0)
            i.arr.push((new1 / 3).toFixed(1))
          }
        }
      })

      // 获取大分类班级平均数
      let ClaAvaArr = []
      this.classScoreData.forEach(i => {
        ClaAvaArr.push(i.arr)
      })
      console.log('ClaAvaArr', ClaAvaArr)

      let AvaArrItem = []
      ClaAvaArr.forEach((i, index) => {
        AvaArrItem = this.addArrays(AvaArrItem, i)
      })
      AvaArrItem = AvaArrItem.map(item => {
        return (item / this.claStuNum).toFixed(1)
      })
      this.classAvaScoreData = AvaArrItem

      console.log('AvaArr', this.classAvaScoreData)

      // console.log("this.classScoreData", this.classScoreData);

      // 班级平均分数据结束

      // 雷达图数据---- 最后把每个大分类下的num按照，第一次第二次第三次，存储到raDataCopy中，为
      let raDataCopy = [[], [], []]
      // console.log("VeidooList", this.VeidooList);
      this.VeidooList.forEach((e, k) => {
        raDataCopy[0].push(e.num[0])
        raDataCopy[1].push(e.num[1])
        raDataCopy[2].push(e.num[2])
      })
      this.chartData = raDataCopy
      // this.chartDataShow = 0

      // console.log('raDataCopy', raDataCopy)
    },
    // 获取班级平均
    getClassAva() {
      this.chartDataShow = 1

      this.claStuNum = 0
      // 班级分数数据
      // this.classScoreData= []
      this.classScoreData = [] //数据
      let params = {
        cid: this.cid,
        trm: this.year
      }
      // console.log("params", params);
      selectClaAvaScore(params).then(res => {
        this.claStuNum = res[0].length > 0 ? res[0][0].num : 0
        let AvaData = res[0]
        AvaData.forEach((item, index) => {
          this.classScoreData.push(JSON.parse(item.json))
        })
        // console.log('this.classScoreData',this.classScoreData);
        // 第一次渲染，要放在这里，不然没有办法循环班级平均数
        this.getData()

        // console.log("班级平均数据1", this.classScoreData);
      })
    },
    // 柱状图
    countCro() {
      // 平均分数柱状图数据----------
      let croMapData = []
      this.chartData.forEach(e => {
        croMapData = this.addArrays(croMapData, e)
      })
      let _this = this
      this.croColumnarData = croMapData.map(function(item) {
        return (item / _this.chartData.length).toFixed(1)
      })

      let k = [this.croColumnarData, this.classAvaScoreData]

      this.croColumnarData = k
      // console.log('this.croColumnarData', this.croColumnarData)
    },
    // 数组相加
    addArrays(array1, array2) {
      const result = []

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

      return result
    }
  },
  created() {},
  mounted() {
    const url = window.location.href
    const paramRegex = /[?&]([^=#]+)=([^&#]*)/g
    const params = {}
    let match

    while ((match = paramRegex.exec(url)) !== null) {
      const paramName = decodeURIComponent(match[1])
      const paramValue = decodeURIComponent(match[2])
      params[paramName] = paramValue
    }
    // console.log('jaajaj',params)
    this.userid = params.userid
    this.oid = params.oid
    this.org = params.org
    this.cid = params.cid

    this.selTerm()
    this.getUserInfo()
  }
}
</script>

<style lang="scss" scoped>
.echart {
  box-sizing: border-box;
  padding: 15px;
  min-height: 100vh;
  background-image: linear-gradient(to bottom, #005ccd 8vh, #00c6fb 25vh, #f6f5f8 30vh);
}
// /deep/ .van-dropdown-item__content {
//   left: 50%;
//   width: 320px;
//   transform: translate(-50%, 0px);
// }
.top {
  height: 25vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #fff;
  .img {
    margin: 0 auto;
  }
  .userName {
    font-size: 16px;
    padding: 6px 0;
  }
  .vla {
    padding-bottom: 10px;
  }
}
.synthesize {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  background-color: #fff;
  // box-shadow: 0 0 5px 0px #ccc;
  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;
  }
}
.noData {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: bold;
}
/deep/.van-dropdown-menu__bar {
  box-shadow: none;
  // background: none;
  border-radius: 10px;
  height: 1rem;
}

/deep/ .van-dropdown-item__content {
  border-radius: 0 0 10px 10px;
}
// /deep/ .van-overlay {
//   box-sizing: border-box;
// }

/deep/ .van-ellipsis {
  font-size: 14px;
  // color: #fff;
  font-size: 16px;
}
/deep/ .van-dropdown-menu__title::after {
  border-color: transparent transparent #000 #000;
  opacity: 0.5;
}
/deep/ .van-dropdown-menu__title--active::after {
  border-color: transparent transparent currentColor currentColor;
}
/deep/ .van-cell__title,
.van-cell__value {
  font-weight: normal;
}

/deep/ .van-dropdown-item__option--active .van-dropdown-item__icon {
  color: #3b84fc;
}
/deep/ .van-dropdown-item__option--active {
  color: #3b84fc;
}
/deep/ .van-dropdown-menu__title {
  padding-left: 0;
}
/deep/ .van-dropdown-menu__title--active {
  color: #3b84fc;
}
</style>
