<template>
  <div v-if="details._comments">
    <div class="column" v-if="details._comments.start">
      <div class="column-title">出手分析</div>
      <div class="column-con">
        <div class="item" v-if="details._comments.start">
          <div class="item-title">出手动作
            <i v-if="details._comments.start.level == 0" class="cha">差</i>
            <i v-if="details._comments.start.level == 1" class="liang">良</i>
            <i v-if="details._comments.start.level == 2" class="you">优</i>
          </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/qq_csdz.png" />
            </div>
            <div class="item-con-li">
              <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
              <video :src="details._comments.start.imgurl" :poster="details._comments.start.imgurl + '?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">
                {{typeKeyObj[query.exam_name].height_start.textNU }}
              </div>
              <div class="item-con-li-con">
                <div class="item-con-li-con-val">
                  <div class="item-con-li-con-val-li">
                    <div class="item-con-li-con-val-li-name1">您的动作值</div>
                    <div  class="item-con-li-con-val-li-con">{{ Number(details.height_start/100).toFixed(2) }}{{
                      typeKeyObj[query.exam_name].height_start.unit }}</div>
                  </div>
                  <div class="item-con-li-con-val-li">
                    <div class="item-con-li-con-val-li-name2">建议动作值</div>
                    <div class="item-con-li-con-val-li-con">{{ typeKeyObj[query.exam_name].height_start.standard }}{{
                        typeKeyObj[query.exam_name].height_start.unit }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{typeKeyObj[query.exam_name].angle_throw.textNU }}
              </div>
              <div class="item-con-li-con">
                <div class="item-con-li-con-val">
                  <div class="item-con-li-con-val-li">
                    <div class="item-con-li-con-val-li-name1">您的动作值</div>
                    <div  class="item-con-li-con-val-li-con">{{ details.angle_throw }}{{
                      typeKeyObj[query.exam_name].angle_throw.unit }}</div>
                  </div>
                  <div class="item-con-li-con-val-li">
                    <div class="item-con-li-con-val-li-name2">建议动作值</div>
                    <div class="item-con-li-con-val-li-con">{{ typeKeyObj[query.exam_name].angle_throw.standard }}{{
                        typeKeyObj[query.exam_name].angle_throw.unit }}</div>
                  </div>
                </div>
              </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.start.comments }}</div>
                <div v-html="details._comments.start.note"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="column" v-if="details._comments.speed">
      <div class="column-title">投掷分析</div>
      <div class="column-con">
        <div class="item" v-if="details._comments.speed">
          <div class="item-title">球速度
            <i v-if="details._comments.speed.level == 0" class="cha">差</i>
            <i v-if="details._comments.speed.level == 1" class="liang">良</i>
            <i v-if="details._comments.speed.level == 2" class="you">优</i>
          </div>
          <div class="item-con">
            <div class="item-con-li">
              <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
              <img class="bigImg" :src="details._comments.speed.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{typeKeyObj[query.exam_name].velocity_start.textNU }}
              </div>
              <div class="item-con-li-con">
                <div class="item-con-li-con-val">
                  <div class="item-con-li-con-val-li">
                    <div class="item-con-li-con-val-li-name1">您的动作值</div>
                    <div  class="item-con-li-con-val-li-con">{{ Number(details.velocity_start).toFixed(2) }}{{
                      typeKeyObj[query.exam_name].velocity_start.unit }}</div>
                  </div>
                  <div class="item-con-li-con-val-li">
                    <div class="item-con-li-con-val-li-name2">建议动作值</div>
                    <div class="item-con-li-con-val-li-con">{{ typeKeyObj[query.exam_name].velocity_start.standard }}{{
                        typeKeyObj[query.exam_name].velocity_start.unit }}</div>
                  </div>
                </div>
              </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.speed.comments }}</div>
                <div v-html="details._comments.speed.note"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="column" v-if="details.video_url">
      <div class="column-title">测评视频</div>
      <div>
        <video :src="details.video_url" :poster="details.video_url.replace('  ','') + '?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/shotput.mp4" poster="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/shotput.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 dataDictionary from "@/utils/dataDictionary"
const route = useRoute();
const dic: any = dataDictionary;

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

const data = reactive<any>({
  details:{},
  query: {},
  typeKeyObj :{}
});
const { details,query,typeKeyObj } = toRefs(data);

onBeforeMount(() => {
  typeKeyObj.value = dic.typeKeyObj;
  query.value = route.query;
  details.value = JSON.parse(JSON.stringify(props.detailsData));
})
</script>

<style lang="scss" scoped>
</style>
