<template>
  <div>
    <el-dialog
      :title="examId"
      center
      width="68%"
      top="8vh"
      height="60%"
      destroy-on-close
      fullscreen
      :visible="showPlayer"
      :modal="false"
      :before-close="handlBeforeClose"
      custom-class="el-dialog-body"
      @close="handlePlayerClose"
    >
      <p>播放源地址：{{ viewCamurl }}</p>
      <div v-show="anchorFlag && !caliFlag" style="display: flex; margin-top: 10px;">
        <el-button type="primary" size="mini" style="" @click="startAnchor()">开始布点</el-button>

        <el-button type="primary" size="mini" style="margin-left:5px;" :disabled="btnDis" :loading="btnDis" @click="lastAnchor()"
          >上次布点
        </el-button>
        <el-upload action="#" :before-upload="loadAnchorFile" accept=".json" :show-file-list="false" style="margin-left:5px;">
          <el-button size="mini" type="primary">加载布点</el-button>
        </el-upload>
        <!-- <el-button @onclick="" size="mini" type="primary" style="margin-left: 5px;">重置布点</el-button> -->
        <el-button type="primary" size="mini" style="margin-left: 5px;" @click="saveAnchor()"> 保存 </el-button>
      </div>
      <br />
      <canvas id="canvas" width="0" height="0" style="background-color:black;" />
      <div
        v-loading="!anchorFlag"
        element-loading-text="请稍等几秒"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <video id="videoflv" muted style="height:720px;background-color:black;" controls autoplay />
      </div>
    </el-dialog>

    <el-dialog :key="snapTime" :title="picTitle" center fullscreen destroy-on-close v-model="showSnapPics">
      <p>
        布点图最后更新：<b> {{ snapTime }}</b>
        <!--  布点文件最后更新：<b>{{anchorUptime[camIndex+'_error'] || anchorUptime[camIndex]}}</b> -->
        <!--  矫正文件最后更新：<b>{{camparamUptime[camIndex + '_error']|| camparamUptime[camIndex] || '未上传' }} </b> -->
      </p>
      <div style="display:flex; margin-top:5px;">
        <el-image id="snapPic" :src="snapPic" style="width:100%;" class="sanPicShowDia" lazy>
          <div class="image-slot">
            <i class="el-icon-picture-outline" />
            <p>抱歉，布点文件生成失败，请稍后点击右侧刷新按钮重试。</p>
          </div>
        </el-image>
        <div style="display: flex; flex-direction: column; align-items: flex-end; margin-left: 1px;">
          <el-button type="success" size="mini" style="" @click="showSnap(0, camIndex, 'snapshot')"> 刷新布点 </el-button>
          <el-button type="primary" size="mini" style="margin-top: 5px;" @click="upAndDownPFile(camIndex, 'json')">下载布点 </el-button>
          <el-button v-if="camparamUptime[camIndex]" type="primary" size="mini" style="margin-top: 5px;" @click="upAndDownPFile(camIndex, 'yml')"
            >下载矫正
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-container style="background: #ecf3f9;">
      <el-header class="navbar">
        <div class="nav1">
           <el-icon style="cursor: pointer;" :size="20" @click="$router.go(-1)">
    <ArrowLeftBold />
  </el-icon>
          <h3 style="font-weight:bold;">{{ examCN }}</h3>
          <div>
            <el-button type="primary" size="small" @click="submitForm('ruleForm', 0)">保存</el-button>
            <!-- <el-button type="primary" @click="submitForm('ruleForm', 1)">保存并重启</el-button> -->
          </div>
        </div>
      </el-header>
      <el-main class="container-main">
        <div class="">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="122px"
            style="font-size:18px;letter-spacing:0;word-spacing:0"
            label-position="left"
            size="small"
          >
            <el-collapse v-model="activeNames">
              <el-collapse-item title="基础设置" name="1">
                <template v-for="value, item in ruleForm">
                  <template v-if="item in examFormConf['required']">
                    <template v-if="item === 'cam_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <span>
                          <!-- {{ anchorLabelObj[item] }} -->
                          <el-popover placement="right" width="width:30%" trigger="hover">
                            <div style="height:100px; font-size:12px; margin-bottom: 20px;line-height:20px;">
                              <p style="font-size:10px;">
                                大华摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                大华摄像头示例-h265: <br />
                                rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0,coder=h265
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0,coder=h265', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                海康摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream,coder=h265
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream,coder=h265', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                USB摄像头示例: <br />
                                /dev/video0,width=1280,height=720,framerate=30
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('/dev/video0,width=1280,height=720,framerate=30', item)"
                                  >选择</el-link
                                >
                              </p>
                            </div>
                            <i class="el-icon-question" />
                          </el-popover>
                        </span>

                        <el-input v-model="ruleForm.cam_path" clearable style="width:45%; margin-right:5px;" />
                        <span style="margin-right:4px;font-size:10px;">帧率</span>
                        <el-input v-model.number="ruleForm.cam_fps" style="width:9.66%;margin-right:5px;" />
                        <el-button icon="VideoCamera" type="primary" size="small" @click.prevent="viewCam(1, 0, ruleForm.cam_fps, 1)"
                          >远程布点</el-button
                        >
                        <el-button
                          icon="VideoCamera"
                          type="primary"
                          size="small"
                          style="margin-left:5px;"
                          :disabled="!hasLocSRS"
                          @click.prevent="viewCam(1, 0, ruleForm.cam_fps, 3)"
                          >本地布点</el-button
                        >
                      </el-form-item>
                    </template>
                    <template v-if="item === 'anchor_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input v-model="ruleForm.anchor_path" disabled class="input45" clearable />
                        <el-button type="primary" size="small" plain @click.prevent="showSnap(0, 1)">预览</el-button>
                        <el-button type="primary" size="small" plain style="margin-left:5px;" @click.prevent="checkAnchorUrl('', 1)">刷新</el-button>
                        <el-upload
                          name="upload_file"
                          style="display: inline-block; margin-left: 5px; margin-right:5px;"
                          action="#"
                          :show-file-list="false"
                          :data="{exam_id: examId, cindex: 1, school_id: schoolId}"
                          :action="uploadUrl"
                          :headers="headers"
                          :on-success="handleUpload"
                        >
                          <el-button type="primary" size="small" plain>上传布点</el-button>
                        </el-upload>
                        <el-button type="primary" size="small" plain @click.prevent="upAndDownPFile(1, 'json')">下载布点</el-button>
                      </el-form-item>
                    </template>

                    <template v-if="item === 'flag_calibrate'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-switch v-model="ruleForm.flag_calibrate" :active-value="1" :inactive-value="0" />
                      </el-form-item>
                    </template>

                    <template v-if="item == 'cam_param_path'">
                      <el-collapse-transition>
                        <div v-show="ruleForm.flag_calibrate">
                          <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                            <el-input v-model="ruleForm.cam_param_path" disabled class="input45" />
                            <!--  <el-button @click.prevent="viewCam(1, 1, ruleForm.cam_fps, 1)" type="primary" size="small" plain>预览</el-button> -->
                            <el-button type="primary" size="small" style="" @click.prevent="checkAnchorUrl('', 1, 'yml')">刷新</el-button>
                            <el-upload
                              name="upload_file"
                              style="display:inline-block; margin-left: 5px;margin-right:5px;"
                              action="#"
                              :show-file-list="false"
                              :data="{exam_id: examId, cindex: 1, school_id: schoolId, up_type:'yml'}"
                              :action="uploadUrl"
                              :headers="headers"
                              :on-success="handleUpload"
                              ><el-button type="primary" size="small">上传矫正</el-button>
                            </el-upload>
                            <el-button type="primary" size="mini" @click="upAndDownPFile(1, 'yml')">下载矫正 </el-button>
                            <el-button type="primary" size="small" @click.prevent="viewCam(1, 2, ruleForm.cam_fps, 1)">远程矫正</el-button>
                            <el-button type="primary" size="small" :disabled="!hasLocSRS" @click.prevent="viewCam(1, 2, ruleForm.cam_fps, 4)"
                              >本地矫正</el-button
                            >
                          </el-form-item>
                        </div>
                      </el-collapse-transition>
                    </template>

                    <template v-if="item == 'cam_0_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <span>
                          <!-- {{ anchorLabelObj[item] }} -->
                          <el-popover placement="right" width="width:30%" trigger="hover">
                            <div style="height:100px; font-size:12px; margin-bottom: 20px;line-height:20px;">
                              <p style="font-size:10px;">
                                大华摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                海康摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                USB摄像头示例: <br />
                                /dev/video0,width=1280,height=720,framerate=30
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('/dev/video0,width=1280,height=720,framerate=30')"
                                >
                                  复制</el-link
                                >
                              </p>
                            </div>
                            <i class="el-icon-question" />
                          </el-popover>
                        </span>
                        <el-input v-model="ruleForm.cam_0_path" style="width:45%; margin-right:5px;" />
                        <span style="margin-right:4px; font-size:10px;">帧率</span>
                        <el-input v-model.number="ruleForm.cam_fps" style="width:9.66%;margin-right:5px;" />
                        <el-button icon="VideoCamera" type="primary" size="small" @click.prevent="viewCam(2, 0, ruleForm.cam_fps, 1)"
                          >远程布点</el-button
                        >
                        <el-button
                          icon="VideoCamera"
                          type="primary"
                          size="small"
                          style="margin-left:5px;"
                          :disabled="!hasLocSRS"
                          @click.prevent="viewCam(2, 0, ruleForm.cam_fps, 3)"
                          >本地布点</el-button
                        >
                      </el-form-item>
                    </template>

                    <template v-if="item == 'anchor_0_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input v-model="ruleForm.anchor_0_path" disabled class="input45" />
                        <el-button type="primary" size="small" plain @click.prevent="showSnap(0, 2)">预览</el-button>
                        <!--  <el-button @click.prevent="handleDown(2)" type="primary">下载布点</el-button> -->
                        <el-button type="primary" size="small" plain style="margin-left:5px;" @click.prevent="checkAnchorUrl('', 2)">刷新</el-button>
                        <el-upload
                          name="upload_file"
                          style="display: inline; margin-left: 5px;"
                          action="#"
                          :data="{exam_id: examId, cindex: 2, school_id: schoolId}"
                          :show-file-list="false"
                          :action="uploadUrl"
                          :headers="headers"
                          :on-success="handleUpload"
                        >
                          <el-button type="primary" size="small" plain>上传布点</el-button>
                        </el-upload>
                      </el-form-item>
                    </template>

                    <template v-if="item == 'cam_face_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <span>
                          <!-- {{ anchorLabelObj[item] }} -->
                          <el-popover placement="right" width="width:30%" trigger="hover">
                            <div style="height:100px; font-size:12px; margin-bottom: 20px;line-height:20px;">
                              <p style="font-size:10px;">
                                大华摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                海康摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                USB摄像头示例: <br />
                                /dev/video0,width=1280,height=720,framerate=30
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('/dev/video0,width=1280,height=720,framerate=30')"
                                >
                                  复制</el-link
                                >
                              </p>
                            </div>
                            <i class="el-icon-question" />
                          </el-popover>
                        </span>
                        <el-input v-model="ruleForm.cam_face_path" style="width:45% ;margin-right:5px;" clearable />
                        <span style="margin-right:4px; font-size:10px;">帧率</span>
                        <el-input v-model.number="ruleForm.cam_face_fps" style="width:9.66%;margin-right:5px;" />
                        <el-button icon="VideoCamera" type="primary" size="small" @click.prevent="viewCam(0, 0, ruleForm.cam_face_fps, 1)"
                          >远程布点</el-button
                        >
                        <el-button
                          icon="VideoCamera"
                          type="primary"
                          size="small"
                          style="margin-left:5px;"
                          :disabled="!hasLocSRS"
                          @click.prevent="viewCam(0, 0, ruleForm.cam_face_fps, 3)"
                          >本地布点</el-button
                        >
                      </el-form-item>
                    </template>
                    <template v-if="item == 'anchor_face_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input v-model="ruleForm.anchor_face_path" disabled class="input45" />
                        <el-button type="primary" size="small" plain @click.prevent="showSnap(0, 0)">预览</el-button>
                        <el-button type="primary" size="small" plain style="margin-left:5px;" @click.prevent="checkAnchorUrl('', 0)">刷新</el-button>
                        <el-upload
                          name="upload_file"
                          style="display: inline-block; margin-left: 5px; margin-right:5px;"
                          action="#"
                          :show-file-list="false"
                          :data="{ exam_id: examId, cindex: 0, school_id: schoolId}"
                          :action="uploadUrl"
                          :headers="headers"
                          :on-success="handleUpload"
                        >
                          <el-button type="primary" size="small" plain>上传布点</el-button>
                        </el-upload>
                        <el-button type="primary" size="small" plain @click.prevent="upAndDownPFile(0, 'json')">下载布点 </el-button>
                      </el-form-item>
                    </template>

                    <template
                      v-if="['flag_check_stline', 'flag_check_back',
                             'flag_check_hip', 'flag_check_knee', 'flag_check_stline', 'flag_check_hand', 'flag_check_elbow', 'flag_save',
                             'flag_display', 'flag_check_person', 'flag_check_singleleg_jump'].includes(item)"
                    >
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-switch v-model="ruleForm[item]" :active-value="1" :inactive-value="0" />
                      </el-form-item>
                    </template>

                    <template
                      v-if="['distance_ground', 'distance_maximum', 'height_maximum','length_air_line',
                             'distance_ground_between_lines', 'length_ground_line',
                             'distance_air_between_lines', 'distance_per_round',
                             'num_of_tracks', 'num_of_tracks_startline', 'num_of_tracks_endline', 'delay_cam_second', 'delay_cmd_second'
                      ].includes(item) "
                    >
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input-number v-model="ruleForm[item]" style="width:30%" /><span
                          style="margin-right:4px; padding-left:10px; font-size:18px;"
                          >cm</span
                        >
                      </el-form-item>
                    </template>

                    <template v-if="item == 'difficulty'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input-number v-model="ruleForm.difficulty" :min="0" :max="5" style="width:30%" />
                      </el-form-item>
                    </template>
                    <template v-if="item == 'test_time'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input-number v-model="ruleForm.test_time" :min="1" :max="1000" style="width:30%" />
                      </el-form-item>
                    </template>
                  </template>
                </template>
              </el-collapse-item>
              <el-collapse-item title="高级设置">
                <template v-for="value, item in ruleForm">
                  <template v-if="item in examFormConf['advanced']">
                    <template v-if="item === 'cam_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <span>
                          <!-- {{ anchorLabelObj[item] }} -->
                          <el-popover placement="right" width="width:30%" trigger="hover">
                            <div style="height:100px; font-size:12px; margin-bottom: 20px;line-height:20px;">
                              <p style="font-size:10px;">
                                大华摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                海康摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                USB摄像头示例: <br />
                                /dev/video0,width=1280,height=720,framerate=30
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('/dev/video0,width=1280,height=720,framerate=30', item)"
                                  >选择</el-link
                                >
                              </p>
                            </div>
                            <i class="el-icon-question" />
                          </el-popover>
                        </span>

                        <el-input v-model="ruleForm.cam_path" clearable style="width:45%; margin-right:5px;" />
                        <span style="margin-right:4px;font-size:10px;">帧率</span>
                        <el-input v-model.number="ruleForm.cam_fps" style="width:9.66%;margin-right:5px;" />
                        <el-button icon="VideoCamera" type="primary" size="small" @click.prevent="viewCam(1, 0, ruleForm.cam_fps, 1)"
                          >远程布点</el-button
                        >
                        <el-button
                          icon="VideoCamera"
                          type="primary"
                          size="small"
                          style="margin-left:5px;"
                          :disabled="!hasLocSRS"
                          @click.prevent="viewCam(1, 0, ruleForm.cam_fps, 3)"
                          >本地布点</el-button
                        >
                      </el-form-item>
                    </template>
                    <template v-if="item === 'anchor_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input v-model="ruleForm.anchor_path" disabled class="input45" />
                        <el-button type="primary" size="small" plain @click.prevent="showSnap(0, 1)">预览</el-button>
                        <el-button type="primary" size="small" plain style="margin-left:5px;" @click.prevent="checkAnchorUrl('', 1)">刷新</el-button>
                        <el-upload
                          name="upload_file"
                          style="display: inline; margin-left: 5px;"
                          action="#"
                          :show-file-list="false"
                          :data="{exam_id: examId, cindex: 1, school_id: schoolId}"
                          :action="uploadUrl"
                          :headers="headers"
                          :on-success="handleUpload"
                        >
                          <el-button type="primary" size="small" plain>上传布点</el-button>
                        </el-upload>
                      </el-form-item>
                    </template>

                    <template v-if="item === 'flag_calibrate'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-switch v-model="ruleForm.flag_calibrate" :active-value="1" :inactive-value="0" />
                      </el-form-item>
                    </template>

                    <template v-if="item == 'cam_param_path'">
                      <el-collapse-transition>
                        <div v-show="ruleForm.flag_calibrate">
                          <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                            <el-input v-model="ruleForm.cam_param_path" disabled class="input45" />
                            <!--  <el-button @click.prevent="viewCam(1, 1, ruleForm.cam_fps, 1)" type="primary" size="small" plain>预览</el-button> -->
                            <el-button type="primary" size="small" plain style="margin-left:5px;" @click.prevent="checkAnchorUrl('', 1, 'yml')"
                              >刷新</el-button
                            >

                            <el-upload
                              name="upload_file"
                              style="display: inline-block; margin-left: 5px;"
                              action="#"
                              :show-file-list="false"
                              :data="{exam_id: examId, cindex: 1, school_id: schoolId, up_type:'yml'}"
                              :action="uploadUrl"
                              :headers="headers"
                              :on-success="handleUpload"
                              ><el-button type="primary" size="small" plain>上传矫正</el-button>
                            </el-upload>

                            <el-button type="primary" size="small" plain style="margin-left: 5px;" @click="upAndDownPFile(1, 'yml')"
                              >下载矫正
                            </el-button>

                            <el-button type="primary" size="small" plain style="margin-left:5px;" @click.prevent="viewCam(1, 2, ruleForm.cam_fps, 1)"
                              >远程矫正</el-button
                            >
                            <el-button
                              type="primary"
                              size="small"
                              plain
                              style="margin-left:5px;"
                              :disabled="!hasLocSRS"
                              @click.prevent="viewCam(1, 2, ruleForm.cam_fps, 4)"
                              >本地矫正</el-button
                            >
                          </el-form-item>
                        </div>
                      </el-collapse-transition>
                    </template>

                    <template v-if="item == 'cam_0_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <span>
                          <!-- {{ anchorLabelObj[item] }} -->
                          <el-popover placement="right" width="width:30%" trigger="hover">
                            <div style="height:100px; font-size:12px; margin-bottom: 20px;line-height:20px;">
                              <p style="font-size:10px;">
                                大华摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                海康摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                USB摄像头示例: <br />
                                /dev/video0,width=1280,height=720,framerate=30
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('/dev/video0,width=1280,height=720,framerate=30')"
                                >
                                  复制</el-link
                                >
                              </p>
                            </div>
                            <i class="el-icon-question" />
                          </el-popover>
                        </span>
                        <el-input v-model="ruleForm.cam_0_path" style="width:45%; margin-right:5px;" />
                        <span style="margin-right:4px; font-size:10px;">帧率</span>
                        <el-input v-model.number="ruleForm.cam_fps" style="width:9.66%;margin-right:5px;" />
                        <el-button icon="VideoCamera" type="primary" size="small" @click.prevent="viewCam(2, 0, ruleForm.cam_fps, 1)"
                          >远程布点</el-button
                        >
                        <el-button
                          icon="VideoCamera"
                          type="primary"
                          size="small"
                          style="margin-left:5px;"
                          :disabled="!hasLocSRS"
                          @click.prevent="viewCam(2, 0, ruleForm.cam_fps, 3)"
                          >本地布点</el-button
                        >
                      </el-form-item>
                    </template>

                    <template v-if="item == 'anchor_0_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input v-model="ruleForm.anchor_0_path" disabled class="input45" />
                        <el-button type="primary" size="small" plain @click.prevent="showSnap(0, 2)">预览</el-button>
                        <el-button type="primary" size="small" plain style="margin-left:5px;" @click.prevent="checkAnchorUrl('', 2)">刷新</el-button>
                        <el-upload
                          name="upload_file"
                          style="display: inline; margin-left: 5px;"
                          action="#"
                          :show-file-list="false"
                          :data="{exam_id: examId, cindex: 2, school_id: schoolId}"
                          :action="uploadUrl"
                          :headers="headers"
                          :on-success="handleUpload"
                        >
                          <el-button type="primary" size="small" plain>上传布点</el-button>
                        </el-upload>
                      </el-form-item>
                    </template>

                    <template v-if="item == 'cam_face_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <span>
                          <!-- {{ anchorLabelObj[item] }} -->
                          <el-popover placement="right" width="width:30%" trigger="hover">
                            <div style="height:100px; font-size:12px; margin-bottom: 20px;line-height:20px;">
                              <p style="font-size:10px;">
                                大华摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                海康摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                USB摄像头示例: <br />
                                /dev/video0,width=1280,height=720,framerate=30
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('/dev/video0,width=1280,height=720,framerate=30')"
                                >
                                  复制</el-link
                                >
                              </p>
                            </div>
                            <i class="el-icon-question" />
                          </el-popover>
                        </span>
                        <el-input v-model="ruleForm.cam_face_path" style="width:45% ;margin-right:5px;" clearable />
                        <span style="margin-right:4px; font-size:10px;">帧率</span>
                        <el-input v-model.number="ruleForm.cam_face_fps" style="width:9.66%;margin-right:5px;" />
                        <el-button icon="VideoCamera" type="primary" size="small" @click.prevent="viewCam(0, 0, ruleForm.cam_face_fps, 1)"
                          >远程布点</el-button
                        >
                        <el-button
                          icon="VideoCamera"
                          type="primary"
                          size="small"
                          style="margin-left:5px;"
                          :disabled="!hasLocSRS"
                          @click.prevent="viewCam(0, 0, ruleForm.cam_face_fps, 3)"
                          >本地布点</el-button
                        >
                      </el-form-item>
                    </template>
                    <template v-if="item == 'anchor_face_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input v-model="ruleForm.anchor_face_path" disabled class="input45" />
                        <el-button type="primary" size="small" plain @click.prevent="showSnap(0, 0)">预览</el-button>
                        <el-button type="primary" size="small" plain style="margin-left:5px;" @click.prevent="checkAnchorUrl('', 0)">刷新</el-button>
                        <el-upload
                          name="upload_file"
                          style="display: inline; margin-left: 5px;"
                          action="#"
                          :show-file-list="false"
                          :data="{ exam_id: examId, cindex: 0, school_id: schoolId}"
                          :action="uploadUrl"
                          :headers="headers"
                          :on-success="handleUpload"
                        >
                          <el-button type="primary" size="small" plain>上传布点</el-button>
                        </el-upload>
                      </el-form-item>
                    </template>

                    <template
                      v-if="['flag_check_stline', 'flag_check_back',
                             'flag_check_hip', 'flag_check_knee', 'flag_check_stline', 'flag_check_hand', 'flag_check_elbow', 'flag_save',
                             'flag_display', 'flag_check_person', 'flag_check_singleleg_jump'].includes(item)"
                    >
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-switch v-model="ruleForm[item]" :active-value="1" :inactive-value="0" />
                      </el-form-item>
                    </template>

                    <template
                      v-if="['distance_ground', 'length_air_line',
                             'distance_ground_between_lines', 'length_ground_line',
                             'distance_air_between_lines', 'distance_per_round',
                             'num_of_tracks', 'num_of_tracks_startline', 'num_of_tracks_endline', 'delay_cam_second', 'delay_cmd_second'
                      ].includes(item) "
                    >
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input-number v-model="ruleForm[item]" style="width:30%" /><span
                          style="margin-right:4px; padding-left:10px; font-size:18px;"
                          >cm</span
                        >
                      </el-form-item>
                    </template>

                    <template v-if="item == 'difficulty'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input-number v-model="ruleForm.difficulty" :min="0" :max="5" style="width:30%" />
                      </el-form-item>
                    </template>
                    <template v-if="item == 'test_time'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input-number v-model="ruleForm.test_time" :min="1" :max="1000" style="width:30%" />
                      </el-form-item>
                    </template>
                  </template>
                </template>
              </el-collapse-item>
              <el-collapse-item title="保留参数">
                <template v-for="value, item in ruleForm">
                  <template v-if="item in examFormConf['reserved']">
                    <template v-if="item === 'cam_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <span>
                          <!-- {{ anchorLabelObj[item] }} -->
                          <el-popover placement="right" width="width:30%" trigger="hover">
                            <div style="height:100px; font-size:12px; margin-bottom: 20px;line-height:20px;">
                              <p style="font-size:10px;">
                                大华摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                海康摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                USB摄像头示例: <br />
                                /dev/video0,width=1280,height=720,framerate=30
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('/dev/video0,width=1280,height=720,framerate=30', item)"
                                  >选择</el-link
                                >
                              </p>
                            </div>
                            <i class="el-icon-question" />
                          </el-popover>
                        </span>

                        <el-input v-model="ruleForm.cam_path" clearable style="width:45%; margin-right:5px;" />
                        <span style="margin-right:4px;font-size:10px;">帧率</span>
                        <el-input v-model.number="ruleForm.cam_fps" style="width:9.66%;margin-right:5px;" />
                        <el-button icon="VideoCamera" type="primary" size="small" @click.prevent="viewCam(1, 0, ruleForm.cam_fps, 1)"
                          >远程布点</el-button
                        >
                        <el-button
                          icon="VideoCamera"
                          type="primary"
                          size="small"
                          style="margin-left:5px;"
                          :disabled="!hasLocSRS"
                          @click.prevent="viewCam(1, 0, ruleForm.cam_fps, 3)"
                          >本地布点</el-button
                        >
                      </el-form-item>
                    </template>
                    <template v-if="item === 'anchor_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input v-model="ruleForm.anchor_path" disabled class="input45" />
                        <el-button type="primary" size="small" plain @click.prevent="showSnap(0, 1)">预览</el-button>
                        <el-button type="primary" size="small" plain style="margin-left:5px;" @click.prevent="checkAnchorUrl('', 1)">刷新</el-button>
                        <el-upload
                          name="upload_file"
                          style="display: inline; margin-left: 5px;"
                          action="#"
                          :show-file-list="false"
                          :data="{exam_id: examId, cindex: 1, school_id: schoolId}"
                          :action="uploadUrl"
                          :headers="headers"
                          :on-success="handleUpload"
                        >
                          <el-button type="primary" size="small" plain>上传布点</el-button>
                        </el-upload>
                      </el-form-item>
                    </template>

                    <template v-if="item === 'flag_calibrate'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-switch v-model="ruleForm.flag_calibrate" :active-value="1" :inactive-value="0" />
                      </el-form-item>
                    </template>

                    <template v-if="item == 'cam_param_path'">
                      <el-collapse-transition>
                        <div v-show="ruleForm.flag_calibrate">
                          <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                            <el-input v-model="ruleForm.cam_param_path" disabled class="input45" />
                            <!-- <el-button @click.prevent="viewCam(1, 1, ruleForm.cam_fps, 1)" type="primary" size="small" plain>预览</el-button -->>
                            <el-button type="primary" size="small" plain style="margin-left:5px;" @click.prevent="checkAnchorUrl('', 1, 'yml')"
                              >刷新</el-button
                            >
                            <el-upload
                              name="upload_file"
                              style="display: inline-block; margin-left: 5px;"
                              action="#"
                              :show-file-list="false"
                              :data="{exam_id: examId, cindex: 1, school_id: schoolId, up_type:'yml'}"
                              :action="uploadUrl"
                              :headers="headers"
                              :on-success="handleUpload"
                              ><el-button type="primary" size="small" plain>上传矫正</el-button>
                              <el-button
                                type="primary"
                                size="small"
                                plain
                                style="margin-left:5px;"
                                @click.prevent="viewCam(1, 2, ruleForm.cam_fps, 1)"
                                >远程矫正</el-button
                              >
                              <el-button
                                type="primary"
                                size="small"
                                plain
                                style="margin-left:5px;"
                                :disabled="!hasLocSRS"
                                @click.prevent="viewCam(1, 2, ruleForm.cam_fps, 4)"
                                >本地矫正</el-button
                              >
                            </el-upload>
                          </el-form-item>
                        </div>
                      </el-collapse-transition>
                    </template>

                    <template v-if="item == 'cam_0_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <span>
                          <!-- {{ anchorLabelObj[item] }} -->
                          <el-popover placement="right" width="width:30%" trigger="hover">
                            <div style="height:100px; font-size:12px; margin-bottom: 20px;line-height:20px;">
                              <p style="font-size:10px;">
                                大华摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                海康摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                USB摄像头示例: <br />
                                /dev/video0,width=1280,height=720,framerate=30
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('/dev/video0,width=1280,height=720,framerate=30')"
                                >
                                  复制</el-link
                                >
                              </p>
                            </div>
                            <i class="el-icon-question" />
                          </el-popover>
                        </span>
                        <el-input v-model="ruleForm.cam_0_path" style="width:45%; margin-right:5px;" />
                        <span style="margin-right:4px; font-size:10px;">帧率</span>
                        <el-input v-model.number="ruleForm.cam_fps" style="width:9.66%;margin-right:5px;" />
                        <el-button icon="VideoCamera" type="primary" size="small" @click.prevent="viewCam(2, 0, ruleForm.cam_fps, 1)"
                          >远程布点</el-button
                        >
                        <el-button
                          icon="VideoCamera"
                          type="primary"
                          size="small"
                          style="margin-left:5px;"
                          :disabled="!hasLocSRS"
                          @click.prevent="viewCam(2, 0, ruleForm.cam_fps, 3)"
                          >本地布点</el-button
                        >
                      </el-form-item>
                    </template>

                    <template v-if="item == 'anchor_0_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input v-model="ruleForm.anchor_0_path" disabled class="input45" />
                        <el-button type="primary" size="small" plain @click.prevent="showSnap(0, 2)">预览</el-button>
                        <el-button type="primary" size="small" plain style="margin-left:5px;" @click.prevent="checkAnchorUrl('', 2)">刷新</el-button>
                        <el-upload
                          name="upload_file"
                          style="display: inline; margin-left: 5px;"
                          action="#"
                          :show-file-list="false"
                          :data="{exam_id: examId, cindex: 2, school_id: schoolId}"
                          :action="uploadUrl"
                          :headers="headers"
                          :on-success="handleUpload"
                        >
                          <el-button type="primary" size="small" plain>上传布点</el-button>
                        </el-upload>
                      </el-form-item>
                    </template>

                    <template v-if="item == 'cam_face_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <span>
                          <!-- {{ anchorLabelObj[item] }} -->
                          <el-popover placement="right" width="width:30%" trigger="hover">
                            <div style="height:100px; font-size:12px; margin-bottom: 20px;line-height:20px;">
                              <p style="font-size:10px;">
                                大华摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.106:554/cam/realmonitor?channel=1&subtype=0', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                海康摄像头示例: <br />
                                rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('rtsp://admin:tropsedu123@192.168.3.77:554/h265/ch1/main/av_stream', item)"
                                  >选择</el-link
                                >
                              </p>
                              <p style="font-size:10px;">
                                USB摄像头示例: <br />
                                /dev/video0,width=1280,height=720,framerate=30
                                <el-link
                                  type="primary"
                                  style="font-size:10px;"
                                  @click.prevent="copyContent('/dev/video0,width=1280,height=720,framerate=30')"
                                >
                                  复制</el-link
                                >
                              </p>
                            </div>
                            <i class="el-icon-question" />
                          </el-popover>
                        </span>
                        <el-input v-model="ruleForm.cam_face_path" style="width:45% ;margin-right:5px;" clearable />
                        <span style="margin-right:4px; font-size:10px;">帧率</span>
                        <el-input v-model.number="ruleForm.cam_face_fps" style="width:9.66%;margin-right:5px;" />
                        <el-button icon="VideoCamera" type="primary" size="small" @click.prevent="viewCam(0, 0, ruleForm.cam_face_fps, 1)"
                          >远程布点</el-button
                        >
                        <el-button
                          icon="VideoCamera"
                          type="primary"
                          size="small"
                          style="margin-left:5px;"
                          :disabled="!hasLocSRS"
                          @click.prevent="viewCam(0, 0, ruleForm.cam_face_fps, 3)"
                          >本地布点</el-button
                        >
                      </el-form-item>
                    </template>
                    <template v-if="item == 'anchor_face_path'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input v-model="ruleForm.anchor_face_path" disabled class="input45" />
                        <el-button type="primary" size="small" plain @click.prevent="showSnap(0, 0)">预览</el-button>
                        <el-button type="primary" size="small" plain style="margin-left:5px;" @click.prevent="checkAnchorUrl('', 0)">刷新</el-button>
                        <el-upload
                          name="upload_file"
                          style="display: inline; margin-left: 5px;"
                          action="#"
                          :show-file-list="false"
                          :data="{ exam_id: examId, cindex: 0, school_id: schoolId}"
                          :action="uploadUrl"
                          :headers="headers"
                          :on-success="handleUpload"
                        >
                          <el-button type="primary" size="small" plain>上传布点</el-button>
                        </el-upload>
                      </el-form-item>
                    </template>

                    <template
                      v-if="['flag_check_stline', 'flag_check_back',
                             'flag_check_hip', 'flag_check_knee', 'flag_check_stline', 'flag_check_hand', 'flag_check_elbow', 'flag_save',
                             'flag_display', 'flag_check_person', 'flag_check_singleleg_jump'].includes(item)"
                    >
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-switch v-model="ruleForm[item]" :active-value="1" :inactive-value="0" />
                      </el-form-item>
                    </template>

                    <template
                      v-if="['distance_ground', 'length_air_line',
                             'distance_ground_between_lines', 'length_ground_line',
                             'distance_air_between_lines', 'distance_per_round',
                             'num_of_tracks', 'num_of_tracks_startline', 'num_of_tracks_endline', 'delay_cam_second', 'delay_cmd_second'
                      ].includes(item) "
                    >
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input-number v-model="ruleForm[item]" style="width:30%" /><span
                          style="margin-right:4px; padding-left:10px; font-size:18px;"
                          >cm</span
                        >
                      </el-form-item>
                    </template>

                    <template v-if="item == 'difficulty'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input-number v-model="ruleForm.difficulty" :min="0" :max="5" style="width:30%" />
                      </el-form-item>
                    </template>
                    <template v-if="item == 'test_time'">
                      <el-form-item :key="item" :prop="item" :label="anchorLabelObj[item]">
                        <el-input-number v-model="ruleForm.test_time" :min="1" :max="1000" style="width:30%" />
                      </el-form-item>
                    </template>
                  </template>
                </template>
              </el-collapse-item>
            </el-collapse>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { clearInterval, clearTimeout, setInterval, setTimeout } from 'worker-timers';
