<template>
  <div>
    <div class="column" v-if="details.image_url">
      <div class="column-title">冲线动作</div>
      <div class="column-con">
        <div class="item" v-if="details.image_url">
          <div class="item-title">冲线截图 </div>
          <div class="item-con">
            <img class="bigImg" :src="details.image_url" />
          </div>
        </div>
      </div>
    </div>
    <div class="column" v-if="details.recommends">
      <div class="column-title">提升建议</div>
      <div class="column-con">
        <div class="item">
          <div class="item-con">{{ details.recommends }}</div>
        </div>
      </div>
    </div>
    <div class="column" v-if="details.video_url">
      <div class="column-title">测评视频</div>
      <div>
        <video style="width: 100%; object-fit: fill" :poster="details.video_url.replace('  ', '') +
          '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'
          " :src="details.video_url" :controls="true">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
    <div class="column" v-if="video">
      <div class="column-title">示范视频</div>
      <div>
        <video :src="video" :poster="video + '?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 props = defineProps({
  detailsData: {
    type: Object,
    default: {}
  },
});

const data = reactive<any>({
  details: {},
  query: {},
  typeList: [],
  speedList: [],
  strideList: [],
  stepsList: [],
  fullAvgRateList: [],
  video: ""
});
const { details, query, typeList, speedList, strideList, stepsList, fullAvgRateList, video } = toRefs(data);

//速度曲线
const speedChart = () => {
  let myChart = echarts.init(document.getElementById("speedChart"));
  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.speed_distribution
      },
      {
        name: '全程平均速度',
        type: 'line',
        lineStyle: {
          type: 'dashed'
        },
        data: speedList.value
      },
      {
        name: '满分平均速度',
        type: 'line',
        lineStyle: {
          type: 'dashed'
        },
        data: fullAvgRateList.value
      },
    ]
  };
  // 窗口大小自适应方案
  myChart.setOption(option);
  setTimeout(function () {
    window.onresize = function () {
      myChart.resize();
    };
  }, 200);
};

//步幅曲线
const strideChart = () => {
  let myChart = echarts.init(document.getElementById("strideChart"));
  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: "#ffe6e0"
        },
        data: details.value.stride_distribution
      },
      {
        name: '全程平均步幅',
        type: 'line',
        lineStyle: {
          type: 'dashed'
        },
        data: strideList.value
      },
    ]
  };
  // 窗口大小自适应方案
  myChart.setOption(option);
  setTimeout(function () {
    window.onresize = function () {
      myChart.resize();
    };
  }, 200);
};

//步频曲线
const stepsChart = () => {
  let myChart = echarts.init(document.getElementById("stepsChart"));
  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: "#fff5e6"
        },
        data: details.value.steps_distribution
      },
      {
        name: '全程平均步频',
        type: 'line',
        lineStyle: {
          type: 'dashed'
        },
        data: stepsList.value
      },
    ]
  };
  // 窗口大小自适应方案
  myChart.setOption(option);
  setTimeout(function () {
    window.onresize = function () {
      myChart.resize();
    };
  }, 200);
};

//初始化
const getInitialize = () => {
  let typeLists = [];
  let speedLists = [];
  let strideLists = [];
  let stepsLists = [];
  let fullAvgRateLists = [];
  let strideSum = details.value.stride_distribution.reduce((a:any, b:any) => {
    return a + b;
  }, 0);
  let stepsSum = details.value.steps_distribution.reduce((a:any, b:any) => {
    return a + b;
  }, 0);
  let num: any = null;
  if (query.value.exam_name == 'runa800') {
    num = 8
  }
  if (query.value.exam_name == 'runa1000') {
    num = 10
  }
  let strideAverage: any = 0;
  let stepsAverage: any = 0;
  strideAverage = (strideSum / num).toFixed(1);
  stepsAverage = (stepsSum / num).toFixed(1);
  for (let i = 1; i <= num; i++) {
    typeLists.push(i * 100)
    speedLists.push(details.value.speed)
    strideLists.push(strideAverage)
    stepsLists.push(stepsAverage)
    fullAvgRateLists.push(details.value.full_avg_rate)
  }
  typeList.value = typeLists;
  speedList.value = speedLists;
  strideList.value = strideLists;
  stepsList.value = stepsLists;
  fullAvgRateList.value = fullAvgRateLists;
};

onBeforeMount(() => {
  query.value = route.query;
  details.value = JSON.parse(JSON.stringify(props.detailsData));
  // if (['runa800', 'runa1000', 'runwb800', 'runwb1000'].includes(query.value.exam_name)) {
	// 	getInitialize();
	// }
  if (['run800', 'run1000', 'runa800', 'runa1000', 'runwb800', 'runwb1000'].includes(query.value.exam_name)) {
			video.value = "http://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/run800.mp4";
	}
	if (['run50', 'run60', 'run70', 'run100', 'run200', 'run400'].includes(query.value.exam_name)) {
			video.value = "http://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/run50.mp4";
	}
})

onMounted(() => {
  // speedChart();
  // strideChart();
  // stepsChart();
})
</script>

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