<template>
  <div v-if="details._comments">
    <div class="column" v-if="details._comments.arm_front_angle || details._comments.arm_back_angle">
      <div class="column-title">摆臂分析</div>
      <div class="column-con">
        <div class="item" v-if="details._comments.arm_front_angle">
          <div class="item-title">前摆
            <i v-if="details._comments.arm_front_angle.level == 0" class="cha">差</i>
            <i v-if="details._comments.arm_front_angle.level == 1" class="liang">良</i>
            <i v-if="details._comments.arm_front_angle.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/ld_forward.png" />
            </div>
            <div class="item-con-li">
              <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
              <img class="bigImg" :src="details._comments.arm_front_angle.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{typeKeyObj[query.exam_name].arm_front_angle.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"><span v-if="details.arm_front_angle">{{ Number(details.arm_front_angle).toFixed(0) }}</span><span v-else>{{details.arm_front_angle}}</span>{{
                      typeKeyObj[query.exam_name].arm_front_angle.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].arm_front_angle.standard }}{{
                        typeKeyObj[query.exam_name].arm_front_angle.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.arm_front_angle.comments }}</div>
                <div>{{ details._comments.arm_front_angle.note }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" v-if="details._comments.arm_back_angle">
          <div class="item-title">后摆
            <i v-if="details._comments.arm_back_angle.level == 0" class="cha">差</i>
            <i v-if="details._comments.arm_back_angle.level == 1" class="liang">良</i>
            <i v-if="details._comments.arm_back_angle.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/ld_backswing.png" />
            </div>
            <div class="item-con-li">
              <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
              <img class="bigImg" :src="details._comments.arm_back_angle.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{typeKeyObj[query.exam_name].arm_back_angle.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" ><span v-if="details.arm_back_angle">{{ Number(details.arm_back_angle).toFixed(0) }}</span><span v-else>{{details.arm_back_angle}}</span>{{
                      typeKeyObj[query.exam_name].arm_back_angle.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].arm_back_angle.standard }}{{
                        typeKeyObj[query.exam_name].arm_back_angle.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.arm_back_angle.comments }}</div>
                <div v-html="details._comments.arm_back_angle.note"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="column" v-if="details._comments.knee_angle || details._comments.jump_angle">
      <div class="column-title">起跳分析</div>
      <div class="column-con">
        <div class="item" v-if="details._comments.knee_angle">
          <div class="item-title">屈膝姿势
            <i v-if="details._comments.knee_angle.level == 0" class="cha">差</i>
            <i v-if="details._comments.knee_angle.level == 1" class="liang">良</i>
            <i v-if="details._comments.knee_angle.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/ld_knee.png" />
            </div>
            <div class="item-con-li">
              <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
              <img class="bigImg" :src="details._comments.knee_angle.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{typeKeyObj[query.exam_name].knee_angle.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"><span v-if="details.knee_angle">{{ Number(details.knee_angle).toFixed(0) }}</span><span v-else>{{details.knee_angle}}</span>{{
                      typeKeyObj[query.exam_name].knee_angle.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].knee_angle.standard }}{{
                        typeKeyObj[query.exam_name].knee_angle.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.knee_angle.comments }}</div>
                <div v-html="details._comments.knee_angle.note"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" v-if="details._comments.jump_angle">
          <div class="item-title">起跳角度
            <i v-if="details._comments.jump_angle.level == 0" class="cha">差</i>
            <i v-if="details._comments.jump_angle.level == 1" class="liang">良</i>
            <i v-if="details._comments.jump_angle.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/ld_jump.png" />
            </div>
            <div class="item-con-li">
              <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
              <img class="bigImg" :src="details._comments.jump_angle.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{typeKeyObj[query.exam_name].jump_angle.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"><span v-if="details.jump_angle">{{ Number(details.jump_angle).toFixed(0) }}</span><span v-else>{{details.jump_angle}}</span>{{
                      typeKeyObj[query.exam_name].jump_angle.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].jump_angle.standard }}{{
                        typeKeyObj[query.exam_name].jump_angle.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.jump_angle.comments }}</div>
                <div v-html="details._comments.jump_angle.note"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="column" v-if="details._comments.height || details._comments.hip_angle">
      <div class="column-title">腾空分析</div>
      <div class="column-con">
        <div class="item" v-if="details._comments.height">
          <div class="item-title">腾空
            <i v-if="details._comments.height.level == 0" class="cha">差</i>
            <i v-if="details._comments.height.level == 1" class="liang">良</i>
            <i v-if="details._comments.height.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/ld_vacated.png" />
            </div>
            <div class="item-con-li">
              <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
              <img class="bigImg" :src="details._comments.height.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{typeKeyObj[query.exam_name].height.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"><span v-if="details.height">{{ Number(details.height).toFixed(0) }}</span><span v-else>{{details.height}}</span>{{
                      typeKeyObj[query.exam_name].height.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.standard }}{{
                        typeKeyObj[query.exam_name].height.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.height.comments }}</div>
                <div>{{ details._comments.height.note }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" v-if="details._comments.hip_angle">
          <div class="item-title">收腿幅度
            <i v-if="details._comments.hip_angle.level == 0" class="cha">差</i>
            <i v-if="details._comments.hip_angle.level == 1" class="liang">良</i>
            <i v-if="details._comments.hip_angle.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/ld_legtucking.png" />
            </div>
            <div class="item-con-li">
              <span class="item-con-li-label item-con-li-label-bg2">您的动作</span>
              <img class="bigImg" :src="details._comments.hip_angle.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{typeKeyObj[query.exam_name].hip_angle.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"><span v-if="details.hip_angle">{{ Number(details.hip_angle).toFixed(0) }}</span><span v-else>{{ details.hip_angle }}</span>{{
                      typeKeyObj[query.exam_name].hip_angle.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].hip_angle.standard }}{{
                        typeKeyObj[query.exam_name].hip_angle.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.hip_angle.comments }}</div>
                <div>{{ details._comments.hip_angle.note }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="column" v-if="details.image_url && details.image_url_list.length">
      <div class="column-title">数据展示</div>
      <div class="column-con">
        <img class="bigImg" :src="item" v-for="(item, index) in details.image_url_list" :key="index" />
      </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/jump.mp4" poster="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/jump.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>
