<template>
  <div v-if="details._comments">
    <div class="column" v-if="details._comments.arm_front_angles || details._comments.arm_back_angles">
      <div class="column-title">摆臂分析</div>
      <div class="column-con">
        <div class="item" v-if="details._comments.arm_front_angles">
          <div class="item-title">前摆
            <i v-if="details._comments.arm_front_angles.level == 0" class="cha">差</i>
            <i v-if="details._comments.arm_front_angles.level == 1" class="liang">良</i>
            <i v-if="details._comments.arm_front_angles.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/tri_qbfd.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_angles.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{ typeKeyObj[query.exam_name].arm_front_angles.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-for="(item, index) in JSON.parse(details.arm_front_angles)" :key="index">
                        <i v-if="index != 0">-</i>{{ Number(item).toFixed(0) }}
                        {{ typeKeyObj[query.exam_name].arm_front_angles.unit }}
                      </span>
                    </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_angles.standard
                      }}{{
                        typeKeyObj[query.exam_name].arm_front_angles.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_angles.comments }}</div>
                <div>{{ details._comments.arm_front_angles.note }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" v-if="details._comments.arm_back_angles">
          <div class="item-title">后摆
            <i v-if="details._comments.arm_back_angles.level == 0" class="cha">差</i>
            <i v-if="details._comments.arm_back_angles.level == 1" class="liang">良</i>
            <i v-if="details._comments.arm_back_angles.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/tri_hbfd.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_angles.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{ typeKeyObj[query.exam_name].arm_back_angles.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-for="(item, index) in JSON.parse(details.arm_back_angles)" :key="index">
                        <i v-if="index != 0">-</i>{{ Number(item).toFixed(0) }}
                        {{ typeKeyObj[query.exam_name].arm_back_angles.unit }}
                      </span>
                    </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_angles.standard }}{{
                      typeKeyObj[query.exam_name].arm_back_angles.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_angles.comments }}</div>
                <div v-html="details._comments.arm_back_angles.note"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="column" v-if="details._comments.knee_angles || details._comments.jump_angles">
      <div class="column-title">起跳分析</div>
      <div class="column-con">
        <div class="item" v-if="details._comments.knee_angles">
          <div class="item-title">起跳姿势
            <i v-if="details._comments.knee_angles.level == 0" class="cha">差</i>
            <i v-if="details._comments.knee_angles.level == 1" class="liang">良</i>
            <i v-if="details._comments.knee_angles.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/tri_qtjd.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_angles.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{ typeKeyObj[query.exam_name].knee_angles.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-for="(item, index) in JSON.parse(details.knee_angles)" :key="index">
                        <i v-if="index != 0">-</i>{{ Number(item).toFixed(0) }}
                        {{ typeKeyObj[query.exam_name].knee_angles.unit }}
                      </span>
                    </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_angles.standard }}{{
                      typeKeyObj[query.exam_name].knee_angles.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_angles.comments }}</div>
                <div v-html="details._comments.knee_angles.note"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" v-if="details._comments.jump_angles">
          <div class="item-title">起跳角度
            <i v-if="details._comments.jump_angles.level == 0" class="cha">差</i>
            <i v-if="details._comments.jump_angles.level == 1" class="liang">良</i>
            <i v-if="details._comments.jump_angles.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/tri_qxjd.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_angles.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{ typeKeyObj[query.exam_name].jump_angles.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-for="(item, index) in JSON.parse(details.jump_angles)" :key="index">
                        <i v-if="index != 0">-</i>{{ Number(item).toFixed(0) }}
                        {{ typeKeyObj[query.exam_name].jump_angles.unit }}
                      </span>
                    </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_angles.standard }}{{
                      typeKeyObj[query.exam_name].jump_angles.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_angles.comments }}</div>
                <div v-html="details._comments.jump_angles.note"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="column" v-if="details._comments.heights || details._comments.hip_angles">
      <div class="column-title">腾空分析</div>
      <div class="column-con">
        <div class="item" v-if="details._comments.heights">
          <div class="item-title">腾空
            <i v-if="details._comments.heights.level == 0" class="cha">差</i>
            <i v-if="details._comments.heights.level == 1" class="liang">良</i>
            <i v-if="details._comments.heights.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/tri_tkgd.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.heights.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{ typeKeyObj[query.exam_name].heights.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-for="(item, index) in JSON.parse(details.heights)" :key="index">
                        <i v-if="index != 0">-</i>{{ Number(item).toFixed(0) }}
                        {{ typeKeyObj[query.exam_name].heights.unit }}
                      </span>
                    </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].heights.standard }}{{
                      typeKeyObj[query.exam_name].heights.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.heights.comments }}</div>
                <div>{{ details._comments.heights.note }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" v-if="details._comments.hip_angles">
          <div class="item-title">收腿幅度
            <i v-if="details._comments.hip_angles.level == 0" class="cha">差</i>
            <i v-if="details._comments.hip_angles.level == 1" class="liang">良</i>
            <i v-if="details._comments.hip_angles.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/tri_stfd.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_angles.imgurl" />
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                {{ typeKeyObj[query.exam_name].hip_angles.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-for="(item, index) in JSON.parse(details.hip_angles)" :key="index">
                        <i v-if="index != 0">-</i>{{ Number(item).toFixed(0) }}
                        {{ typeKeyObj[query.exam_name].hip_angles.unit }}
                      </span>
                    </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_angles.standard }}{{
                      typeKeyObj[query.exam_name].hip_angles.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_angles.comments }}</div>
                <div>{{ details._comments.hip_angles.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/trijump.mp4"
          poster="https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/trijump.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>
