<template>
  <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
    <div class="mask" v-if="reportWindow.show"></div>
  </Transition>
  <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
    <div class="reportWindow" v-if="reportWindow.show" @click.self="close">
      <div class="box">
        <div class="left">
          <div class="left-top">
            <div class="left-top-center">
              <div class="pic" v-if="faceCheckStu.face_pic || faceCheckStu.logo_url || faceCheckStu.student_icon_url">
                <img :src="faceCheckStu.face_pic || faceCheckStu.logo_url || faceCheckStu.student_icon_url" />
              </div>
              <div class="pic" v-else>
                <img src="@/assets/images/test/profilePicture.png" />
              </div>
              <div class="name">
                {{ faceCheckStu.student_name }}
              </div>
              <div class="className" v-if="faceCheckStu.class_name">{{ faceCheckStu.class_name }}</div>
            </div>
          </div>
          <div class="left-bottom">
            <div class="left-bottom-title">
              <div>测试结果</div>
              <div class="time">{{ proxy?.$utils.timestampFormat(reportDetails.ctime || reportDetails.finish_time) }}
              </div>
            </div>
            <div class="left-bottom-content">
              <div class="achievement">
                <div class="item">
                  <div class="lable">成绩
                  </div>
                  <i></i>
                  <div class="value" v-if="timeProjectList.includes(type)">{{ proxy?.$utils.runTime(reportDetails.result, false, false) }}</div>
                  <div class="value" v-else>{{ reportDetails.result }}</div>
                </div>
                <div class="item">
                  <div class="lable">得分
                  </div>
                  <i></i>
                  <div class="value">{{ reportDetails.score }}</div>
                </div>
                <div class="item">
                  <div class="lable">评级
                  </div>
                  <i></i>
                  <div class="value">{{ reportDetails.score_level }}</div>
                </div>
              </div>
              <!--图形开始-->
              <div v-if="['situp', 'pullup', 'sidepullup', 'jumprope', 'jumpingjack', 'highknees'].includes(type)">
                <div class="echartsBox" ref="echartsRef"></div>
              </div>
              <!--图形结束-->
            </div>
          </div>
        </div>
        <div class="right">
          <div class="right-top">
            <div class="btn">
              <div class="li" :class="{ 'select': currentTab == 1 }" @click="getChoose(1)">
                <div>视频</div>
              </div>
              <div class="li" :class="{ 'select': currentTab == 2 }" @click="getChoose(2)">
                <div>图片</div>
              </div>
            </div>
            <div class="close" @click="close"></div>
          </div>
          <div class="content">
            <div class="video" v-if="reportDetails.video_urls?.length" v-show="currentTab == 1 ? true : false">
              <!--视频开始-->
              <swiper ref="swiperVideoRef" :slides-per-view="1" :slides-per-group="1" :space-between="0"
                :modules="[Navigation, Pagination]" :navigation="{
                  prevEl: '.btn-left1',
                  nextEl: '.btn-right1',
                }" :pagination="{ el: '.swiper-pagination-new1', type: 'fraction' }">
                <swiper-slide v-for="(item, index) in reportDetails.video_urls" :key="index">
                  <video style="width: 100%; object-fit: fill" :src="item"
                    :poster="item?.replace(' ', '') + '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'"
                    controls autoplay>
                    您的浏览器不支持 video 标签。
                  </video>
                </swiper-slide>
              </swiper>
              <div class="navigationBox1">
                <div class="btn-left1"></div>
                <div class="swiper-pagination-new1"></div>
                <div class="btn-right1"></div>
              </div>
              <!--视频结束-->
            </div>
            <div class="pic" v-if="reportDetails.image_urls?.length" v-show="currentTab == 2 ? true : false">
              <!--图片开始-->
              <swiper ref="swiperPicRef" :slides-per-view="1" :slides-per-group="1" :space-between="0"
                :modules="[Navigation, Pagination]" :navigation="{
                  prevEl: '.btn-left',
                  nextEl: '.btn-right',
                }" :pagination="{ el: '.swiper-pagination-new', type: 'fraction' }">
                <swiper-slide v-for="(item, index) in reportDetails.image_urls" :key="index">
                  <img :src="item" />
                </swiper-slide>
              </swiper>
              <div class="navigationBox">
                <div class="btn-left"></div>
                <div class="swiper-pagination-new"></div>
                <div class="btn-right"></div>
              </div>
              <!--图片结束-->
            </div>
          </div>
          <div class="right-bottom">
            <div class="column">
              <div class="title">点评</div>
              <div class="note">{{ reportDetails._comments?.toString() || reportDetails.comments }}</div>
            </div>
            <div class="column">
              <div class="title">建议</div>
              <div class="note">{{ reportDetails._recommends?.toString() || reportDetails.recommends }}</div>
            </div>
            <div class="column column2">
              <div class="title2">数据查看</div>
              <div class="erweima">
                <img :src="erweima" @click="getMobile" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import QRCode from "qrcode";
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';
import dataDictionary from "@/utils/dataDictionary"
const { proxy } = getCurrentInstance() as any;
const emit = defineEmits(['returnData']);
const router = useRouter();
const echartsRef = ref(null);
const timeProjectList = ['basketballv1','run50','run60','run70','run100','run200','run400','run800','run1000','runa800','runa1000','runwb800','runwb1000', 'run15x4', 'run50x8', 'run10x4'];
const data = reactive<any>({
  reportWindow: {
    show: false,
  },
  type: "",
  faceCheckStu: {},
  reportDetails: {},
  currentTab: 2,
  erweima: ""
});

