<template>
  <div>
    <div class="column" v-if="details._comments.power">
      <div class="column-title">成绩曲线</div>
      <div class="column-con">
        <div class="item">
          <div class="item-title">发力
            <i v-if="details._comments.power.level == 0" class="cha">差</i>
            <i v-if="details._comments.power.level == 1" class="liang">良</i>
            <i v-if="details._comments.power.level == 2" class="you">优</i>
          </div>
          <div class="item-con">
            <div class="item-con-li">
              <!--图表开始-->
              <div class="chartBox" id="faliChart" ref="echartsRef"></div>
              <!--图表结束-->
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                发力点评
              </div>
              <div class="item-con-li-con">
                <div class="item-con-li-con-strong">{{ details._comments.power.comments }}</div>
                <div v-html="details._comments.power.note"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="column" v-if="details.foul.elbow || details.foul.hip || details.foul.height">
      <div class="column-title">犯规动作</div>
      <div class="column-con">
        <div class="item" v-if="details.foul.elbow">
          <div class="item-title">手部犯规
          </div>
          <div class="item-con">
            <div class="item-con-li">
              <span class="item-con-li-label item-con-li-label-bg1">标准动作</span>
              <img class="bigImg" src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yt_hand.png" />
            </div>
            <div class="item-con-li" v-if="details.foul.elbow.urls.length">
              <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
              <video :src="item" v-for="(item, index) in details.foul.elbow.urls" :key="index"
                :poster="item + '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'" :controls="true">
                您的浏览器不支持 video 标签。
              </video>
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                动作点评
              </div>
              <div class="item-con-li-con">
                <div class="item-con-li-con-strong">{{ details.foul.elbow.comments }}</div>
                <div v-html="details.foul.elbow.note"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="item" v-if="details.foul.hip">
          <div class="item-title">臀部犯规
          </div>
          <div class="item-con">
            <div class="item-con-li">
              <span class="item-con-li-label item-con-li-label-bg1">标准动作</span>
              <img class="bigImg" src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yt_hip.png" />
            </div>
            <div class="item-con-li" v-if="details.foul.hip.urls.length">
              <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
              <video :src="item" v-for="(item, index) in details.foul.hip.urls" :key="index"
                :poster="item + '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'" :controls="true">
                您的浏览器不支持 video 标签。
              </video>
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                动作点评
              </div>
              <div class="item-con-li-con">
                <div class="item-con-li-con-strong">{{ details.foul.hip.comments }}</div>
                <div v-html="details.foul.hip.note"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="item" v-if="details.foul.height">
          <div class="item-title">下颌犯规
          </div>
          <div class="item-con">
            <div class="item-con-li">
              <span class="item-con-li-label item-con-li-label-bg1">标准动作</span>
              <img class="bigImg" src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pictures/yt_height.png" />
            </div>
            <div class="item-con-li" v-if="details.foul.height.urls.length">
              <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
              <video :src="item" v-for="(item, index) in details.foul.height.urls" :key="index"
                :poster="item + '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'" :controls="true">
                您的浏览器不支持 video 标签。
              </video>
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                动作点评
              </div>
              <div class="item-con-li-con">
                <div class="item-con-li-con-strong">{{ details.foul.height.comments }}</div>
                <div v-html="details.foul.height.note"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="column" v-if="details.video_url">
      <div class="column-title">测评视频</div>
      <div>
        <video :src="item" v-for="(item, index) in details.videoList" :key="index"
          :poster="item + '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'" :controls="true">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
    <div class="column">
      <div class="column-title">示范视频</div>
      <div>
        <video src="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pullup.mp4"
          poster="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pullup.mp4?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto"
          :controls="true">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
const route = useRoute();
const echartsRef = ref(null);

//父值
const props = defineProps({
  detailsData: {
    type: Object,
    default: {}
  },
});

const data = reactive<any>({
  details: {},
  query: {},
  typeList: [],
  failedList: [],
  fullAvgRateList: [],
  averageScoreList: [],
  lowSpeedList: [],
  violationList: [],
});
const { details, query, typeList, failedList, fullAvgRateList,averageScoreList, lowSpeedList,violationList } = toRefs(data);

//成绩曲线
const faliChart = () => {
  // let myChart = echarts.init(document.getElementById("faliChart"));
  const myChart = echarts.init(echartsRef.value);
      let option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['速度曲线', '您的平均速度', '满分平均速度', '低速区', '违规个数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: typeList.value
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '速度曲线',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {
              color: "#e6fafa"
            },
            data: details.value.count_distribution
          },
          {
            name: '您的平均速度',
            type: 'line',
            lineStyle: {
              type: 'dashed'
            },
            data: averageScoreList.value
          },
          {
            name: '满分平均速度',
            type: 'line',
            lineStyle: {
              type: 'dashed'
            },
            data: fullAvgRateList.value
          },
          {
            name: '低速区',
            type: 'line',
            lineStyle: {
              type: 'dashed'
            },
            areaStyle: {
              color: "#ffdad1"
            },
            data: lowSpeedList.value
          },
          {
            name: '违规个数',
            type: 'line',
            lineStyle: {
              type: 'dashed'
            },
            data: violationList.value
          },
        ]
      };
      // 窗口大小自适应方案
      myChart.setOption(option);
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize();
        };
      }, 200);
};

onBeforeMount(() => {
  query.value = route.query;
  details.value = JSON.parse(JSON.stringify(props.detailsData));
  let videoList = details.value.video_url.split("  ").filter((item: any) => {
    return item;
  });
  details.value.videoList = videoList
  let typeLists = [];
    let fullAvgRateLists = [];
    let averageScoreLists = [];
    let lowSpeedLists = [];
    let violationLists = details.value.all_failed_num_distribution;
    let mySum = details.value.count_distribution.reduce((a:any, b:any) => {
      return a + b;
    }, 0);
    let num = details.value.count_distribution.length;
    let averageScore = (mySum / num).toFixed(2);
    for (let i = 1; i <= num; i++) {
      typeLists.push(i * 10)
      fullAvgRateLists.push(details.value.full_avg_rate)
      averageScoreLists.push(averageScore)
      lowSpeedLists.push(2)
    }
    typeList.value = typeLists;
    fullAvgRateList.value = fullAvgRateLists;
    averageScoreList.value = averageScoreLists;
    lowSpeedList.value = lowSpeedLists;
    violationList.value = violationLists;
})

onMounted(() => {
  faliChart();
})
</script>

<style lang="scss" scoped>
.chartBox {
  width: 100%;
  height: 38vh;
}
</style>