import dataDictionary from '@/utils/dataDictionary';
import axios from 'axios';
export default {
  name: 'SchoolExamConf',
  components: {},
  data() {
    const Authorization = 'JWT ' + localStorage.getItem('token') || '';
    return {
      userinfo: {},
      project: dataDictionary.project,
      anchorSetsObj: dataDictionary.anchorSetsObj,
      anchorLabelObj: dataDictionary.anchorLabelObj,
      ruleForm: {
        cam_path: '',
        anchor_path: '',

        flag_calibrate: 0,
        cam_param_path: '',
        cam_fps: 25,

        cam_face_path: '',
        cam_face_fps: 25,
        anchor_face_path: '',

        cam_0_path: '',
        anchor_0_path: '',

        flag_check_person: 1,
        flag_check_singleleg_jump: 0,
        distance_maximum: 800,
        height_maximum: 300,
        flag_check_stline: 0,
        flag_check_back: 0,
        flag_check_hip: 0,
        flag_check_knee: 0,
        flag_check_hand: 0,
        flag_check_elbow: 0,

        test_time: 60,
        difficulty: 1,

        distance_per_round: 400,
        num_of_tracks: 1,
        num_of_tracks_startline: 1,
        num_of_tracks_endline: 1,
        delay_cam_second: 0.45,
        delay_cmd_second: 0.2,

        distance_ground_between_lines: 50,
        distance_ground: 1200,
        distance_air_between_lines: 50,
        length_ground_line: 80,
        length_air_line: 50,
        flag_save: 1,
        flag_display: 0
      },
      camData: [],

      rawImags: {},
      jFiles: {},
      uploadUrl: import.meta.env.VITE_APP_BASE_API + '/exam/gpu_anchor_update',
      headers: { Authorization: Authorization },
      disExams: ['jump', 'solidball', 'trijump', 'shotput', 'verticaljump'],
      countExams: ['situp', 'pullup', 'sidepullup', 'jumprope'],
      secResExams: ['football', 'basketball', 'badminton', 'pingpang', 'volleyball'],
      examId: '',
      exam_name: '',
      schoolId: '',
      examCN: '',
      showSnapPics: false,
      snapPic: '',
      playUrl: '',
      rtmpPlayUrl: '',
      rtcPlayUrl: '',
      flvUrl: '',
      showPlayer: false,
      anchorFlag: false,
      caliFlag: false,
      viewCamurl: '',
      picTitle: '测试区布点图',
      camIndex: 1,
      snapUptime: {},
      anchorUptime: {},
      camparamUptime: {},
      stdAnchObj: null,
      cIntervalId: null,
      lstAnchorIvalId: null,
      imgSize: [1280, 720],
      lines: null,
      points: [],
      rawPoints: '[]',
      names: null,
      scaleRate: 1,
      windowHeight: parseInt(window.innerHeight),
      windowWidth: parseInt(window.innerWidth * 0.96),
      xPos: 0,
      scaledWidth: 1080,
      yPos: 0,
      scaledHeight: 720,
      anchorNum: 1,
      video: null,
      dragStartX: 0,
      dragStartY: 0,
      flvPlayer: null,
      rtcPlayer: null,
      srsHost: 'srs.tropsx.com',
      lsrsHost: '',
      playHost: '',
      isLocStream: false,
      checkPSTO: null,
      checkCBFD: null,
      checkUpFID: null,
      // showRequire: true,
      // showAdvance: false,
      // showReserve: false,
      activeNames: ['1'],
      examFormConf: {},
      rawFormData: '{}',
      uutoken: '',
      achorUrlChkId: null,
      hasLocSRS: false,
      btnDis: false,
      zoomRatio: 1,
      lastZoom: 1,
      startDistance: 0,
      rules: {
        // cam_path: [
        //   { required: true, message: '请输入摄像头地址', trigger: 'blur' },
        //   // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        cam_path: [{ required: true, message: '请输入摄像头地址' }],
        anchor_path: [{ required: true, message: '请上传布点文件' }],
        cam_fps: [{ required: true, message: '请输入摄像头帧率' }]
      }
    };
  },
  computed: {
    isDisExams() {
      return this.disExams.includes(this.exam_name);
    },
    isSitup() {
      return this.exam_name === 'situp';
    },
    isJumpRope() {
      return this.exam_name === 'jumprope';
    },
    isJumps() {
      return this.exam_name === 'jump' || this.exam_name === 'trijump';
    },
    isRun() {
      return this.exam_name.indexOf('run') === 0;
    },
    isBackRun() {
      return this.exam_name.indexOf('run') == 0 && this.exam_name.indexOf('x') != -1;
    },
    isShortRun() {
      let c1 = this.exam_name.indexOf('run') == 0;
      let c2 = this.exam_name.indexOf('x') == -1;
      if (c1 && c2) {
        if (this.exam_name.replace('run', '') < 799) {
          return true;
        }
      }
      return false;
    },
    isLongRun() {
      let c1 = this.exam_name.indexOf('run') == 0;
      let c2 = this.exam_name.indexOf('x') == -1;
      if (c1 && c2) {
        if (this.exam_name.replace('run', '') > 799) {
          return true;
        }
      }
      return false;
    },
    isBasicFace() {
      return ['volleyball', 'pingpang', 'badminton'].includes(this.exam_name);
    },
    snapTime() {
      return this.snapUptime[this.camIndex + '_error'] || this.snapUptime[this.camIndex] || '';
    }
  },
  watch: {},
  created() {
    this.examId = this.$route.query.examId;
    console.log(this.examId, 'this.examId');
    let myInfo = localStorage.getItem('userInfo');
    this.userinfo = JSON.parse(myInfo);
    this.schoolId = this.userinfo.school_id;
    this.exam_name = this.examId.split('_')[0];
    this.examIndex = this.examId.split('_')[1];
    this.examCN = this.project[this.exam_name] + '_' + this.examIndex;
    this.isSolidBall = this.exam_name === 'solidball';
    this.isPushBall = ['solidball', 'shotput'].includes(this.exam_name);
    this.isSidepullup = this.exam_name === 'sidepullup';
    this.examFormConf['required'] = JSON.parse(JSON.stringify(this.anchorSetsObj['basic']['required']));
    this.examFormConf['advanced'] = JSON.parse(JSON.stringify(this.anchorSetsObj['basic']['advanced']));
    this.examFormConf['reserved'] = JSON.parse(JSON.stringify(this.anchorSetsObj['basic']['reserved']));
    console.log(this.examFormConf, 'this.examFormConf111');
    let ename;
    if (this.isLongRun) {
      ename = 'longrun';
    } else if (this.isShortRun) {
      ename = 'shortrun';
    } else if (this.isBackRun) {
      ename = 'backrun';
    } else if (this.isBasicFace) {
      ename = 'basicface';
    } else {
      ename = this.exam_name;
    }
    console.log('ename:', ename, 'examId:', this.examId, 'schoolId:', this.schoolId);
    Object.assign(this.examFormConf['required'], this.anchorSetsObj[ename]['required']);
    Object.assign(this.examFormConf['advanced'], this.anchorSetsObj[ename]['advanced']);
    Object.assign(this.examFormConf['reserved'], this.anchorSetsObj[ename]['reserved']);
    for (let i in this.examFormConf['required']) {
      if (!this.rules[i]) {
        let message = `${this.anchorLabelObj[i]}必填`;
        this.rules[i] = [{ required: true, message: message }];
      }
      this.ruleForm[i]=this.examFormConf['required'][i];
    }
    for (let i in this.examFormConf['advanced']) {
      if (i in this.examFormConf['required']) {
        delete this.examFormConf['advanced'][i];
      } else {
        this.ruleForm[i] = this.examFormConf['advanced'][i];
      }
    }
    for (let i in this.examFormConf['reserved']) {
      if (i in this.examFormConf['required'] || i in this.examFormConf['advanced']) {
        delete this.examFormConf['reserved'][i];
      } else {
        this.ruleForm[i] = this.examFormConf['reserved'][i];
      }
    }
    this.getExamConf(); // 获取布点配置
  },

  beforeRouteLeave(to, from, next) {
    if (this.showSnapPics) {
      next(false);
      this.showSnapPics = false;
      return;
    }
    if (this.showPlayer) {
      next(false);
      if (this.rawPoints != JSON.stringify(this.points)) {
        setTimeout(() => {
          this.$confirm('检测到有点位移动没有保存', '确认退出?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.handlePlayerClose();
              return false;
            })
            .catch((err) => {
              console.log(1111, err);
              return false;
            });
        }, 200);
      } else {
        this.handlePlayerClose();
      }
    } else {
      if (this.rawFormData != JSON.stringify(this.ruleForm)) {
        setTimeout(() => {
          this.$confirm('检测到改动未保存', '退出后编辑过的内容将丢失', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              next();
            })
            .catch((err) => {
              next(false);
            });
        }, 200);
      } else {
        next();
      }
    }
  },
  beforeDestroy() {
    let tmparr = [this.checkPSTO, this.cIntervalId, this.lstAnchorIvalId, this.checkCBFD, this.achorUrlChkId];
    tmparr.forEach((i) => {
      clearInterval(i);
    });

    this.$http.deploy.closeLocalStream({ exam_id: this.examId, school_id: this.schoolId });
    this.$http.deploy.closeCaliStream({ exam_id: this.examId, school_id: this.schoolId });
    if (this.flvPlayer) {
      if (this.flvPlayer.destroy) {
        try {
          this.flvPlayer.destroy();
        } catch {
          this.flvPlayer = null;
        }
      } else {
        this.flvPlayer.unsubscribe();
        this.flvPlayer = null;
      }
    }
    if (this.rtcPlayer) {
      try {
        this.rtcPlayer.close();
      } catch {
        this.rtcPlayer = null;
      }
    }
    this.anchorFlag = false;
    this.examFormConf = {};
  },

  mounted() {
    // this.$nextTick(() => {
    //   window.addEventListener('resize', this.onResize);
    // })
  },

  methods: {
    // onResize() {
    //   this.windowHeight = window.innerHeight * 0.9
    //   this.windowWidth = window.innerWidth * 0.9
    // },
    validateIP(str) {
      const re = /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[0-9])\.((1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.){2}(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)$/;
      return re.test(str);
    },

    checkHTTPPageExists(url, callback) {
      let xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function () {
        if (this.readyState === 4) {
          if (this.status === 200) {
            callback(true);
          } else {
            callback(false);
          }
        }
      };
      xhttp.open('HEAD', url, true);
      xhttp.send();
    },

    checkLocRSR() {
      if (this.lsrsHost) {
        let ourl = ['http:/', this.lsrsHost + ':8081', 'players/anchor/index.html'].join('/');
        var vm = this;
        this.checkHTTPPageExists(ourl, function (exists) {
          console.log(exists, 'checkHTTPPageExists');
          if (exists) {
            console.log('HTTP page exists.');
            vm.hasLocSRS = true;
          } else {
            vm.hasLocSRS = false;
            console.log('HTTP page does not exist or is inaccessible.');
          }
        });
      } else {
        this.hasLocSRS = false;
      }
    },

    localView(webrtc) {
      let action = 'anchor_config';
      let ftype = 'json';
      if (webrtc == 4) {
        action = 'camera_param';
        ftype = 'yml';
        clearInterval(this.checkCBFD);
        this.checkCBFD = setInterval(this.checkCalibFshd, 5000, 1);
      } else {
        clearInterval(this.achorUrlChkId);
        this.achorUrlChkId = setInterval(this.checkAnchorUrl, 5000, lsturl, this.camIndex, ftype, 1);
      }
      let ourl = ['http:/', this.lsrsHost + ':8081', 'players/anchor/index.html'].join('/');
      let lsturl =
        '//aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/uploaded_files/settings/' +
        this.uutoken +
        '/' +
        this.examId +
        '_' +
        this.camIndex +
        '.' +
        ftype;
      let ename_str = this.getEName().join('_');
      console.log(ename_str, 'eNameeNameeName');
      let params_str = [
        'camUrl=' + this.viewCamurl,
        'examId=' + this.examId,
        'camIndex=' + this.camIndex,
        'playUrl=' + this.rtcPlayUrl,
        'lastAchUrl=' + lsturl,
        'eName=' + ename_str,
        'token=' + Authorization,
        'baseUrl=' + process.env.VUE_APP_BASE_API2,
        'action=' + action
      ].join('&');
      ourl = ourl + '?' + params_str;
      if (window && window.navigator) {
        window.open(ourl, '_blank');
      } else {
        window.location.href = ourl;
      }
    },

    checkStreamClosed() {
      this.$http.deploy.checkStreamClosd({ dest_uri: this.rtcPlayUrl }).then((res) => {
        console.log('checkStreamClosed', res);
        if (res.status == 200) {
          if (res.data) {
            if (res.data >= '0') {
              this.$modal.msgWarning('推流结束，如您已布点成功且未检测到布点文件请点击刷新按钮');
              clearInterval(this.achorUrlChkId);
            }
          } else {
            this.$modal.msgWarning('正在推流，请继续布点');
          }
        } else {
          clearInterval(this.achorUrlChkId);
        }
        return;
      });
    },

    checkCaliClosed() {
      this.$http.deploy.checkCaliStreamClosd({ exam_id: this.examId }).then((res) => {
        if (res.status == 200) {
          if (res.data) {
            if (res.data >= '0') {
              this.$modal.msgWarning('推流结束，如您矫正成功且未检测到矫正文件请点击刷新按钮');
              clearInterval(this.checkCBFD);
            }
          } else {
            this.$modal.msgWarning('正在推流，请继续矫正');
          }
        } else {
          clearInterval(this.checkCBFD);
        }
        return;
      });
    },

    checkAnchorUrl(url = '', camIndex = this.camIndex, ftype = 'json', chType = 0) {
      if (!url) {
        url =
          '//aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/uploaded_files/settings/' +
          this.uutoken +
          '/' +
          this.examId +
          '_' +
          camIndex +
          '.' +
          ftype;
      }
      axios
        .get(url)
        .then((response) => {
          let anchorPath = 'settings/anchor_files/' + this.examId + '_' + camIndex + '.' + ftype;
          if (camIndex == 1) {
            if (ftype == 'json') {
              if (!this.ruleForm.anchor_path) {
                this.ruleForm.anchor_path = anchorPath;
              }
            } else {
              if (!this.ruleForm.cam_param_path) {
                anchorPath = 'settings/cam_param_files/' + this.examId + '_' + camIndex + '.' + ftype;
                this.ruleForm.cam_param_path = anchorPath;
              }
            }
          } else if (camIndex == 0 && !this.ruleForm.anchor_face_path) {
            this.ruleForm.anchor_face_path = anchorPath;
          } else if (camIndex == 2 && !this.ruleForm.anchor_0_path) {
            this.ruleForm.anchor_0_path = anchorPath;
          }
          this.$modal.msgSuccess('检测到云文件，读取成功');
          if (this.achorUrlChkId) {
            clearInterval(this.achorUrlChkId);
          }
          clearInterval(this.achorUrlChkId);
        })
        .catch((error) => {
          if (ftype == 'json') {
            if (chType) {
              this.checkStreamClosed();
            } else {
              clearInterval(this.achorUrlChkId);
              this.$modal.msgError('未检测到云文件，读取失败');
            }
          } else {
            if (chType) {
              this.checkCaliClosed();
            } else {
              this.$modal.msgError('矫正未完成，读取失败');
            }
          }
        });
    },

    async viewCam(cindex, cali = 0, cam_fps = 0, webrtc = 0) {
      if (!cam_fps) {
        this.$modal.msgError('请输入摄像头帧率');
        return;
      }
      if (cindex == 0) {
        this.viewCamurl = this.ruleForm.cam_face_path;
      } else if (cindex == 1) {
        this.viewCamurl = this.ruleForm.cam_path;
      } else if (cindex == 2) {
        this.viewCamurl = this.ruleForm.cam_0_path;
      }
      if (!this.viewCamurl) {
        this.$modal.msgError('请输入摄像头地址');
        return;
      }
      if (webrtc == 2 && !this.validateIP(this.playHost)) {
        this.$modal.msgError('请输入正确局域网srs IP');
        return;
      }
      this.camIndex = cindex;
      let src_uri = this.viewCamurl;
      if (cali == 1) {
        if (!this.ruleForm.cam_param_path) {
          this.$modal.msgError('请先生成矫正文件');
          return;
        }
      }
      this.isLocStream = false;
      var pushHost = 'alilive-push.tropsx.com';
      var playHost;
      let port = 443;
      let schema = window.location.protocol;
      if (webrtc == 1) {
        pushHost = this.srsHost;
        port = 8088;
        playHost = this.srsHost;
        schema = 'https:';
      } else if (webrtc == 2) {
        pushHost = this.playHost;
        port = 8080;
        playHost = this.playHost;
        schema = 'http:';
      } else if (webrtc == 3 || webrtc == 4) {
        playHost = this.lsrsHost;
        port = 8081;
        pushHost = this.lsrsHost;
        schema = 'http:';
      } else {
        if (schema == 'http:') {
          port = 80;
        }
        playHost = 'alilive-play.tropsx.com';
      }
      let baseUrl = [pushHost, this.schoolId, this.examId + '_' + cindex + '_' + cali].join('/');
      let dest_uri = ['rtmp:/', baseUrl].join('/');
      await this.$http.deploy.closeLocalStream({ exam_id: this.examId, school_id: this.schoolId });
      await this.$http.deploy.closeCaliStream({ exam_id: this.examId, school_id: this.schoolId });
      if (port != 80) {
        this.flvUrl = [schema + '/', baseUrl + '.flv'].join('/');
        this.playUrl = ['artc:' + '/', baseUrl].join('/');
      } else {
        this.flvUrl = [schema + '/', baseUrl + '.flv'].join('/');
        this.playUrl = ['artc:' + '/', baseUrl].join('/');
      }

      this.rtmpPlayUrl = ['rtmp:/', baseUrl].join('/');
      this.rtcPlayUrl = ['webrtc:/', baseUrl].join('/'); // 'webrtc://srs.xmtel.com:443/live/3/jump_76_1_0'
      let params = { exam_id: this.examId, src_uri: src_uri, dest_uri: dest_uri, school_id: this.schoolId, cam_fps, cali };
      if (this.ruleForm.flag_calibrate && this.camIndex == 1 && cali != 2) {
        if (!this.ruleForm.cam_param_path) {
          this.$modal.msgWarning('您已开启矫正，请配置矫正文件');
          return;
        }
        params['cam_param_path'] = this.ruleForm.cam_param_path;
      }

      await this.$http.deploy.pushLocalStream(params).then((res) => {
        if (webrtc == 3 || webrtc == 4) {
          this.localView(webrtc);
        } else {
          this.showPlayer = true;
          if (webrtc) {
            this.$nextTick(() => {
              this.flvPlayer = null;
              this.playRtc();
            });
          } else {
          }
          clearInterval(this.checkPSTO);
          this.checkPSTO = setInterval(this.checkPushStream, 3500);
          if (cali === 2) {
            this.caliFlag = true;
            clearInterval(this.checkCBFD);
            this.checkCBFD = setInterval(this.checkCalibFshd, 5000);
          }
        }
      });
    },

    initSuccess() {
      let aspectRatio = this.video.videoWidth / this.video.videoHeight;
      this.scaledWidth = this.windowWidth;
      this.scaledHeight = this.windowWidth / aspectRatio;
      if (this.scaledHeight > this.windowHeight) {
        this.scaledHeight = this.windowHeight;
        this.scaledWidth = this.windowHeight * aspectRatio;
      }
      this.xPos = (this.windowWidth - this.scaledWidth) / 2;
      this.yPos = (this.windowHeight - this.scaledHeight) / 2;
      this.anchorFlag = true;
      this.imgSize = [this.video.videoWidth, this.video.videoHeight];
      setTimeout(function () {
        console.log(this.flvPlayer);
        if (this.flvPlayer) {
          this.flvPlayer.play();
        }
      }, 100);
    },

    playLocStream() {
      this.video = document.getElementById('videoflv');
      var vm = this;
      let videoSelect = document.querySelector('select#videoSource');
      console.log('playLocStream', this.video);
      this.video.width = this.windowWidth;
      this.video.height = this.windowHeight;
      function getDevices() {
        return navigator.mediaDevices.enumerateDevices();
      }
      function gotDevices(deviceInfos) {
        console.log('Available input and output devices:', deviceInfos);
        for (const deviceInfo of deviceInfos) {
          if (deviceInfo.deviceId) {
            const option = document.createElement('option');
            option.value = deviceInfo.deviceId;
            if (deviceInfo.kind === 'videoinput' && deviceInfo.deviceId !== '') {
              option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`;
              videoSelect.appendChild(option);
            }
          }
        }
      }
      function getStream() {
        if (vm.video.srcObject) {
          vm.video.srcObject.getTracks().forEach((track) => {
            track.stop();
          });
        }
        const videoSource = videoSelect.value;
        const constraints = {
          video: { deviceId: videoSource ? { exact: videoSource } : undefined }
        };
        return navigator.mediaDevices
          .getUserMedia(constraints)
          .then(gotStream)
          .catch((error) => {
            console.error('Error: ', error);
          });
      }

      function gotStream(stream) {
        // window.stream = stream; // make stream available to console
        videoSelect.selectedIndex = [...videoSelect.options].findIndex((option) => option.text === stream.getVideoTracks()[0].label);
        vm.video.srcObject = stream;
      }
      videoSelect.onchange = getStream;
      getStream().then(getDevices).then(gotDevices);

      // navigator.mediaDevices.getUserMedia({video: true})
      // .then(stream => {
      //   // Set video source and play
      //   this.video.srcObject = stream;
      //   this.video.play();
      // })
      // .catch(err => {
      //   console.error(err);
      // });
      this.video.addEventListener('loadedmetadata', this.initSuccess);
    },
    checkCalibFshd(isLocal = 0) {
      this.$http.deploy.checkCaliRes({ exam_id: this.examId }).then((res) => {
        console.log(res, res.data, 'checkCaliRes');
        if (res.data.error_message) {
          if (res.data.error_code == '0') {
            this.$modal.msgSuccess('矫正已完成');
            // this.ruleForm.cam_param_path = "settings/cam_param_files/"+this.examId+"_"+this.camIndex+".yml"
            if (!this.ruleForm.cam_param_path) {
              this.ruleForm.cam_param_path = res.data.cam_param_path;
            }
            this.caliFlag = false;
          } else {
            this.$modal.msgError(`矫正失败，原因：${res.data.error_message}`);
          }
          if (isLocal >= 1) {
            clearInterval(this.checkCBFD);
          }
          // if (this.checkCBFD) {
          //   clearInterval(this.checkCBFD)
          // }
        } else {
          if (isLocal == 1) {
            this.$modal.msgWarning('矫正未完成，检测中');
          } else if (isLocal == 2) {
            this.$modal.msgWarning('未找到矫正记录');
          } else {
            this.$modal.msgWarning('请将棋盘放到摄像头前进行矫正');
          }
        }
      });
    },
    checkPushStream() {
      this.$http.deploy
        .checkPushStream({
          dest_uri: this.rtmpPlayUrl
        })
        .then((res) => {
          console.log('ressts', res);
          if (res == -1) {
            this.$modal.msgWarning('开启推流中，请稍等');
          } else if (res == '推流成功') {
            this.$modal.msgSuccess('推流成功');
            if (this.checkPSTO) {
              clearInterval(this.checkPSTO);
            }
          } else {
            this.$modal.msgError(`推流失败，原因：${res}`);
          }
        });
    },

    playRtc() {
      if (this.rtcPlayer) {
        this.rtcPlayer.close();
      }
      var vm = this;
      this.video = document.getElementById('videoflv');
      this.video.width = this.windowWidth;
      this.video.height = this.windowHeight;
      this.rtcPlayer = new this.SrsRtcPlayerAsync();
      this.video.srcObject = this.rtcPlayer.stream;
      // $('#videoflv').prop('srcObject', this.rtcPlayer.stream);
      this.rtcPlayer
        .play(this.rtcPlayUrl)
        .then(function (session) {
          // vm.anchorFlag = true
          vm.video.play();
          vm.initSuccess();
        })
        .catch(function (reason) {
          if (vm.rtcPlayer) {
            vm.rtcPlayer.close();
          }
          console.error(reason);
        });
      this.video.addEventListener('loadedmetadata', this.initSuccess);
      // this.video.addEventListener('canplay', this.initSuccess);
    },

    handlBeforeClose(done = null) {
      if (this.rawPoints != JSON.stringify(this.points)) {
        this.$confirm('检测到有点位移动没有保存', '确认退出?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            if (done) done();
            return true;
          })
          .catch((err) => {
            console.log(1111, err);
            return false;
          });
      } else {
        if (done) done();
        return true;
      }
    },

    handlePlayerClose() {
      if (this.isLocStream) {
        this.video.srcObject.getTracks().forEach((track) => {
          track.stop();
        });
        // this.video.stop()
      } else {
        if (this.checkPSTO) {
          this.$http.deploy.closeLocalStream({ exam_id: this.examId, school_id: this.schoolId });
        }
        if (this.checkCBFD) {
          this.$http.deploy.closeCaliStream({ exam_id: this.examId, school_id: this.schoolId });
        }

        if (this.flvPlayer) {
          if (this.flvPlayer.destroy) {
            this.flvPlayer.destroy();
          } else {
            this.flvPlayer.unsubscribe();
          }
        }
        if (this.rtcPlayer) {
          this.rtcPlayer.close();
          this.video.pause();
        }
      }
      this.showPlayer = false;
      this.anchorFlag = false;
      this.caliFlag = false;
      console.log('closed!!');
      let tmparr = [this.checkPSTO, this.cIntervalId, this.lstAnchorIvalId, this.checkCBFD];
      tmparr.forEach((item) => {
        if (item) clearInterval(item);
      });
    },

    upSnapShotInfos(onlyShow, up_type = 'all') {
      let params = { exam_id: this.examId, no_req: onlyShow, qindex: this.camIndex, school_id: this.schoolId, up_type: up_type };
      if (this.camIndex == 1) {
        params['cam_path'] = this.ruleForm.cam_path;
        params['anchor_path'] = this.ruleForm.anchor_path;
        params['cam_param_path'] = this.ruleForm.cam_param_path;
      } else if (this.camIndex == 0) {
        params['cam_path'] = this.ruleForm.cam_face_path;
        params['anchor_path'] = this.ruleForm.anchor_face_path;
      } else if (this.camIndex == 2) {
        params['cam_path'] = this.ruleForm.cam_0_path;
        params['anchor_path'] = this.ruleForm.anchor_0_path;
      }
      // if (!params['cam_path'] || !params['anchor_path']) {
      //   this.$modal.msgError("请先配置摄像头地址和布点文件");
      //   return
      // }
      this.$http.deploy.getExamSnapShot(params).then((res) => {
        console.log(res, 'getExamSnapShot');
        // res.data.exam_imgs.forEach(img => {
        //   this.snapPics.push(img + "?" + Math.random())
        // })
        setTimeout(() => {
          if (res.data.exam_imgs.length == 1) {
            this.snapPic = res.data.exam_imgs[0] + '?' + Math.random();
          } else {
            this.snapPic = res.data.exam_imgs[this.camIndex] + '?' + Math.random();
          }
          // $('#snapPic').attr('src', this.snapPic)
          this.rawImags = res.data.raw_imgs;
          this.jFiles = res.data.j_files;
          this.snapUptime = res.data.snappic_uptime;
          this.anchorUptime = res.data.anchor_uptime;
          this.camparamUptime = res.data.camparam_uptime;
        }, 1500);
      });
    },

    showSnap(onlyShow = 0, camIndex = 1, up_type = 'snapshot') {
      this.camIndex = camIndex;
      if (camIndex == 0) {
        this.picTitle = this.examCN + '人脸区布点图';
        if (!this.ruleForm.cam_face_path || !this.ruleForm.anchor_face_path) {
          this.$modal.msgError('请配置人脸摄像头和人脸布点文件');
          return;
        }
      } else if (camIndex == 1) {
        if (!this.ruleForm.cam_path || !this.ruleForm.anchor_path) {
          this.$modal.msgError('请配置测试摄像头和测试布点文件');
          return;
        }
        this.picTitle = this.examCN + '测试区布点图';
      } else if (camIndex == 2) {
        if (!this.ruleForm.cam_0_path || !this.ruleForm.anchor_0_path) {
          this.$modal.msgError('请配置辅助摄像头和辅助布点文件');
          return;
        }
        this.picTitle = this.examCN + '辅助区布点图';
      }

      // this.snapPics = []
      this.upSnapShotInfos(onlyShow, up_type);
      if (!this.showSnapPics) {
        this.showSnapPics = true;
      }
    },

    // getGExamConfs() {
    //   getGPUExamconfs(
    //     { exam_id: this.examId }
    //   ).then(res => {
    //     this.camData = res
    //   })
    // },

    onlyDownFile(url) {
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.style.height = 0;
      //iframe.src = url + '?response-content-type=application/octet-stream';
      iframe.src = url;
      console.log(url, 'Url onlyDownFile');
      document.body.appendChild(iframe);
      // 不能马上将iframe进行删除，否者会出现马上取消的情况
      setTimeout(() => {
        iframe.remove();
      }, 5000);
      // this.$modal.msgSuccess('文件下载成功');
    },

    checkPermission(fileUrl, fname) {
      // let permissions = cordova.plugins.permissions
      // permissions.checkPermission(permissions.READ_EXTERNAL_STORAGE, checkPermissionCallback, null)

      // Checking for permissions
      // function checkPermissionCallback(status) {
      //   console.log('checking permissions')
      //   console.log(status)
      //   if (!status.hasPermission) {
      //     var errorCallback = function () {
      //       console.warn('Storage permission is not turned on')
      //     }
      //     // Asking permission to the user
      //     permissions.requestPermission(
      //       permissions.READ_EXTERNAL_STORAGE,
      //       function (status) {
      //         if (!status.hasPermission) {
      //           errorCallback()
      //         } else {
      //           // proceed with downloading
      //           downloadFile()
      //         }
      //       },
      //       errorCallback)
      //   } else {
      //     downloadFile() }
      // }
      // fileUrl = "https:" + fileUrl
      function downloadFile(fileUrl, fname) {
        try {
          let filePath = cordova.file.externalApplicationStorageDirectory + fname;
          let fileTransfer = new FileTransfer();
          let uri = encodeURI(fileUrl);
          // alert(uri)
          // alert(filePath)
          // Downloading the file
          fileTransfer.download(
            uri,
            filePath,
            function (entry) {
              this.$modal.msgSuccess(`文件存储于：${entry.fullPath}`);
            },
            function (error) {
              alert('error' + error.code);
              alert('error' + error);
            },
            false
          );
        } catch (e) {
          alert(e);
        }
      }
      downloadFile(fileUrl, fname);
    },

    getSampleFile(url, fname) {
      var xhr = new XMLHttpRequest();
      xhr.open('get', url, false);
      // xhr.responseType = 'blob'
      xhr.send(null);
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        // console.log(xhr.response);
        alert(xhr.response);
        let dataObj = xhr.response;
        // let dataObj = new Blob([xhr.response], { type: 'text/plain' })
        this.cordovaDownFile(dataObj, fname);
      }
    },
    cordovaDownFile(blob, fname) {
      function writeFile(fileEntry, dataObj) {
        fileEntry.createWriter(function (fileWriter) {
          fileWriter.onwriteend = function () {
            alert('Successful file write...');
            alert(fileEntry.fullPath);
          };

          fileWriter.onerror = function (e) {
            alert('Failed file write: ' + e.toString());
          };

          fileWriter.write(dataObj);
        });
      }

      const onError = function (msg) {
        alert('error:' + msg.code);
        alert(Object.keys(msg) + '');
        alert('error:' + msg.toString());
      };

      let downDir = cordova.file.externalRootDirectory + 'Download/';
      // alert(downDir)
      window.resolveLocalFileSystemURL(
        downDir,
        function (fdir) {
          alert(fdir);
          fdir.getFile(
            fname,
            { create: true },
            function (file) {
              file.createWriter(function (fileWriter) {
                alert('Writing content to file');
                fileWriter.onwriteend = function () {
                  alert('Successful file write...');
                };

                fileWriter.onerror = function (e) {
                  alert('Failed file write: ' + e.toString());
                };
                fileWriter.write(blob);
              }, onError);
            },
            onError
          );
        },
        onError
      );
      // window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
      //     // Make sure you add the domain name to the Content-Security-Policy <meta> element.
      //     alert('file system open: ' + fs.name)
      //     fs.root.getFile(fname, { create: true, exclusive: false },
      //         function (fileEntry) {
      //           alert("fileEntry is file?" + fileEntry.isFile.toString())
      //           writeFile(fileEntry, blob);
      //       }, onError);
      // },onError);
    },

    downloadFile(url) {
      const fileUrl = url + '?response-content-type=application/octet-stream'; // Replace with your file URL
      let urspll = url.split('/');
      let fname = urspll[urspll.length - 1];
      if (window.cordova) {
        try {
          this.checkPermission(url, fname);
        } catch (e) {
          alert(e);
        }
      } else {
        this.onlyDownFile(url);
      }
    },

    handleDown(row) {
      let rawImg = this.rawImags[row];
      let jFile = this.jFiles[row];
      if (!jFile) {
        this.$modal.msgError('链接获取失败，建议在预览页面查看矫正文件是否上传');
        return;
      }
      let files = [
        { url: jFile, name: '布点文件' },
        { url: rawImg, name: '原图' }
      ];
      files.forEach((url) => {
        const iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.style.height = 0;
        iframe.src = url.url;
        document.body.appendChild(iframe);
        // 不能马上将iframe进行删除，否者会出现马上取消的情况
        setTimeout(() => {
          iframe.remove();
        }, 3 * 1000);
      });
    },

    downCamParamFile() {
      let jfile = this.jFiles[1];
      if (!jfile) {
        this.$modal.msgError('请先预览布点文件再下载');
        return;
      } else if (!this.camparamUptime[1]) {
        this.$modal.msgError('该摄像头未矫正');
        return;
      }
      let cpfile = jfile.substring(0, jfile.length - 4) + 'yml';
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.style.height = 0;
      iframe.src = cpfile;
      document.body.appendChild(iframe);
      // 不能马上将iframe进行删除，否者会出现马上取消的情况
      setTimeout(() => {
        iframe.remove();
      }, 3 * 1000);
    },

    checkUpFIrr(up_type, cindex, loading) {
      this.$http.deploy
        .getExamSnapShot({
          exam_id: this.examId,
          no_req: 1,
          qindex: cindex,
          school_id: this.schoolId,
          cam_path: this.ruleForm.cam_path,
          anchor_path: this.ruleForm.anchor_path,
          cam_param_path: this.ruleForm.cam_param_path,
          up_type: up_type
        })
        .then((res) => {
          console.log(res, 'checkUpFIrr');
          if (up_type == 'json') {
            let ach_err = res.data.anchor_uptime[cindex + '_error'];
            if (ach_err == '文件校验中，请稍等') {
              this.$modal.msgWarning(ach_err);
            } else {
              if (loading) {
                setTimeout(() => {
                  loading.close();
                  loading = null;
                }, 1000);
              }
              if (this.checkUpFID) clearInterval(this.checkUpFID);
              if (ach_err) {
                this.$modal.msgError(`布点文件校验失败，原因：${ach_err}`);
              } else {
                this.$modal.msgSuccess('布点文件上传成功!');
                this.setFormPath(cindex, up_type);
              }
            }
          } else if (up_type == 'yml') {
            let camP_err = res.data.camparam_uptime[cindex + '_error'];
            if (camP_err == '上传文件校验中，请稍等') {
              this.$modal.msgWarning(ach_err);
            } else {
              if (loading) {
                setTimeout(() => {
                  loading.close();
                  loading = null;
                }, 1000);
              }
              if (this.checkUpFID) clearInterval(this.checkUpFID);
              if (camP_err) {
                this.$modal.msgError(`矫正文件校验失败，原因：${camP_err}`);
              } else {
                clearInterval(this.checkUpFID);
                this.$modal.msgSuccess('矫正文件上传成功!');
                this.setFormPath(cindex, up_type);
              }
            }
          }
        });
    },

    setFormPath(cindex, up_type) {
      this.showPlayer = false;
      if (up_type == 'yml') {
        if (cindex == 1 && !this.ruleForm.cam_param_path) {
          this.ruleForm.cam_param_path = 'settings/cam_param_files/' + this.examId + '_' + cindex + '.yml';
        }
      } else {
        if (cindex == 1 && !this.ruleForm.anchor_path) {
          this.ruleForm.anchor_path = 'settings/anchor_files/' + this.examId + '_' + cindex + '.json';
        } else if (cindex == 0 && !this.ruleForm.anchor_face_path) {
          this.ruleForm.anchor_face_path = 'settings/anchor_files/' + this.examId + '_' + cindex + '.json';
        } else if (cindex == 2 && !this.ruleForm.anchor_0_path) {
          this.ruleForm.anchor_0_path = 'settings/anchor_files/' + this.examId + '_' + cindex + '.json';
        }
      }
    },

    handleUpload(res, f, flist, loading = null) {
      if (this.checkUpFID) {
        clearInterval(this.checkUpFID);
      }
      if (res.status != 200) {
        this.message.error(res.message);
        return;
      }
      let cindex = Number(res.cindex);
      let up_type = res.up_type;
      console.log(res, 'handleUploadhandleUpload');
      clearInterval(this.checkUpFID);
      this.checkUpFID = setInterval(this.checkUpFIrr, 2000, up_type, cindex, loading);
    },

    async getExamConf() {
      await this.$http.deploy.getExamSettings({ school_id: this.schoolId, exam_id: this.examId }).then((res) => {
        // this.ruleForm = Object.assign({}, res.data)
        if (res.status != 200) {
          this.$modal.msgError(res.message);
          return;
        }
        this.uutoken = res.uutoken;
        if (res.localip) {
          this.lsrsHost = res.localip;
        }
        if (res.haslocalsrs) {
          if (res.haslocalsrs == '0') {
            this.hasLocSRS = true;
          }
        }
        let version = 0;
        if (res.version) {
          version = res.version;
          console.log('version: ', version);
        }

        Object.keys(this.ruleForm).forEach((key) => {
          // console.log(key, res.data[key], "11112222333")
          if (key in res.data) {
            this.ruleForm[key] = res.data[key];
          } else if (!(key in this.examFormConf['required'] || key in this.examFormConf['advanced'] || key in this.examFormConf['reserved'])) {
            delete this.ruleForm[key];
          }
          if (version < 2.5) {
            delete this.ruleForm['flag_check_singleleg_jump'];
            if (this.exam_name == 'situp') {
              delete this.ruleForm['flag_check_elbow'];
            }
          }
        });
        this.rawFormData = JSON.stringify(this.ruleForm);
        console.log(res, 'finalformres');
        if (!this.hasLocSRS) {
          this.checkLocRSR();
        }
      });
    },

    submitForm(formName, restart) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let tmpFdata = JSON.stringify(this.ruleForm);
          this.$http.deploy.upExamSettings({ school_id: this.schoolId, exam_id: this.examId, js_data: tmpFdata, restart }).then((res) => {
            this.rawFormData = tmpFdata;
            if (res.message == 'ok') {
              this.$modal.msgSuccess('更新成功');
            } else {
              this.$modal.msgError(res.message);
            }
            console.log(res);
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    clearFormValue(field) {
      this.ruleForm[field] = '';
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    back() {
      this.$router.go(-1);
      // this.$router.back()
    },
    getEName() {
      let ename = this.exam_name;
      let posi = '';
      if (this.isShortRun) {
        ename = 'shortrun';
      } else if (this.isLongRun) {
        ename = 'longrun';
      } else if (this.isBackRun) {
        ename = 'backrun';
      }
      if (this.camIndex == 0) {
        if (ename.indexOf('run') > -1) {
          ename += '_st';
        } else {
          ename = 'face';
        }
      } else if (this.camIndex === 1) {
        if (this.isDisExams) {
          posi = 'left';
        }
      } else if (this.camIndex === 2) {
        posi = '2';
      }
      return [ename, posi];
    },
    loadAnchorFile(file) {
      let reader = new FileReader(); // 新建一个FileReader
      reader.readAsText(file, 'UTF-8'); // 读取文件
      reader.onload = (evt) => {
        // 读取文件完毕执行此函数
        console.log(evt.target.result, 'evt.target.result');
        const dataJson = JSON.parse(evt.target.result);
        console.log(dataJson, 'dataJson');
        this.anchorNum = dataJson.num || 1;
        this.runStartAnchor(dataJson.names, dataJson.connects, dataJson.keypoints, dataJson.imagesize);
      };
      return false;
    },

    saveAnchor() {
      if (!this.names) {
        this.$modal.msgError('请进入布点或加载布点文件');
        return;
      }
      let keypoints = [];
      const loading = this.$loading({
        lock: true,
        text: '正在保存中...',
        spinner: 'el-icon-loading'
        // background: 'rgba(0, 0, 0, 0.7)'
      });
      this.points.forEach((point) => {
        keypoints.push(parseInt((point.x - this.xPos) * (this.imgSize[0] / this.scaledWidth)));
        keypoints.push(parseInt((point.y - this.yPos) * (this.imgSize[1] / this.scaledHeight)));
      });
      let jsData = { names: this.names, imagesize: this.imgSize, connects: this.connects, keypoints: keypoints, num: this.anchorNum };
      this.$http.deploy.saveAnchorPt({ exam_id: this.examId, cindex: this.camIndex, school_id: this.schoolId, js_data: jsData }).then((res) => {
        if (res.status == 200) {
          this.handleUpload(res, null, [], loading);
          this.rawPoints = JSON.stringify(this.points);
        }
      });
    },

    lastAnchor() {
      this.btnDis = true;
      let url =
        '//aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/uploaded_files/settings/' +
        this.uutoken +
        '/' +
        this.examId +
        '_' +
        this.camIndex +
        '.json' +
        '?' +
        Math.random();
      this.downAnchorFile(url, 'load', 'anchor_config', this.camIndex);
    },

    upAndDownPFile(cindex, ftype = 'json') {
      let url =
        '//aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/uploaded_files/settings/' + this.uutoken + '/' + this.examId + '_' + cindex + '.' + ftype;
      console.log(url, 'upAndDownPFile');
      let upType = 'anchor_config';
      if (ftype == 'yml') {
        upType = 'camera_param';
      }
      this.downAnchorFile(url, 'down', upType, cindex);
    },

    downAnchorFile(url, _type = 'load', upType = 'anchor_config', cindex = 1) {
      this.upSnapShotInfos(0, upType);
      this.$modal.msgWarning('正在获取文件，请稍等');
      setTimeout(() => {
        axios
          .get(url)
          .then((response) => {
            console.log(response);
            let anchorErr;
            if (upType == 'anchor_config') {
              anchorErr = this.anchorUptime['error'] || this.anchorUptime[cindex + '_error'];
            } else {
              anchorErr = this.camparamUptime[cindex + '_error'];
            }
            this.btnDis = false;
            if (anchorErr) {
              clearInterval(this.lstAnchorIvalId);
              this.$modal.msgError(`${anchorErr}，无法获取文件`);
              return;
            }
            if (this.lstAnchorIvalId) {
              clearInterval(this.lstAnchorIvalId);
            }
            if (_type == 'load') {
              this.stdAnchObj = response.data;
              this.$modal.msgSuccess('上次布点加载成功。');
              this.runStartAnchor(this.stdAnchObj.names, this.stdAnchObj.connects, this.stdAnchObj.keypoints, this.stdAnchObj.imagesize);
            } else if (_type == 'down') {
              this.downloadFile(url);
            } else {
            }
          })
          .catch((error) => {
            if (upType == 'anchor_config') {
              this.btnDis = false;
              let anchorErr = this.anchorUptime['error'] || this.anchorUptime[this.camIndex + '_error'];
              if (anchorErr) {
                if (this.lstAnchorIvalId) {
                  clearInterval(this.lstAnchorIvalId);
                  this.btnDis = false;
                }
                this.$modal.msgError(`${anchorErr}，无法获取上次布点`);
                return;
              }
              // this.lstAnchorIvalId = setInterval(
              //    this.downAnchorFile, 3000, url, 'down', upType)
            } else {
              let anchorErr = this.camparamUptime['error'] || this.camparamUptime[this.camIndex + '_error'];
              if (anchorErr) {
                this.$modal.msgError(`${anchorErr}，无法获取矫正文件`);
                return;
              }
            }
          });
      }, 3500);
    },
    startAnchor(lsturl = '') {
      let ep = this.getEName();
      let ename = ep[0];
      let posi = ep[1];
      let url = `https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/uploaded_files/std_anchors/${ename}_${posi}.json`;
      axios
        .get(url)
        .then((response) => {
          console.log(response);
          this.stdAnchObj = response.data;
          this.runStartAnchor(this.stdAnchObj.names, this.stdAnchObj.connects, this.stdAnchObj.keypoints, this.stdAnchObj.imagesize);
        })
        .catch((error) => {
          if (ename in this.anchorSetsObj) {
            this.stdAnchObj = this.anchorSetsObj[ename];
          } else {
            this.stdAnchObj = this.anchorSetsObj['basic'];
          }
          this.runStartAnchor(this.stdAnchObj.names, this.stdAnchObj.connects);
          console.log(this.stdAnchObj, 'this.stdAnchObj');
          return null;
        });
    },

    calculateDistance(touch1, touch2) {
      const dx = touch1.clientX - touch2.clientX;
      const dy = touch1.clientY - touch2.clientY;
      return Math.sqrt(dx * dx + dy * dy);
    },

    runStartAnchor(names = null, connects = null, kPoints = null, imagesize = null) {
      var vm = this;
      let video = this.video;
      this.video.style.display = 'none';
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      // const aliplayer = this.$refs['playerRef'];
      // aliplayer.pause()
      canvas.height = this.windowHeight;
      canvas.width = this.windowWidth;
      if (this.cIntervalId) {
        clearInterval(this.cIntervalId);
      }
      this.lines = [];
      let anchorObj = this.stdAnchObj;
      if (!connects) {
        this.connects = [];
        this.lines = anchorObj['lines'];
        this.lines.forEach((line) => {
          this.connects.push(line[0]);
          this.connects.push(line[1]);
        });
      } else {
        this.connects = connects;
        for (let l = 0; l < connects.length / 2; l++) {
          this.lines.push([connects[2 * l], connects[2 * l + 1]]);
        }
      }
      if (!names) {
        this.names = anchorObj['names'];
      } else this.names = names;
      if (!imagesize) {
        imagesize = this.imgSize;
      }
      this.points = [];

      if (!kPoints) {
        this.names.forEach((name, idx) => {
          let ix = idx % 16;
          let iy = parseInt(idx / 16);
          let x = (10 + 40 * ix) / (imagesize[0] / this.scaledWidth) + this.xPos;
          let y = (40 + 40 * iy) / (imagesize[1] / this.scaledHeight) + this.yPos;
          this.points.push({ x: x, y: y, name: name });
        });
      } else {
        console.log(imagesize, 'imagesize', this.scaledWidth, this.xPos);
        this.names.forEach((name, idx) => {
          let x = kPoints[idx * 2] / (imagesize[0] / this.scaledWidth) + this.xPos;
          let y = kPoints[idx * 2 + 1] / (imagesize[1] / this.scaledHeight) + this.yPos;
          this.points.push({ x: x, y: y, name: name });
        });
      }
      this.rawPoints = JSON.stringify(this.points);
      // Define dragging variables
      var isDragging = false;
      var dragIndex = -1;
      var isZoom = false;
      // var xRate = vm.scaledWidth/this.video.videoWidth
      // var yRate = vm.scaledHeight/this.video.videoHeight
      console.log(vm.yPos, vm.xPos, vm.scaledWidth, vm.scaledHeight);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      run();

      function scaledX(xal) {
        return (xal - vm.xPos) * vm.zoomRatio + vm.xPos;
      }
      function scaledY(yval) {
        return (yval - vm.yPos) * vm.zoomRatio + vm.yPos;
      }

      function pointSelect(e) {
        if (isDragging || isZoom) {
          return;
        }

        const touchPoints = e.touches;
        // if (!touchPoints) {
        //   return
        // }
        if (touchPoints && touchPoints.length === 2) {
          const touch1 = touchPoints[0];
          const touch2 = touchPoints[1];
          vm.startDistance = vm.calculateDistance(touch1, touch2);
          this.lastZoom = vm.zoomRatio;
          isZoom = true;
        } else {
          const rect = canvas.getBoundingClientRect();
          if (e.touches) {
            let tcl = e.touches.length;
            let tctx = 0;
            let tcty = 0;
            console.log(typeof e.touches);
            Object.keys(e.touches).forEach((key) => {
              let touch = e.touches[key];
              tctx += touch.clientX;
              tcty += touch.clientY;
            });
            e.clientX = tctx / tcl;
            e.clientY = tcty / tcl;
          }
          console.log(e, rect.left, rect.top, '!!!');
          const mouseX = e.clientX - rect.left;
          const mouseY = e.clientY - rect.top;
          // Check if mouse is over a point

          dragIndex = vm.points.findIndex((point) => {
            return Math.abs(scaledX(point.x) - mouseX) <= 18 && Math.abs(scaledY(point.y) - mouseY) <= 18;
          });
          // Set dragging variables
          if (dragIndex !== -1) {
            isDragging = true;
            this.dragStartX = scaledX(vm.points[dragIndex].x);
            this.dragStartY = scaledY(vm.points[dragIndex].y);
          }
        }
      }

      function drag(e) {
        if (isDragging) {
          e.preventDefault();
          const rect = canvas.getBoundingClientRect();
          if (e.touches) {
            let tcl = e.touches.length;
            console.log(tcl, 'tcl');
            let tctx = 0;
            let tcty = 0;
            Object.keys(e.touches).forEach((key) => {
              let touch = e.touches[key];
              tctx += touch.clientX;
              tcty += touch.clientY;
            });
            e.clientX = tctx / tcl;
            e.clientY = tcty / tcl;
          }
          let currentx;
          let currenty;
          console.log(vm.xPos, e.clientX, rect.left, 'Dragdrag...');
          if (e.clientX > vm.scaledWidth * vm.zoomRatio + vm.xPos + rect.left) {
            currentx = vm.scaledWidth * vm.zoomRatio + vm.xPos + rect.left;
          } else if (e.clientX < vm.xPos + rect.left) {
            currentx = vm.xPos + rect.left;
          } else {
            currentx = e.clientX;
          }
          if (e.clientY > vm.scaledHeight * vm.zoomRatio + vm.yPos + rect.top) {
            currenty = vm.scaledHeight * vm.zoomRatio + vm.yPos + rect.top;
            // e.clientY = currenty
          } else if (e.clientY < vm.yPos + rect.top) {
            currenty = vm.yPos + rect.top;
          } else {
            currenty = e.clientY;
          }

          // console.log("dragged111", rect.left, rect.top, e)
          // const mouseX = e.clientX - rect.left;
          // const mouseY = e.clientY - rect.top;
          const mouseX = currentx - rect.left;
          const mouseY = currenty - rect.top;
          // Calculate distance dragged
          const deltaX = mouseX - this.dragStartX;
          const deltaY = mouseY - this.dragStartY;
          this.dragStartX = mouseX;
          this.dragStartY = mouseY;
          // Update dragged point
          vm.points[dragIndex].y += deltaY / vm.zoomRatio;
          // vm.points[dragIndex].y + deltaY
          vm.points[dragIndex].x += deltaX / vm.zoomRatio;
          // Redraw points and lines
          drawPointsAndLines();
        } else if (isZoom) {
          const touchPoints = e.touches;
          if (touchPoints && touchPoints.length === 2) {
            const touch1 = touchPoints[0];
            const touch2 = touchPoints[1];
            vm.currentDistance = vm.calculateDistance(touch1, touch2);
            if ((vm.currentDistance * this.lastZoom) / vm.startDistance < 1) {
              vm.zoomRatio = 1;
            } else {
              vm.zoomRatio = (this.lastZoom * vm.currentDistance) / vm.startDistance;
            }
            canvas.width = vm.windowWidth * vm.zoomRatio;
            canvas.height = vm.windowHeight * vm.zoomRatio;
            drawPointsAndLines();
          }
        }
      }
      function stopDrag(e) {
        isDragging = false;
        dragIndex = -1;
        isZoom = false;
      }

      function drawPointsAndLines() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(vm.video, vm.xPos, vm.yPos, vm.scaledWidth * vm.zoomRatio, vm.scaledHeight * vm.zoomRatio);

        // Draw lines
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 0.6 * vm.zoomRatio;
        vm.lines.forEach((line) => {
          const [startIndex, endIndex] = line;
          const startPoint = vm.points[startIndex];
          const endPoint = vm.points[endIndex];
          ctx.beginPath();
          ctx.moveTo(scaledX(startPoint.x), scaledY(startPoint.y));
          ctx.lineTo(scaledX(endPoint.x), scaledY(endPoint.y));
          ctx.stroke();
        });

        vm.points.forEach((point, index) => {
          ctx.beginPath();
          // let scaledPx = scaledX(point.x)
          // let scaledPy = scaledY(point.y)
          ctx.arc(scaledX(point.x), scaledY(point.y), 3.5 * vm.zoomRatio, 0, 2 * Math.PI);
          ctx.fillStyle = 'red';
          ctx.fillText(point.name, scaledX(point.x), scaledY(point.y) - 5);
          ctx.fill();
          ctx.stroke();
          // Draw label for dragged point
          if (index === dragIndex) {
            ctx.fillStyle = 'origin';
            // ctx.fillText(
            //   `(Math.f${point.x}, ${point.y})`, point.x + 5, point.y - 5);
          }
        });
      }

      // function wheelAction(event) {
      //   event.preventDefault();
      // }

      function run() {
        if (vm.cIntervalId) {
          clearInterval(vm.cIntervalId);
        }
        vm.cIntervalId = setInterval(drawPointsAndLines, 50);
        canvas.addEventListener('mousedown', pointSelect);
        canvas.addEventListener('touchstart', pointSelect);
        canvas.addEventListener('mousemove', drag);
        canvas.addEventListener('touchmove', drag, { passive: false });
        canvas.addEventListener('mouseup', stopDrag);
        canvas.addEventListener('mouseleave', stopDrag);
        canvas.addEventListener('touchend', stopDrag);
        // canvas.addEventListener('wheel', wheelAction);
      }
    },

    copyContent(content, item) {
      this.$copyText(content).then(
        (e) => {
          this.ruleForm[item] = content;
          this.$modal.msgSuccess('复制成功');
          // this.showCamUrl = false
        },
        function (e) {
          this.$modal.msgError('复制失败，请手动复制');
        }
      );
    },

    SrsRtcPlayerAsync() {
      var self = {};
      self.play = async function (url) {
        var conf = self.__internal.prepareUrl(url);
        self.pc.addTransceiver('audio', { direction: 'recvonly' });
        self.pc.addTransceiver('video', { direction: 'recvonly' });

        var offer = await self.pc.createOffer();
        await self.pc.setLocalDescription(offer);
        var session = await new Promise(function (resolve, reject) {
          // @see https://github.com/rtcdn/rtcdn-draft
          var data = {
            api: conf.apiUrl,
            tid: conf.tid,
            streamurl: conf.streamUrl,
            clientip: null,
            sdp: offer.sdp
          };
          console.log('Generated offer: ', data);

          $.ajax({
            type: 'POST',
            url: conf.apiUrl,
            data: JSON.stringify(data),
            contentType: 'application/json',
            dataType: 'json'
          })
            .done(function (data) {
              console.log('Got answer: ', data);
              if (data.code) {
                reject(data);
                return;
              }
              resolve(data);
            })
            .fail(function (reason) {
              reject(reason);
            });
        });
        await self.pc.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: session.sdp }));
        session.simulator = conf.schema + '//' + conf.urlObject.server + ':' + conf.port + '/rtc/v1/nack/';
        return session;
      };
      // Close the player.
      self.close = function () {
        self.pc && self.pc.close();
        self.pc = null;
      };
      self.ontrack = function (event) {
        // https://webrtc.org/getting-started/remote-streams
        self.stream.addTrack(event.track);
      };
      // Internal APIs.
      self.__internal = {
        defaultPath: '/rtc/v1/play/',
        prepareUrl: function (webrtcUrl) {
          var urlObject = self.__internal.parse(webrtcUrl);
          // If user specifies the schema, use it as API schema.
          var schema = urlObject.user_query.schema;
          schema = schema ? schema + ':' : window.location.protocol;
          var port = urlObject.port || 1985;
          if (schema === 'https:') {
            port = urlObject.port || 1990;
          }
          // @see https://github.com/rtcdn/rtcdn-draft
          var api = urlObject.user_query.play || self.__internal.defaultPath;
          if (api.lastIndexOf('/') !== api.length - 1) {
            api += '/';
          }
          apiUrl = schema + '//' + urlObject.server + ':' + port + api;
          for (var key in urlObject.user_query) {
            if (key !== 'api' && key !== 'play') {
              apiUrl += '&' + key + '=' + urlObject.user_query[key];
            }
          }
          // Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
          var apiUrl = apiUrl.replace(api + '&', api + '?');
          var streamUrl = urlObject.url;

          return {
            apiUrl: apiUrl,
            streamUrl: streamUrl,
            schema: schema,
            urlObject: urlObject,
            port: port,
            tid: Number(parseInt(new Date().getTime() * Math.random() * 100))
              .toString(16)
              .substr(0, 7)
          };
        },
        parse: function (url) {
          // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
          var a = document.createElement('a');
          a.href = url.replace('rtmp://', 'http://').replace('webrtc://', 'http://').replace('rtc://', 'http://');

          var vhost = a.hostname;
          var app = a.pathname.substr(1, a.pathname.lastIndexOf('/') - 1);
          var stream = a.pathname.substr(a.pathname.lastIndexOf('/') + 1);

          // parse the vhost in the params of app, that srs supports.
          app = app.replace('...vhost...', '?vhost=');
          if (app.indexOf('?') >= 0) {
            var params = app.substr(app.indexOf('?'));
            app = app.substr(0, app.indexOf('?'));

            if (params.indexOf('vhost=') > 0) {
              vhost = params.substr(params.indexOf('vhost=') + 'vhost='.length);
              if (vhost.indexOf('&') > 0) {
                vhost = vhost.substr(0, vhost.indexOf('&'));
              }
            }
          }
          if (a.hostname === vhost) {
            var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
            if (re.test(a.hostname)) {
              vhost = '__defaultVhost__';
            }
          }
          // parse the schema
          var schema = 'rtmp';
          if (url.indexOf('://') > 0) {
            schema = url.substr(0, url.indexOf('://'));
          }
          var port = a.port;
          if (!port) {
            // Finger out by webrtc url, if contains http or https port, to overwrite default 1985.
            if (schema === 'webrtc' && url.indexOf(`webrtc://${a.host}:`) === 0) {
              port = url.indexOf(`webrtc://${a.host}:80`) === 0 ? 80 : 1990;
            }
            // Guess by schema.
            if (schema === 'http') {
              port = 80;
            } else if (schema === 'https') {
              port = 1990;
            } else if (schema === 'rtmp') {
              port = 1935;
            }
          }
          var ret = {
            url: url,
            schema: schema,
            server: a.hostname,
            port: port,
            vhost: vhost,
            app: app,
            stream: stream
          };
          self.__internal.fill_query(a.search, ret);

          if (!ret.port) {
            if (schema === 'webrtc' || schema === 'rtc') {
              if (ret.user_query.schema === 'https') {
                ret.port = 1990;
              } else if (window.location.href.indexOf('https://') === 0) {
                ret.port = 1990;
              } else {
                // For WebRTC, SRS use 1985 as default API port.
                ret.port = 1985;
              }
            }
          }
          return ret;
        },
        fill_query: function (query_string, obj) {
          // pure user query object.
          obj.user_query = {};
          if (query_string.length === 0) {
            return;
          }

          // split again for angularjs.
          if (query_string.indexOf('?') >= 0) {
            query_string = query_string.split('?')[1];
          }
          var queries = query_string.split('&');
          for (var i = 0; i < queries.length; i++) {
            var elem = queries[i];
            var query = elem.split('=');
            obj[query[0]] = query[1];
            obj.user_query[query[0]] = query[1];
          }

          // alias domain for vhost.
          if (obj.domain) {
            obj.vhost = obj.domain;
          }
        }
      };

      self.pc = new RTCPeerConnection(null);
      self.stream = new MediaStream();

      // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
      self.pc.ontrack = function (event) {
        if (self.ontrack) {
          self.ontrack(event);
        }
      };
      return self;
    }
  }
};
</script>

<style lang="scss" scoped>

.input45 {
  width: 40%;
  margin-right: 5px;
}

.column {
  float: left;
  width: 90%;
  padding: 2px;
}

/* Clearfix (clear floats) */
.row::after {
  content: '';
  clear: both;
  display: table;
}

.container-main {
  // background:#FFFFFF;
  width: 99%;
  padding: auto;
  margin: 5px auto;
  background: #fff;
  height: calc(100vh - 50px - 30px);
  overflow-y: scroll;
  position: relative;
}

.el-header {

}

.nav1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar {
  // padding-top: getvh(25);
  overflow: hidden;
  position: relative;
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px 0px rgb(0 92 220 / 10%);
}
</style>