const { reportWindow, type, faceCheckStu, reportDetails, currentTab, erweima } = toRefs(data);

/**
 * 当天成绩列表
*/
const getReportDetails = async () => {
  reportDetails.value = {};
  let params: any = {
    exam_name: type.value,
  };
  if (faceCheckStu.value.result_id_info) {
    params.student_ids = faceCheckStu.value.student_id;
    params.result_id_info = faceCheckStu.value.result_id_info;
  } else {
    params.student_id = faceCheckStu.value.student_id;
    params.result_id = faceCheckStu.value.result_id;
  }
  await proxy?.$http.common.reportDetails(params).then((res: any) => {
    if (res.data.length > 0) {
      reportDetails.value = res.data[0];
    }
  });
};

//选择图片或视频
const getChoose = (data: any) => {
  currentTab.value = data;
};

/**
 * 获取二维码
*/
const getErweima = () => {
  //测试详情 exam_name、stu_key、test_key
  //上课详情 exam_name、student_id、result_ids
  let url = ''
  if (reportDetails.value.test_key) {
    url = `${location.origin}/#/analysis/detail?exam_name=${type.value}&stu_key=${reportDetails.value.stu_key}&test_key=${reportDetails.value.test_key}`
  } else {
    url = `${location.origin}/#/analysis/detail?exam_name=${type.value}&student_id=${reportDetails.value.student_id}&result_ids=${reportDetails.value.result_id}`
  }
  console.log("url", url)
  QRCode.toDataURL(
    url
  )
    .then((res: any) => {
      erweima.value = res;
    })
}

/**
 * 跳转手机
*/
const getMobile = () => {
  let params = {}
  if (reportDetails.value.test_key) {
    params = {
      exam_name: type.value,
      stu_key: reportDetails.value.stu_key,
      test_key: reportDetails.value.test_key
    }
  } else {
    params = {
      exam_name: type.value,
      student_id: reportDetails.value.student_id,
      result_ids: reportDetails.value.result_id,
    }
  }
  let routeUrl: any = router.resolve({ path: '/analysis/detail', query: params });
  window.open(routeUrl.href, '_blank');
}

//打开
const open = async (typeData: any, data: any) => {
  console.log("data", data)
  type.value = typeData;
  faceCheckStu.value = data;
  if (faceCheckStu.value.result_id == undefined && faceCheckStu.value.result_id_info == undefined) {
    proxy?.$modal.msgWarning("查询参数错误");
    return false;
  }
  await getReportDetails();
  await getErweima();
  reportWindow.value.show = true;
  emit('returnData', reportWindow.value.show);
  nextTick(() => {
    inits();
  })
};

//关闭
const close = () => {
  faceCheckStu.value = data;
  reportWindow.value.show = false;
  emit('returnData', reportWindow.value.show);
};

