<template>
  <div>
    <!-- <div style="width: 95%; height: 250px; margin: 0 auto">
      <img src="../../assets/dataimage/1.png" style="width:90%" />
      <div
        id="charts_canvas"
        class="echart"
        style="width: 100%; height: 100%"
      ></div>
    </div> -->
    <div class="scoreBox" v-if="isSortArray && isSortArray.length">
      <div class="scoreLeft" v-if="isSortArray && isSortArray.length">
        <div v-if="isSortArray.length > 1">
          <el-tooltip
            effect="light"
            :content="`${isSortArray[1].name} - ${isSortArray[1].value}`"
            placement="top"
          >
            <span>{{ isSortArray[1].name }}</span>
          </el-tooltip>
        </div>
        <div>
          <el-tooltip
            effect="light"
            :content="`${isSortArray[0].name} - ${isSortArray[0].value}`"
            placement="top"
          >
            <span>{{ isSortArray[0].name }}</span>
          </el-tooltip>
        </div>
        <div v-if="isSortArray.length > 2">
          <el-tooltip
            effect="light"
            :content="`${isSortArray[2].name} - ${isSortArray[2].value}`"
            placement="top"
          >
            <span>{{ isSortArray[2].name }}</span>
          </el-tooltip>
        </div>
      </div>
      <div class="scoreRight" v-if="lastArray && lastArray.length">
        <div
          v-for="(item, index) in lastArray"
          :key="index"
          class="scoreRightItem"
        >
          <div>
            {{ index + 4 }}
          </div>
          <el-tooltip
            effect="light"
            :content="`${item.name} - ${item.value}`"
            placement="top"
          >
            <div>{{ item.name }}</div>
          </el-tooltip>
          <div>{{ item.value }}</div>
        </div>
      </div>
    </div>
    <div v-else>暂无课程评价评分</div>
  </div>
</template>

<script>
export default {
  props: ["courseArray"],
  data() {
    return {
      // chartObj: null,
      // option: {
      //   xAxis: {
      //     type: "category",
      //     data: [],
      //     axisLabel: {
      //       interval: 0, //使x轴文字显示全
      //       formatter: function (params) {
      //         let newParamsName = "";
      //         var paramsNameNumber = params.length; // 文字总长度
      //         var provideNumber = 4; //一行显示几个字
      //         var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
      //         if (paramsNameNumber > provideNumber) {
      //           for (let p = 0; p < rowNumber; p++) {
      //             var start = p * provideNumber;
      //             var end = start + provideNumber;
      //             var tempStr =
      //               p === rowNumber - 1
      //                 ? params.substring(start, paramsNameNumber)
      //                 : params.substring(start, end) + "\n";
      //             newParamsName += tempStr;
      //           }
      //         } else {
      //           newParamsName = params;
      //         }
      //         return newParamsName;
      //       },
      //     },
      //   },
      //   yAxis: {
      //     type: "value",
      //   },
      //   grid: {
      //     top: 10,
      //     bottom: 80,
      //     left: 50,
      //     right: 50
      //   },
      //   series: [
      //     {
      //       data: [],
      //       type: "line",
      //     },
      //   ],
      // },
      isSortArray: [],
      lastArray: [],
    };
  },
  methods: {
    getInfo() {
      if (this.courseArray && this.courseArray[0]) {
        this.setJp();
      }
    },
    setJp() {
      var sortedArray = [...this.courseArray];
      var sortedArray1 = [...this.courseArray];
      this.isSortArray = sortedArray.slice(0, 3);
      this.lastArray = sortedArray1.splice(
        3,
        Infinity,
        ...sortedArray1.slice(4, sortedArray1.length)
      );
    },
    // setChart() {
    //   // 雷达图显示的标签
    //   let newPromise = new Promise((resolve) => {
    //     resolve();
    //   });
    //   //然后异步执行echarts的初始化函数
    //   newPromise.then(() => {
    //     const chartObj = this.$echarts.init(
    //       //劳动课程
    //       this.$el.querySelector("#charts_canvas")
    //       //   document.getElementById("#charts_canvas")
    //     );
    //     this.option.series[0].data = this.courseArray[0].array;
    //     this.option.xAxis.data = this.courseArray[0].xArray;
    //     // 初始化雷达图
    //     this.chartObj = chartObj;
    //     this.chartObj.setOption(this.option);
    //   });
    //   let _this = this;
    //   window.addEventListener("resize", () => {
    //     if (_this.chartObj) {
    //       _this.chartObj.resize();
    //     }
    //   });
    // },
  },
  watch: {
    courseArray: {
      handler: function (newVal, oldVal) {
        this.getInfo();
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getInfo();
    });
  },
};
</script>

<style scoped>
.scoreBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
}
.scoreLeft {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  margin-right: 15px;
}
.scoreLeft > div {
  width: 40px;
  margin-right: 10px;
  padding: 10px 0;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  writing-mode: vertical-lr;
}
.scoreLeft > div > span {
  writing-mode: vertical-lr;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 70px;
}
.scoreLeft > div:nth-child(1) {
  background: #f9c56c;
}
.scoreLeft > div:nth-child(2) {
  background: #6ba9df;
}
.scoreLeft > div:nth-child(3) {
  background: #e78686;
}
.scoreLeft > div:nth-child(2) > span {
  height: 90px;
}
.scoreLeft > div:nth-child(3) > span {
  height: 50px;
}
.scoreRight > .scoreRightItem:not(:last-child) {
  margin-bottom: 10px;
}
.scoreRightItem {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
}
.scoreRightItem > div:not(:last-child) {
  margin-right: 10px;
}
.scoreRightItem > div:nth-child(1) {
  background: #4472c4;
  border: 1px solid #345a9c;
  color: #fff;
  border-radius: 50%;
  min-width: 20px;
  min-height: 20px;
  line-height: 20px;
  text-align: center;
}
.scoreRightItem > div:nth-child(2) {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  cursor: pointer;
}
</style>