//初始化函数
const inits = () => {
  if (reportDetails.value.count_distribution == undefined) {
    return false;
  }
  let failedList = JSON.parse(reportDetails.value.all_failed_num_distribution);
  let countList = JSON.parse(reportDetails.value.count_distribution);
  let timeList = countList.map((item: any, index: any) => {
    let time = (index + 1) * 10;
    return time + 's';
  })
  const myChart = echarts.init(echartsRef.value);
  const option = {
    grid: {
      left: '0%',
      right: '0%',
      top: '25px',
      bottom: '0%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      data: timeList,
    },
    yAxis: {
    },
    series: [
      {
        name: '成绩',
        type: 'bar',
        data: countList,
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          color: '#00c1b0'
        }
      },
      {
        name: ['jumprope','jumpingjack','highknees'].includes(type.value) ? '中断' : '犯规',
        type: 'line',
        lineStyle: {
          type: 'solid',
        },
        itemStyle: {
          color: '#13ED84',
          borderWidth: 3
        },
        data: failedList,
      },
    ]
  }
  myChart.setOption(option);
  setTimeout(function () {
    window.onresize = function () {
      myChart.resize();
    };
  }, 200);
};

onMounted(() => {
})

//暴露给父组件用
defineExpose({
  open,
  close,
})
</script>
<style lang="scss" scoped>
.mask {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 998;
}

.reportWindow {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;

  .box {
    width: 75%;
    height: 78.5vh;
    border-radius: 1.6rem;
    background: linear-gradient(60deg, #092941 -85%, #2A484B 96%);
    box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.3);
    padding: 20px;
    display: flex;
    justify-content: space-between;

    .left {
      width: 24%;
      display: flex;
      align-items: flex-start;
      flex-direction: column;

      .left-top {
        width: 100%;
        height: 34.5vh;
        border-radius: 1.6rem;
        background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 13px;
        flex-shrink: 0;

        .left-top-center {
          .pic {
            width: 18vh;
            height: 18vh;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            margin: 0 auto 2vh auto;
            box-sizing: border-box;
            border: 0.44rem solid rgba(26, 41, 58, 0.6315);
            position: relative;

            img {
              width: 100%;
            }
          }

          .name {
            width: 100%;
            color: #1A293A;
            font-size: 2.21rem;
            padding: 0 0.3rem;
            border-radius: 1.2rem;
            background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
            box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
          }

          .className {
            padding-top: 5px;
            color: #1A293A;
            font-size: 1.5rem;
          }
        }
      }

      .left-bottom {
        height: 100%;
        width: 100%;
        background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
        display: flex;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        border-radius: 1.6rem;
        overflow: hidden;

        .left-bottom-title {
          width: 100%;
          font-size: 1.5rem;
          color: #060C10;
          padding: 10px 20px;
          box-sizing: border-box;
          background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
          display: flex;
          justify-content: space-between;
          align-items: center;

          .time {
            font-size: 0.9rem;
          }
        }

        .left-bottom-content {
          width: 100%;
          height: 100%;
          padding: 0 10px;
          box-sizing: border-box;
          overflow-y: scroll;

          .achievement {
            padding: 10px 0px 0px 10px;

            .item {

              width: 100%;
              margin-bottom: 15px;
              line-height: 1;
              display: flex;
              align-items: end;

              .lable {
                font-size: 1.38rem;
                color: #195149;
                flex-shrink: 0;
              }

              i {
                width: 20%;
                height: 0.5rem;
                display: block;
                background: #13ED84;
                margin: 0px 8px 6px 5px;
                flex-shrink: 0;
              }

              .value {
                color: #195149;
                font-size: 2.21rem;
                font-family: 'Saira-BlackItalic';
                font-weight: bold;
              }
            }
          }

          .echartsBox {
            width: 100%;
            height: 20vh;
          }

          &::-webkit-scrollbar {
            width: 8px;
          }

          &::-webkit-scrollbar-thumb {
            border-width: 2px;
            border-radius: 4px;
            border-style: dashed;
            border-color: transparent;
            background: #00FFE8;
            background-clip: padding-box;
          }

          &::-webkit-scrollbar-button:hover {
            border-radius: 5px;
            background: rgba(26, 62, 78, 1);
          }
        }
      }
    }

    .right {
      width: calc(100% - 24%);

      .right-top {
        color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .btn {
          display: flex;
          width: 42%;
          height: 3.6rem;
          line-height: 3.6rem;
          font-size: 1.65rem;
          margin: 0 auto;
          border-radius: 1.8rem;
          font-size: 2rem;
          text-align: center;
          color: #1A293A;
          background: #ACACAC;
          overflow: hidden;

          .li {
            width: 50%;
            text-align: center;
            cursor: pointer;
          }

          .select {
            border-radius: 1.8rem;
            box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.3);
            background: radial-gradient(50% 181% at 163% 0%, #35FFC6 0%, #00FFE8 100%);
          }
        }

        .close {}
      }

      .content {
        padding: 0 3.2rem;
        margin-bottom: 3.5vh;
        line-height: 0;
        text-align: center;
        $maxHeight: calc(77.5vh - 40px - 3.2rem - 16px - 13vh - 2rem);

        .video {
          position: relative;

          video {
            max-height: $maxHeight;
            max-width: 100%;
          }

          .navigationBox1 {
            width: 14rem;
            display: flex;
            justify-content: space-between;
            position: absolute;
            z-index: 2;
            left: 50%;
            bottom: -1.6rem;
            margin-left: -7rem;

            .btn-left1 {
              cursor: pointer;
              width: 2.2rem;
              height: 2.2rem;
              background: url("@/assets/images/ranking/btn-left.png") center center no-repeat;
              background-size: 100% 100%;
            }

            .btn-right1 {
              cursor: pointer;
              width: 2.2rem;
              height: 2.2rem;
              background: url("@/assets/images/ranking/btn-right.png") center center no-repeat;
              background-size: 100% 100%;
            }

            .swiper-pagination-new1 {
              width: 7rem;
              height: 2.2rem;
              line-height: 2.2rem;
              color: #1F3A4F;
              font-size: 1.6rem;
              border-radius: 1.6rem;
              background: #D8D8D8;
            }
          }
        }

        .pic {
          width: 100%;
          height: 100%;
          border: 1px solid #13ED84;
          border-radius: 1.6rem;
          background: linear-gradient(60deg, #092941 -85%, #2A484B 96%);
          position: relative;

          img {
            max-height: $maxHeight;
            max-width: 100%;
            border-radius: 1.6rem;
          }

          .navigationBox {
            width: 14rem;
            display: flex;
            justify-content: space-between;
            position: absolute;
            z-index: 2;
            left: 50%;
            bottom: -1.6rem;
            margin-left: -7rem;

            .btn-left {
              cursor: pointer;
              width: 3.2rem;
              height: 3.2rem;
              background: url("@/assets/images/ranking/btn-left.png") center center no-repeat;
              background-size: 100% 100%;
            }

            .btn-right {
              cursor: pointer;
              width: 3.2rem;
              height: 3.2rem;
              background: url("@/assets/images/ranking/btn-right.png") center center no-repeat;
              background-size: 100% 100%;
            }

            .swiper-pagination-new {
              width: 7rem;
              height: 3.2rem;
              line-height: 3.2rem;
              color: #1F3A4F;
              font-size: 1.65rem;
              border-radius: 1.6rem;
              background: #D8D8D8;
            }
          }
        }
      }

      .right-bottom {
        padding: 0 3.2rem;
        display: flex;
        justify-content: space-between;

        .column {
          width: 38%;

          .title {
            font-size: 1.54rem;
            color: #13ED84;
            margin-bottom: 10px;
            position: relative;

            &::after {
              content: "";
              width: calc(100% - 3.8rem);
              height: 1px;
              background: #13ED84;
              position: absolute;
              right: 0;
              bottom: 0.4rem;
            }
          }

          .title2 {
            font-size: 1.1rem;
            color: #ffffff;
            text-align: center;
            margin-bottom: 10px;
          }

          .note {
            font-size: 1.1rem;
            color: #FFFFFF;
            line-height: 1.5rem;
            height: 13vh;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              width: 8px;
            }

            &::-webkit-scrollbar-thumb {
              border-width: 2px;
              border-radius: 4px;
              border-style: dashed;
              border-color: transparent;
              background: #00FFE8;
              background-clip: padding-box;
            }

            &::-webkit-scrollbar-button:hover {
              border-radius: 5px;
              background: rgba(26, 62, 78, 1);
            }
          }
        }

        .column2 {
          width: 14%;
        }

        .erweima {
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
