saas_entrepot_admin/src/views/education/classManageMent/classHoursReview/studyTimes.vue

<template>
  <div id="studyTimes">
    <div class="top_style">
      <header>
        <div class="left"><i></i><span>学员信息</span></div>
        <span style="margin-left: 10px"
          ><strong style="color: red">「1」</strong>所购商品：{{
            userData.goodsName
          }}</span
        >
        <span style="margin-left: 10px"
          ><strong style="color: red">「2」</strong>所在班级：{{
            userData.className
          }}</span
        >
        <span style="margin-left: 10px"
          ><strong style="color: red">「3」</strong>学时：{{
            userData.classHours
          }}</span
        >
        <span style="margin-left: 10px"
          ><strong style="color: red">「4」</strong>完成{{
            userData.stuAllNum + userData.recordNum
          }}节的内容学习</span
        >
        <span style="margin-left: 10px"
          ><strong style="color: red">「5」</strong>学习时间：{{
            $methodsTools.onlyForma(userData.studyStartTime, false)
          }}
          - {{ $methodsTools.onlyForma(userData.studyEndTime, false) }}</span
        >
        <el-button type="primary" size="mini" @click="showBox = !showBox">{{
          showBox ? "收起" : "展开"
        }}</el-button>
      </header>
      <div class="info_img" v-show="showBox">
        <ul>
          <li>学员编码：{{ userData.studentCode }}</li>
          <li>学员姓名：{{ userData.realName }}</li>
          <li>学员身份证号码：{{ userData.idCard }}</li>
          <li>绑定手机号码：{{ userData.telPhone }}</li>
        </ul>
        <div class="img_by">
          <div class="photoSty1">
            <img
              v-if="!userData.oneInchPhotos"
              src="@/assets/images/peopleImg.png"
              alt=""
            />
            <el-image
              v-else
              style="width: 100%; height: 100%"
              :src="$methodsTools.splitImgHost(userData.oneInchPhotos)"
              :preview-src-list="[
                $methodsTools.splitImgHost(userData.oneInchPhotos),
              ]"
            >
            </el-image>
            <div class="pos_bottom">一寸头像图</div>
          </div>
          <div class="photoSty2">
            <img
              v-if="!userData.idCardImg1"
              src="@/assets/images/idcardF.png"
              alt=""
            />
            <el-image
              v-else
              style="width: 100%; height: 100%"
              :src="$methodsTools.splitImgHost(userData.idCardImg1)"
              :preview-src-list="[
                $methodsTools.splitImgHost(userData.idCardImg1),
              ]"
            >
            </el-image>
            <div class="pos_bottom">身份证头像照</div>
          </div>
          <div class="photoSty2" style="margin-right: 0px">
            <img
              v-if="!userData.idCardImg2"
              src="@/assets/images/idcardZ.png"
              alt=""
            />
            <el-image
              v-else
              style="width: 100%; height: 100%"
              :src="$methodsTools.splitImgHost(userData.idCardImg2)"
              :preview-src-list="[
                $methodsTools.splitImgHost(userData.idCardImg2),
              ]"
            >
            </el-image>
            <div class="pos_bottom">身份证国徽照</div>
          </div>
        </div>
      </div>
    </div>
    <div class="studyStyle" v-if="!true">
      <div class="a_style">
        <i></i>
        <span>视频审核进度</span>
        <div class="flex_style_study">
          <div class="num_style" style="color: #0047d0">
            待审：{{ userData.pending }}节
          </div>
          <div class="num_style" style="color: #e53935">
            作弊：{{ userData.cheat }}节
          </div>
          <div class="num_style" style="color: #43a047">
            通过：{{ userData.pass }}节
          </div>
          <div style="clear: both"></div>
        </div>
      </div>
      <div class="a_style">
        <i></i>
        <span>做题审核进度</span>
        <div class="flex_style_study">
          <div class="num_style" style="color: #0047d0">
            待审：{{ userData.examPending }}节
          </div>
          <div class="num_style" style="color: #e53935">
            作弊：{{ userData.examCheat }}节
          </div>
          <div class="num_style" style="color: #43a047">
            通过：{{ userData.examPass }}节
          </div>
          <div style="clear: both"></div>
        </div>
      </div>
      <div class="a_style" style="width: 280px">
        <i></i>
        <span>学时审批状态</span>
        <div class="flex_style_study">
          <div class="num_style" style="color: #0047d0">
            {{
              userData.periodStatus === 0
                ? "未通过"
                : userData.periodStatus === 2
                ? "待审核"
                : userData.periodStatus === -1
                ? "不可审核"
                : userData.periodStatus === 1
                ? "通过审核"
                : userData.periodStatus === 3
                ? "审核中"
                : "未知状态，请联系管理员"
            }}
          </div>
          <div style="clear: both"></div>
        </div>
      </div>
      <div class="s_sd">
        <span v-if="userData.periodStatus !== 3">
          <el-checkbox
            v-if="userData.periodStatus === 2"
            :disabled="!getAllList.length"
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >待审全选</el-checkbox
          >
          <el-button
            style="margin-left: 10px"
            size="mini"
            type="success"
            v-if="userData.periodStatus === 2"
            @click="getChangeStatus(1)"
            >勾选通过</el-button
          >
          <el-button
            size="mini"
            type="danger"
            v-if="userData.periodStatus === 2"
            @click="getChangeStatus(2)"
            >勾选作弊</el-button
          >
        </span>
        <span v-else>
          <el-button style="margin-left: 10px" size="mini" @click="checkBack"
            >勾选数据，打回待审核状态</el-button
          >
          <el-button size="mini" type="warning" @click="approvedOK = true"
            >确认审核通过结果</el-button
          >
        </span>
      </div>
    </div>

    <Study-tables
      v-if="tablesData.length"
      :tablesData="tablesData"
      :userData="userData"
      :setData="setData"
    ></Study-tables>

    <div style="flex: 1; flex-shrink: 0; overflow: auto" v-if="!true">
      <el-checkbox-group
        v-model="checkList"
        @change="handleCheckedCitiesChange"
      >
        <el-table
          :default-expand-all="defaultExpand"
          v-for="asrt in computedList(listLabel)"
          border
          v-loading="loading"
          :key="asrt.value"
          :data="listData[`tableData${asrt.value + 1}`]"
          style="width: 100%; border-radius: 4px; overflow: hidden"
          :header-cell-style="
            asrt.value === 0
              ? {
                  'background-color': '#CCDDF7',
                  padding: '8px',
                  color: '#0047D0',
                  'border-right-color': '#0047D0',
                  'border-left-color': '#0047D0',
                }
              : asrt.value === 1
              ? {
                  'background-color': '#D9ECFA',
                  padding: '8px',
                  color: '#1565C0',
                  'border-right-color': '#1565C0',
                  'border-left-color': '#1565C0',
                }
              : asrt.value === 2
              ? {
                  'background-color': '#F5F5F5',
                  padding: '8px',
                  color: '#666',
                }
              : ''
          "
        >
          <!-- 插槽开始--------------------------------------------------------- -->
          <el-table-column
            :label="['模块', '章', '节/卷'][asrt.value]"
            type="expand"
            width="70px"
          >
            <template slot-scope="scope">
              <!-- type为3时使用该插槽START -->
              <div
                v-if="scope.row.type === 3 || scope.row.type === 4"
                class="dis_flexs"
              >
                <ul
                  style="flex: 1"
                  v-if="
                    scope.row.userStudyRecordPhotoList &&
                    scope.row.userStudyRecordPhotoList.length
                  "
                >
                  <li
                    v-for="(its, inds) in scope.row.userStudyRecordPhotoList"
                    :key="inds"
                    class="liImgs"
                  >
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="$methodsTools.splitImgHost(its.photo)"
                      :preview-src-list="[
                        $methodsTools.splitImgHost(its.photo),
                      ]"
                    >
                    </el-image>
                    <div class="abos">
                      {{ $methodsTools.onlyForma(its.createTime) }}
                    </div>
                  </li>
                  <div style="clear: both"></div>
                </ul>
                <p v-else style="text-align: center; width: 100%">
                  暂无拍照数据
                </p>
                <div
                  class="styFlex"
                  v-if="
                    (userData.periodStatus === 0 ||
                      userData.periodStatus === 2 ||
                      userData.periodStatus === 3) &&
                    scope.row.periodStatus === 1
                  "
                >
                  <div>
                    <el-checkbox
                      class="checkboxList"
                      :label="scope.row.periodStatusId"
                      :disabled="
                        userData.periodStatus === 3
                          ? false
                          : scope.row.status !== 2
                          ? true
                          : false
                      "
                      ><br
                    /></el-checkbox>
                  </div>
                  <el-button
                    :disabled="scope.row.status !== 2"
                    class="btnstyles"
                    size="small"
                    type="success"
                    :loading="disabledBtn"
                    @click="changeStatus(scope.row, 1, scope.$index)"
                    >通过</el-button
                  >
                  <el-button
                    :disabled="scope.row.status !== 2"
                    class="btnstyles"
                    size="small"
                    type="danger"
                    @click="changeStatus(scope.row, 2, scope.$index)"
                    >作弊</el-button
                  >
                </div>
              </div>
              <!-- type为3时使用该插槽END -->
              <!-- 章表格START -->
              <el-table
                v-else
                border
                :data="
                  scope.row.type === 1
                    ? scope.row.classPeriods
                    : scope.row.type === 2
                    ? scope.row.classPeriodSectionList
                    : ''
                "
                :default-expand-all="defaultExpand"
                :header-cell-style="
                  scope.row.type === 1
                    ? {
                        'background-color': '#D9ECFA',
                        padding: '8px',
                        color: '#1565C0',
                        'border-right-color': '#1565C0',
                        'border-left-color': '#1565C0',
                      }
                    : scope.row.type === 2
                    ? {
                        'background-color': '#f5f5f5',
                        padding: '8px',
                        color: '#666',
                      }
                    : ''
                "
              >
                <!-- 章插槽START -->
                <el-table-column
                  type="expand"
                  :label="
                    scope.row.type === 1
                      ? '章'
                      : scope.row.type === 2
                      ? '节/卷'
                      : scope.row.type === 5
                      ? '模块卷'
                      : ''
                  "
                  :width="
                    scope.row.type === 1
                      ? '70px'
                      : scope.row.type === 2
                      ? '80px'
                      : ''
                  "
                >
                  <template slot-scope="scope2">
                    <!-- 节插槽START -->
                    <div
                      v-if="scope2.row.type === 3 || scope2.row.type === 4"
                      class="dis_flexs"
                    >
                      <ul
                        style="flex: 1"
                        v-if="
                          scope2.row.userStudyRecordPhotoList &&
                          scope2.row.userStudyRecordPhotoList.length
                        "
                      >
                        <li
                          v-for="(its, inds) in scope2.row
                            .userStudyRecordPhotoList"
                          :key="inds"
                          class="liImgs"
                        >
                          <el-image
                            style="width: 100%; height: 100%"
                            :src="$methodsTools.splitImgHost(its.photo)"
                            :preview-src-list="[
                              $methodsTools.splitImgHost(its.photo),
                            ]"
                          >
                          </el-image>
                          <div class="abos">
                            {{ $methodsTools.onlyForma(its.createTime) }}
                          </div>
                        </li>
                        <div style="clear: both"></div>
                      </ul>
                      <p v-else style="text-align: center; width: 100%">
                        暂无拍照数据
                      </p>
                      <div
                        class="styFlex"
                        v-if="
                          (userData.periodStatus === 0 ||
                            userData.periodStatus === 2 ||
                            userData.periodStatus === 3) &&
                          scope2.row.periodStatus === 1
                        "
                      >
                        <div>
                          <el-checkbox
                            class="checkboxList"
                            :label="scope2.row.periodStatusId"
                            :disabled="
                              userData.periodStatus === 3
                                ? false
                                : scope2.row.status !== 2
                                ? true
                                : false
                            "
                            ><br
                          /></el-checkbox>
                        </div>
                        <el-button
                          :disabled="scope2.row.status !== 2"
                          class="btnstyles"
                          size="small"
                          type="success"
                          :loading="disabledBtn"
                          @click="
                            changeStatusCharpter(
                              scope2.row,
                              1,
                              scope.$index,
                              scope2.$index
                            )
                          "
                          >通过</el-button
                        >
                        <el-button
                          :disabled="scope2.row.status !== 2"
                          class="btnstyles"
                          size="small"
                          type="danger"
                          @click="
                            changeStatusCharpter(
                              scope2.row,
                              2,
                              scope.$index,
                              scope2.$index
                            )
                          "
                          >作弊</el-button
                        >
                      </div>
                    </div>
                    <!-- 节插槽END -->
                    <!-- 节表格START -->
                    <el-table
                      v-else
                      border
                      :data="
                        scope2.row.type === 2
                          ? scope2.row.classPeriodSectionList
                          : ''
                      "
                      :default-expand-all="defaultExpand"
                      :header-cell-style="
                        scope2.row.type === 2
                          ? {
                              'background-color': '#f5f5f5',
                              padding: '8px',
                              color: '#666',
                            }
                          : ''
                      "
                    >
                      <!-- 节插槽START -->
                      <el-table-column
                        type="expand"
                        :label="scope2.row.type === 2 ? '节/卷' : ''"
                        width="80px"
                      >
                        <template slot-scope="scope3">
                          <div
                            v-if="
                              scope3.row.type === 3 || scope3.row.type === 4
                            "
                            class="dis_flexs"
                          >
                            <ul
                              style="flex: 1"
                              v-if="
                                scope3.row.userStudyRecordPhotoList &&
                                scope3.row.userStudyRecordPhotoList.length
                              "
                            >
                              <li
                                v-for="(its, inds) in scope3.row
                                  .userStudyRecordPhotoList"
                                :key="inds"
                                class="liImgs"
                              >
                                <el-image
                                  style="width: 100%; height: 100%"
                                  :src="$methodsTools.splitImgHost(its.photo)"
                                  :preview-src-list="[
                                    $methodsTools.splitImgHost(its.photo),
                                  ]"
                                >
                                </el-image>
                                <div class="abos">
                                  {{ $methodsTools.onlyForma(its.createTime) }}
                                </div>
                              </li>
                              <div style="clear: both"></div>
                            </ul>
                            <p v-else style="text-align: center; width: 100%">
                              暂无拍照数据
                            </p>
                            <div
                              class="styFlex"
                              v-if="
                                (userData.periodStatus === 0 ||
                                  userData.periodStatus === 2 ||
                                  userData.periodStatus === 3) &&
                                scope3.row.periodStatus === 1
                              "
                            >
                              <div>
                                <el-checkbox
                                  class="checkboxList"
                                  :label="scope3.row.periodStatusId"
                                  :disabled="
                                    userData.periodStatus === 3
                                      ? false
                                      : scope3.row.status !== 2
                                      ? true
                                      : false
                                  "
                                  ><br
                                /></el-checkbox>
                              </div>
                              <el-button
                                :disabled="scope3.row.status !== 2"
                                class="btnstyles"
                                size="small"
                                type="success"
                                :loading="disabledBtn"
                                @click="
                                  changeStatusModule(
                                    scope3.row,
                                    1,
                                    scope.$index,
                                    scope2.$index,
                                    scope3.$index
                                  )
                                "
                                >通过</el-button
                              >
                              <el-button
                                :disabled="scope3.row.status !== 2"
                                class="btnstyles"
                                size="small"
                                type="danger"
                                @click="
                                  changeStatusModule(
                                    scope3.row,
                                    2,
                                    scope.$index,
                                    scope2.$index,
                                    scope3.$index
                                  )
                                "
                                >作弊</el-button
                              >
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <!-- 节插槽END -->
                      <el-table-column
                        v-for="(item, index) in scope2.row.type === 2
                          ? tableSet3
                          : ''"
                        :width="item.width"
                        :key="index"
                        :label="item.label"
                        align="center"
                      >
                        <template slot-scope="scope3">
                          <span v-if="item.scope === 'select'">
                            <span
                              v-for="(k, ds) in item.options"
                              :key="ds"
                              :style="
                                scope3.row[item.prop] === 0
                                  ? 'color:red;'
                                  : scope3.row[item.prop] === 2
                                  ? 'color:#0047D0;'
                                  : scope3.row[item.prop] === 1
                                  ? 'color:#67C23A;'
                                  : ''
                              "
                            >
                              {{
                                k.value == scope3.row[item.prop] ? k.label : ""
                              }}
                            </span>
                          </span>
                          <div v-else-if="item.scope === 'activeNum'">
                            <el-select
                              v-model="scope3.row[item.prop]"
                              placeholder="请选择"
                              @change="
                                getNewListMores(
                                  scope.$index,
                                  scope2.$index,
                                  scope3.$index,
                                  $event,
                                  scope3.row
                                )
                              "
                            >
                              <el-option
                                v-for="(items, indexs) in scope3.row['numList']"
                                :key="indexs"
                                :label="'第' + items + '次审核记录'"
                                :value="items"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <span v-else-if="item.scope === 'typeOptions'">
                            <span v-for="(is, ds) in item.options" :key="ds">
                              <span v-if="is.value === scope3.row[item.prop]">{{
                                is.label
                              }}</span>
                            </span>
                          </span>
                          <span v-else-if="item.scope === 'aTime'">
                            {{ $methodsTools.onlyForma(scope3.row[item.prop]) }}
                          </span>
                          <span v-else-if="item.scope === 'durTime'">
                            {{
                              $methodsTools.secondToDate(
                                scope3.row[item.prop],
                                false
                              )
                            }}
                          </span>
                          <div v-else-if="item.scope === 'aTimeSE'">
                            <span
                              v-if="
                                scope3.row['type'] === 3 &&
                                scope3.row['durationTime'] &&
                                scope3.row['studyStartTime'] &&
                                scope3.row['studyEndTime']
                              "
                              :style="comput(scope3.row)"
                            >
                              {{
                                $methodsTools.onlyForma(scope3.row[item.prop])
                              }}
                            </span>
                            <span v-else>
                              {{
                                $methodsTools.onlyForma(scope3.row[item.prop])
                              }}
                            </span>
                          </div>
                          <span v-else> {{ scope3.row[item.prop] }} </span>
                        </template>
                      </el-table-column>
                    </el-table>
                    <!-- 节表格END -->
                  </template>
                </el-table-column>
                <!-- 章插槽END -->
                <el-table-column
                  v-for="(item, index) in scope.row.type === 1
                    ? tableSet2
                    : scope.row.type === 2
                    ? tableSet3
                    : ''"
                  :width="item.width"
                  :key="index"
                  :label="item.label"
                  align="center"
                >
                  <template slot-scope="scope2">
                    <span v-if="item.scope === 'select'">
                      <span
                        v-for="(k, ds) in item.options"
                        :key="ds"
                        :style="
                          scope2.row[item.prop] === 0
                            ? 'color:red;'
                            : scope2.row[item.prop] === 2
                            ? 'color:#0047D0;'
                            : scope2.row[item.prop] === 1
                            ? 'color:#67C23A;'
                            : ''
                        "
                      >
                        {{ k.value == scope2.row[item.prop] ? k.label : "" }}
                      </span>
                    </span>
                    <div v-else-if="item.scope === 'activeNum'">
                      <el-select
                        v-model="scope2.row[item.prop]"
                        placeholder="请选择"
                        @change="
                          getNewListchapt(
                            scope.$index,
                            scope2.$index,
                            $event,
                            scope2.row
                          )
                        "
                      >
                        <el-option
                          v-for="(items, indexs) in scope2.row['numList']"
                          :key="indexs"
                          :label="'第' + items + '次审核记录'"
                          :value="items"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <span v-else-if="item.scope === 'typeOptions'">
                      <span v-for="(is, ds) in item.options" :key="ds">
                        <span v-if="is.value === scope2.row[item.prop]">{{
                          is.label
                        }}</span>
                      </span>
                    </span>
                    <span v-else-if="item.scope === 'aTime'">
                      {{ $methodsTools.onlyForma(scope2.row[item.prop]) }}
                    </span>
                    <span v-else-if="item.scope === 'durTime'">
                      {{
                        $methodsTools.secondToDate(scope2.row[item.prop], false)
                      }}
                    </span>
                    <div v-else-if="item.scope === 'aTimeSE'">
                      <span
                        v-if="
                          scope2.row['type'] === 3 &&
                          scope2.row['durationTime'] &&
                          scope2.row['studyStartTime'] &&
                          scope2.row['studyEndTime']
                        "
                        :style="comput(scope2.row)"
                      >
                        {{ $methodsTools.onlyForma(scope2.row[item.prop]) }}
                      </span>
                      <span v-else>
                        {{ $methodsTools.onlyForma(scope2.row[item.prop]) }}
                      </span>
                    </div>
                    <span v-else> {{ scope2.row[item.prop] }} </span>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 章表格END -->
            </template>
          </el-table-column>
          <!-- 插槽结束--------------------------------------------------------- -->

          <el-table-column
            v-for="(item, index) in asrt.value === 0
              ? tableSet1
              : asrt.value === 1
              ? tableSet2
              : asrt.value === 2
              ? tableSet3
              : ''"
            :width="item.width"
            :key="index"
            :label="item.label"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="item.scope === 'select'">
                <span
                  v-for="(k, ds) in item.options"
                  :key="ds"
                  :style="
                    scope.row[item.prop] === 0
                      ? 'color:red;'
                      : scope.row[item.prop] === 2
                      ? 'color:#0047D0;'
                      : scope.row[item.prop] === 1
                      ? 'color:#67C23A;'
                      : ''
                  "
                >
                  {{ k.value == scope.row[item.prop] ? k.label : "" }}
                </span>
              </span>
              <div v-else-if="item.scope === 'activeNum'">
                <el-select
                  v-model="scope.row[item.prop]"
                  placeholder="请选择"
                  @change="getNewList(scope.$index, $event, scope.row)"
                >
                  <el-option
                    v-for="(items, indexs) in scope.row['numList']"
                    :key="indexs"
                    :label="'第' + items + '次审核记录'"
                    :value="items"
                  >
                  </el-option>
                </el-select>
              </div>
              <span v-else-if="item.scope === 'typeOptions'">
                <span v-for="(is, ds) in item.options" :key="ds">
                  <span v-if="is.value === scope.row[item.prop]">{{
                    is.label
                  }}</span>
                </span>
              </span>
              <span v-else-if="item.scope === 'aTime'">
                {{ $methodsTools.onlyForma(scope.row[item.prop]) }}
              </span>
              <span v-else-if="item.scope === 'durTime'">
                {{ $methodsTools.secondToDate(scope.row[item.prop], false) }}
              </span>
              <div v-else-if="item.scope === 'aTimeSE'">
                <span
                  v-if="
                    scope.row['type'] === 3 &&
                    scope.row['durationTime'] &&
                    scope.row['studyStartTime'] &&
                    scope.row['studyEndTime']
                  "
                  :style="comput(scope.row)"
                >
                  {{ $methodsTools.onlyForma(scope.row[item.prop]) }}
                </span>
                <span v-else>
                  {{ $methodsTools.onlyForma(scope.row[item.prop]) }}
                </span>
              </div>
              <span v-else>
                {{ scope.row[item.prop] }}{{ item.ch ? item.ch : "" }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-checkbox-group>
    </div>
    <el-dialog
      @closed="loadingClose"
      :visible.sync="vidBoxHours"
      v-if="vidBoxHours"
      width="560px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">操作提示：</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="vidBoxHours = false"
          />
        </div>
      </div>
      <div>
        <el-form
          :model="formData"
          :rules="rules"
          ref="formData"
          label-width="80px"
          label-position="right"
        >
          <el-form-item label="作弊原因" prop="cheating_reason">
            <el-input
              v-model="formData.cheating_reason"
              type="textarea"
              :rows="4"
              placeholder="请输入作弊原因"
            ></el-input>
            <ul>
              <li
                class="li_sty"
                @click="uploadText(item.label)"
                v-for="(item, index) in msgTitle"
                :key="index"
              >
                {{ item.label }}
              </li>
            </ul>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="disabledBtn" @click="vidBoxHours = false"
          >取 消</el-button
        >
        <el-button :loading="disabledBtn" @click="submitForm('formData')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      @closed="loadingClose"
      :visible.sync="through"
      width="560px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">操作提示：</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="through = false"
          />
        </div>
      </div>
      <div>
        确定所勾选的内容，审核结果为【通过】？<br />
        确认后，初审不可再修改，请检查清楚再操作！
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="disabledBtn" @click="through = false"
          >取 消</el-button
        >
        <el-button :loading="disabledBtn" @click="submitOK(1)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      @closed="loadingClose"
      :visible.sync="popback"
      width="560px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">操作提示：</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="popback = false"
          />
        </div>
      </div>
      <div>
        <div style="color: red">
          <h4 style="margin: 0px">当前勾选了{{ checkList.length }}条数据：</h4>
          <ul style="margin: 0px 0px 6px; max-height: 500px; overflow: auto">
            <li v-for="(item, index) in checkList" :key="index">
              {{ index + 1 }}.{{ getSecName(item) }}
            </li>
          </ul>
        </div>
        <div style="text-align: center; font-weight: bold">
          所选数据，确定要打回待审核状态吗？<br />
          打回后，重新走审核流程，请慎重操作。
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="disabledBtn" @click="popback = false"
          >取 消</el-button
        >
        <el-button :loading="disabledBtn" @click="uploadForm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      @closed="loadingClose"
      :visible.sync="approvedOK"
      width="560px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">操作提示：</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="approvedOK = false"
          />
        </div>
      </div>
      <div>
        <div style="color: red">
          <h4 style="margin: 0px">确认审核通过结果后：</h4>
          <ul style="margin: 0px 0px 6px">
            <li>
              （1）有做官方接口的，自动触发【学时官方推送】<br />
              （2）公开【学习学时记录-学时记录】按钮，权限人可查看【审核结果】<br />
              （3）有匹配的预约考试，可走预约流程
            </li>
          </ul>
        </div>
        <div style="font-weight: bold; margin-top: 20px">
          确认提交审核通过结果？<br />
          确认后，不能再修改，请慎重操作。
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="disabledBtn" @click="approvedOK = false"
          >取 消</el-button
        >
        <el-button :loading="disabledBtn" @click="approvedOKFunc"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import StudyTables from "./component/StudyTables.vue";
export default {
  props: ["setData"],
  data() {
    return {
      showBox: true,
      disabledBtn: false,
      msgTitle: [
        { label: "学习拍照异常", value: 1 },
        {
          label: "学习拍照太黑无法识别人像，请确保拍照光线充足并拍到全脸",
          value: 2,
        },
        {
          label: "学习拍照太模糊无法识别人像，请确保拍照光线充足并拍到全脸",
          value: 3,
        },
        {
          label: "学习拍照人像不全无法识别，请确保拍照光线充足并拍到全脸",
          value: 4,
        },
      ],
      formData: {
        cheating_reason: "",
      },
      vidBoxHours: false,
      through: false, //通过提示弹窗
      checkList: [], //勾选列表
      isIndeterminate: false, //待审半选
      checkAll: false, //全选状态
      defaultExpand: true,
      size: "medium",
      active: "",
      loading: false,
      studentCode: "",
      realName: "",
      idCard: "",
      telPhone: "",
      recent_photos: "",
      idcard_face_photo: "",
      idcard_national_photo: "",
      listLabel: [
        {
          label: "模块卷",
          value: 0,
        },
        {
          label: "章卷",
          value: 1,
        },
        {
          label: "节",
          value: 2,
        },
        {
          label: "模块卷1",
          value: 4,
        },
      ],
      arr: ["tableData1", "tableData2", "tableData3"],
      listData: {
        tableData1: [],
        tableData2: [],
        tableData3: [],
        tableData5: [],
      },
      getAllList: [], //统计得到待审核列表所有
      userData: {},
      tableData: [],
      tableSet1: [
        {
          label: "姓名",
          prop: "realName",
        },
        {
          label: "模块标题",
          prop: "typeName",
        },
      ],
      tableSet2: [
        {
          label: "姓名",
          prop: "realName",
        },
        {
          label: "章标题",
          prop: "typeName",
        },
        {
          label: "学时",
          prop: "classHours",
        },
        {
          label: "开始学习时间",
          prop: "studyStartTime",
          scope: "aTime",
        },
        {
          label: "结束学习时间",
          prop: "studyEndTime",
          scope: "aTime",
        },
        {
          label: "测试成绩",
          prop: "performance",
        },
      ],
      tableSet3: [
        {
          label: "选择",
          prop: "numIndex",
          scope: "activeNum",
          width: "180px",
        },
        {
          label: "姓名",
          prop: "realName",
        },
        {
          label: "标题",
          prop: "typeName",
        },
        {
          label: "类型",
          prop: "type",
          scope: "typeOptions",
          width: "90px",
          options: [
            {
              label: "节",
              value: 3,
            },
            {
              label: "试卷",
              value: 4,
            },
          ],
        },
        {
          label: "节时长",
          prop: "durationTime",
          width: "120px",
          scope: "durTime",
        },
        {
          label: "开始时间",
          prop: "studyStartTime",
          scope: "aTimeSE",
        },
        {
          label: "结束时间",
          prop: "studyEndTime",
          scope: "aTimeSE",
        },
        {
          label: "审核状态",
          prop: "status",
          scope: "select",
          width: "100px",
          options: [
            {
              label: "待审核",
              value: 2,
            },
            {
              label: "通过",
              value: 1,
            },
            {
              label: "作弊",
              value: 0,
            },
            {
              label: "待重修",
              value: 3,
            },
          ],
        },
        {
          label: "审核人",
          prop: "auditUserName",
          width: "100px",
        },
        {
          label: "审核时间",
          prop: "auditTime",
          scope: "aTime",
        },
      ],
      tableDataChild: {},
      tableSetChild: [],
      copyDatas: {}, //记录点击信息
      statusPop: "", //1单个2批量
      setTimeDOM: null, //定时器
      rules: {
        cheating_reason: [
          {
            required: true,
            message: "请填写作弊原因",
            trigger: ["blur", "change"],
          },
        ],
      },
      allArrays: [], //审核中-所有数据
      popback: false, //打回待审核弹窗
      approvedOK: false, //确认审核通过结果
      tablesData: [],
    };
  },
  computed: {
    /**
     * 若数组无数据 则不显示对应第一模块表格
     */
    computedList: function () {
      return function (value) {
        var arr = value.filter((item) => {
          if (item.value === 0) {
            if (this.listData.tableData1.length) {
              return item;
            }
          }
          if (item.value === 1) {
            if (this.listData.tableData2.length) {
              return item;
            }
          }
          if (item.value === 2) {
            if (this.listData.tableData3.length) {
              return item;
            }
          }
        });
        return arr;
      };
    },
  },
  watch: {
    "userData.periodStatus"(val, oldVal) {
      if (val == 3 && oldVal == 2) {
        this.search();
      }
    },
  },
  created() {
    this.$api
      .inquireGradegradelockPeriodStatus({
        gradeId: Number(this.setData.id),
        userId: Number(this.setData.userId),
        goodsId: Number(this.setData.goodsId),
      })
      .then((res) => {
        if (res.msg) {
          this.$alert(`${res.msg}正在操作该页面,请关闭当前页`, "提示", {
            dangerouslyUseHTMLString: true,
            showClose: false,
          }).then((result) => {
            const SESSION = sessionStorage.getItem("hoursAudit");
            let parseSession = {};
            if (SESSION) {
              parseSession = JSON.parse(SESSION);
            }
            if (parseSession.options.length > 1) {
              this.$emit("removeTab", this.setData.keyId);
            } else {
              this.$store
                .dispatch("tagsView/delView", this.$route)
                .then((results) => {
                  this.$router.go(-1);
                });
            }
          });
        } else {
          this.getSetTime();
          // 每10秒调用一次 锁定页面
          this.setTimeDOM = setInterval(() => {
            this.getSetTime();
          }, 10000);
        }
      });
  },
  async mounted() {
    await this.getUserInfo();
    this.search();
  },
  methods: {
    loadingClose() {
      this.disabledBtn = false;
    },
    /**
     * 每10秒调用一次 锁定页面
     */
    getSetTime() {
      this.$api
        .inquireGradegradelockPeriod({
          gradeId: Number(this.setData.id),
          userId: Number(this.setData.userId),
          goodsId: Number(this.setData.goodsId),
        })
        .then((res) => {});
    },
    /**
     * 确认审核通过结果
     */
    approvedOKFunc() {
      this.disabledBtn = true;
      let data = {
        gradeId: Number(this.setData.id),
        userId: Number(this.setData.userId),
        goodsId: Number(this.setData.goodsId),
      };
      this.$api
        .editGradeUsereditrollconfirmPeriod(data)
        .then(async (res) => {
          await this.getUserInfo();
          this.search();
          this.$message.success("审核通过");
          this.approvedOK = false;
        })
        .catch(() => {
          this.disabledBtn = false;
        });
    },
    /**
     * 打回待审核状态
     */
    uploadForm() {
      this.disabledBtn = true;
      let data = {
        gradeId: Number(this.setData.id),
        userId: Number(this.setData.userId),
        goodsId: Number(this.setData.goodsId),
        ids: this.checkList,
      };
      this.$api
        .editGradeUsereditrollbackPeriod(data)
        .then(async (res) => {
          this.checkList = []; //勾选列表
          this.isIndeterminate = false; //待审半选
          this.checkAll = false; //全选状态
          await this.getUserInfo();
          this.search();
          this.$message.success("已打回待审核状态");
          this.popback = false;
        })
        .catch(() => {
          this.disabledBtn = false;
        });
    },
    /**
     *
     * @param {Number} id 学时ID
     * @remards 节ID转节标题返回
     */
    getSecName(id) {
      for (let i = 0; i < this.allArrays.length; i++) {
        if (this.allArrays[i].periodStatusId === id) {
          return this.allArrays[i].typeName;
        }
      }
    },
    /**
     * 弹出提示窗：勾选数据-打回待审核状态
     */
    checkBack() {
      if (!this.checkList.length) {
        this.$message.warning("请勾选数据");
        return;
      }
      this.popback = true;
    },
    /**
     *
     * @param {String} formName
     * @remards 表单验证
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.statusPop === 1) {
            this.formSubmits();
          }
          if (this.statusPop === 2) {
            this.submitOK(2, this.formData.cheating_reason);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     *
     * @param {Object} item 节完整数据
     * @remards 判断当前节是否看完 若没看完 则变更为红色字体
     */
    comput(item) {
      var ast = item.studyEndTime - item.studyStartTime;
      if (ast < item.durationTime) {
        return "color:red;";
      } else {
        return "";
      }
    },
    /**
     *
     * @param {Strings} msg
     * @remards 点击录入文本
     */
    uploadText(msg) {
      this.formData.cheating_reason = msg;
    },
    /**
     * 提交表单
     */
    formSubmits() {
      this.disabledBtn = true;
      var self = this;
      switch (this.copyDatas.type) {
        case 1:
          self.changeStatusModule(
            this.copyDatas.item,
            this.copyDatas.int,
            this.copyDatas.index1,
            this.copyDatas.index2,
            this.copyDatas.index3,
            this.formData.cheating_reason
          );
          break;
        case 2:
          self.changeStatusCharpter(
            this.copyDatas.item,
            this.copyDatas.int,
            this.copyDatas.index1,
            this.copyDatas.index2,
            this.formData.cheating_reason
          );
          break;
        case 3:
          self.changeStatus(
            this.copyDatas.item,
            this.copyDatas.int,
            this.copyDatas.index1,
            this.formData.cheating_reason
          );
          break;

        default:
          this.$message.warning("提交失败,请联系管理人员检查问题");
          this.disabledBtn = false;
          break;
      }
    },
    /**
     *
     * @param {Object} item 节完整数据
     * @param {Number} int 1通过/2作弊
     * @param {Number} index 节索引
     * @remards 通过 作弊 periodId
     */
    changeStatus(item, int, index1, msg) {
      var data = {
        id: item.periodStatusId,
      };
      if (int === 1) {
        this.disabledBtn = true;
        data.status = 1;
      }
      if (int === 2) {
        if (msg) {
          data.status = 0;
          data.auditReason = msg;
        } else {
          this.copyDatas = {
            type: 3,
            item: item,
            int: int,
            index1: index1,
          };
          this.statusPop = 1; // 1单个点击状态 2批量点击状态
          this.formData.cheating_reason = "";
          this.vidBoxHours = true;
          return;
        }
      }
      this.$api
        .editGradeUsereditPeriode(data)
        .then((res) => {
          this.$message.success("修改成功");
          this.vidBoxHours = false;
          this.getNewList(index1, item.numIndex, item);
          this.checkUpload(item.periodStatusId);
        })
        .finally(() => {
          this.disabledBtn = false;
        });
    },
    /**
     *
     * @param {Object} item 节完整数据
     * @param {Number} int 1通过/2作弊
     * @param {Number} index1 章索引
     * @param {Number} index2 节索引
     * @remards 通过 作弊 periodId
     */
    changeStatusCharpter(item, int, index1, index2, msg) {
      var data = {
        id: item.periodStatusId,
      };
      if (int === 1) {
        this.disabledBtn = true;
        data.status = 1;
      }
      if (int === 2) {
        if (msg) {
          data.status = 0;
          data.auditReason = msg;
        } else {
          this.copyDatas = {
            type: 2,
            item: item,
            int: int,
            index1: index1,
            index2: index2,
          };
          this.statusPop = 1; // 1单个点击状态 2批量点击状态
          this.formData.cheating_reason = "";
          this.vidBoxHours = true;
          return;
        }
      }
      this.$api
        .editGradeUsereditPeriode(data)
        .then((res) => {
          this.$message.success("修改成功");
          this.vidBoxHours = false;
          this.getNewListchapt(index1, index2, item.numIndex, item);
          this.checkUpload(item.periodStatusId);
        })
        .finally(() => {
          this.disabledBtn = false;
        });
    },
    /**
     *
     * @param {Object} item 节完整数据
     * @param {Number} int 1通过/2作弊
     * @param {Number} index1 模块索引
     * @param {Number} index2 章索引
     * @param {Number} index3 节索引
     * @remards 通过 作弊 periodId
     */
    changeStatusModule(item, int, index1, index2, index3, msg) {
      var data = {
        id: item.periodStatusId,
      };
      if (int === 1) {
        this.disabledBtn = true;
        data.status = 1;
      }
      if (int === 2) {
        if (msg) {
          data.status = 0;
          data.auditReason = msg;
        } else {
          this.copyDatas = {
            type: 1,
            item: item,
            int: int,
            index1: index1,
            index2: index2,
            index3: index3,
          };
          this.statusPop = 1; // 1单个点击状态 2批量点击状态
          this.formData.cheating_reason = "";
          this.vidBoxHours = true;
          return;
        }
        this.copyDatas = {
          type: 1,
          item: item,
          int: int,
          index1: index1,
          index2: index2,
          index3: index3,
        };
      }
      this.$api
        .editGradeUsereditPeriode(data)
        .then((res) => {
          this.$message.success("修改成功");
          this.vidBoxHours = false;
          this.getNewListMores(index1, index2, index3, item.numIndex, item);
          this.checkUpload(item.periodStatusId);
        })
        .finally(() => {
          this.disabledBtn = false;
        });
    },
    /**
     *
     * @param {Number} int 1通过/2作弊
     * @remards 批量审核通过/作弊
     */
    getChangeStatus(int) {
      if (!this.checkList.length) {
        this.$message.warning("请勾选需要操作的待审核数据");
        return;
      }
      var data = {
        gradeId: Number(this.setData.id),
        userId: Number(this.setData.userId),
        goodsId: Number(this.setData.goodsId),
      };
      if (int === 1) {
        data.status = 1;
        this.through = true;
      }
      if (int === 2) {
        data.status = 0;
        this.statusPop = 2;
        this.formData.cheating_reason = "";
        this.vidBoxHours = true;
      }
    },
    /**
     *
     * @param {Number} int 1通过2作弊
     * @param {String} msg 作弊原因
     * @remards 批量操作
     */
    submitOK(int, msg) {
      this.disabledBtn = true;
      var data = {
        gradeId: Number(this.setData.id),
        userId: Number(this.setData.userId),
        goodsId: Number(this.setData.goodsId),
        ids: this.checkList,
      };
      if (int === 1) {
        data.status = 1;
      }
      if (int === 2) {
        data.auditReason = msg;
        data.status = 0;
      }
      this.$api
        .editGradeUsereditPeriodeAll(data)
        .then(async (res) => {
          if (int === 1) {
            this.$message.success("状态全部通过修改成功");
            this.through = false;
          }
          if (int === 2) {
            this.$message.success("状态全部作弊修改成功");
            this.vidBoxHours = false;
          }
          this.checkList = []; //勾选列表
          this.isIndeterminate = false; //待审半选
          this.checkAll = false; //全选状态
          await this.getUserInfo();
          this.search();
        })
        .catch(() => {
          this.disabledBtn = false;
        });
    },
    /**
     *
     * @param {Number} index 节索引
     * @param {Number} int 节记录索引
     * @param {Object} item 节完整数据
     * @remards 节
     */
    getNewList(index, int, item) {
      let data = {
        courseId: item.courseId,
        moduleId: item.moduleId,
        chapterId: item.chapterId,
        numIndex: int,
        userId: this.setData.userId,
        goodsId: this.setData.goodsId,
        gradeId: this.setData.id,
      };
      if (item.type === 3) {
        data.sectionId = item.id;
      }
      if (item.type === 4) {
        data.examId = item.id;
      }
      this.$api.inquireGradegradelistPeriodAuditStatus(data).then((res) => {
        this.$set(this.listData.tableData3, index, res.data);
        this.getUserInfo();
      });
    },
    /**
     *
     * @param {Number} a 章索引
     * @param {Number} b 节索引
     * @param {Number} int 节记录索引
     * @param {Object} item 节完整数据
     * @remards 章 节
     */
    getNewListchapt(a, b, int, item) {
      let data = {
        courseId: item.courseId,
        moduleId: item.moduleId,
        chapterId: item.chapterId,
        numIndex: int,
        userId: this.setData.userId,
        goodsId: this.setData.goodsId,
        gradeId: this.setData.id,
      };
      if (item.type === 3) {
        data.sectionId = item.id;
      }
      if (item.type === 4) {
        data.examId = item.id;
      }
      this.$api.inquireGradegradelistPeriodAuditStatus(data).then((res) => {
        this.$set(
          this.listData.tableData2[a].classPeriodSectionList,
          b,
          res.data
        );
        this.getUserInfo();
      });
    },
    /**
     *
     * @param {Number} a 模块索引
     * @param {Number} b 章索引
     * @param {Number} c 节索引
     * @param {Number} int 节记录索引
     * @param {Object} item 节完整数据
     * @remards 模块 章 节
     */
    getNewListMores(a, b, c, int, item) {
      let data = {
        courseId: item.courseId,
        moduleId: item.moduleId,
        chapterId: item.chapterId,
        numIndex: int,
        userId: this.setData.userId,
        goodsId: this.setData.goodsId,
        gradeId: this.setData.id,
      };
      if (item.type === 3) {
        data.sectionId = item.id;
      }
      if (item.type === 4) {
        data.examId = item.id;
      }
      this.$api.inquireGradegradelistPeriodAuditStatus(data).then((res) => {
        this.$set(
          this.listData.tableData1[a].classPeriods[b].classPeriodSectionList,
          c,
          res.data
        );
        this.getUserInfo();
      });
    },
    //获取用户信息
    getUserInfo() {
      return new Promise((resolve, reject) => {
        this.$api
          .inquireGradegradelistUserlistPeriod({
            gradeId: this.setData.id,
            userId: this.setData.userId,
            goodsId: this.setData.goodsId,
          })
          .then((res) => {
            this.userData = res.rows[0];
            resolve();
          });
      });
    },
    changeData(data) {
      let arr = [];
      data.forEach((e) => (arr[e.type - 1] || (arr[e.type - 1] = [])).push(e));
      this.tablesData = arr;
    },
    //获取学时审核数据
    search() {
      var self = this;
      let data = {
        gradeId: this.setData.id,
        userId: this.setData.userId,
        goodsId: this.setData.goodsId,
      };
      this.loading = true;
      this.$api
        .inquireGradegradelistPeriodAudit(data)
        .then((res) => {
          /**
           * 将模块 章 节进行分类 tab1/tab2/tab3
           */
          this.changeData(res.rows);
          let tab1 = [];
          let tab2 = [];
          let tab3 = [];
          let tab5 = [];
          for (let i = 0; i < res.rows.length; i++) {
            if (res.rows[i].type === 1) {
              tab1.push(res.rows[i]);
            }
            if (res.rows[i].type === 2) {
              tab2.push(res.rows[i]);
            }
            if (res.rows[i].type === 3) {
              tab3.push(res.rows[i]);
            }
            if (res.rows[i].type === 5) {
              tab5.push(res.rows[i]);
            }
          }
          let allArrays = [];
          /**
           * 统计模块-章-节所有的待审核列表ID getAllList1
           */
          let getAllList1 = [];
          tab1.forEach((item) => {
            item.classPeriods.forEach((items, i) => {
              if (items.type == 5) {
                (item.arr || (item.arr = [])).push(items);
                item.classPeriods.splice(i, 1);
              }
              items.classPeriodSectionList &&
                items.classPeriodSectionList.forEach((itemsxs) => {
                  if (self.userData.periodStatus === 3) {
                    getAllList1.push(itemsxs.periodStatusId);
                    allArrays.push(itemsxs);
                  } else {
                    if (itemsxs.status === 2) {
                      getAllList1.push(itemsxs.periodStatusId);
                    }
                  }
                });
            });
          });
          /**
           * 统计章-节所有的待审核列表ID getAllList1
           */
          let getAllList2 = [];
          tab2.forEach((item) => {
            item.classPeriodSectionList.forEach((items) => {
              if (self.userData.periodStatus === 3) {
                getAllList2.push(items.periodStatusId);
                allArrays.push(items);
              } else {
                if (items.status === 2) {
                  getAllList2.push(items.periodStatusId);
                }
              }
            });
          });
          /**
           * 统计节所有的待审核列表ID getAllList1
           */
          let getAllList3 = [];
          tab3.forEach((item) => {
            if (self.userData.periodStatus === 3) {
              getAllList3.push(item.periodStatusId);
              allArrays.push(item);
            } else {
              if (item.status === 2) {
                getAllList3.push(item.periodStatusId);
              }
            }
          });
          this.getAllList = getAllList1.concat(getAllList2.concat(getAllList3));
          console.log(this.getAllList, "addd");
          this.allArrays = allArrays;
          this.listData.tableData1 = tab1;
          this.listData.tableData2 = tab2;
          this.listData.tableData3 = tab3;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     *
     * @param {Number} id
     * @remards 点击通过或作弊更新待审数组数据-当前选中数组数据-复选框-全选框
     */
    checkUpload(id) {
      this.getAllList = this.getAllList.filter((item) => {
        return item !== id;
      });
      this.checkList = this.checkList.filter((item) => {
        return item !== id;
      });
      this.handleCheckedCitiesChange(this.checkList);
    },
    /**
     *
     * @param {Bool} val 待审全选按钮当前是否为全选状态
     */
    handleCheckAllChange(val) {
      this.checkList = val ? this.getAllList : [];
      this.isIndeterminate = false;
    },
    /**
     *
     * @param {Arrays} value 点击复选框触发
     * @remards 当前选中数据ID
     */
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      if (checkedCount) {
        this.checkAll = checkedCount === this.getAllList.length;
      } else {
        this.checkAll = false;
      }
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.getAllList.length;
    },
  },
  components: {
    StudyTables,
  },
  /**
   * 离开页面前销毁定时器
   */
  beforeDestroy() {
    if (this.setTimeDOM) {
      clearInterval(this.setTimeDOM);
    }
  },
};
</script>
<style lang="less" scoped>
.top_style {
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
  border-radius: 8px;
  padding: 8px 16px;
  & > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    line-height: 48px;
    & > .left {
      display: flex;
      align-items: center;
      i {
        display: inline-block;
        width: 2px;
        height: 18px;
        background: #0c5dfb;
        margin-right: 8px;
      }
      span {
        color: #666;
        font-weight: bold;
      }
    }

    & > span {
      font-size: 14px;
    }
  }
  & > .info_img {
    display: flex;
    height: 210px;
    ul {
      width: 320px;
      li {
        margin-bottom: 12px;
        font-size: 14px;
      }
    }
    .img_by {
      flex: 1;
      display: flex;
      align-items: center;
      .pos_bottom {
        position: absolute;
        z-index: 1;
        bottom: 0px;
        width: 100%;
        height: 32px;
        background-color: rgba(53, 53, 53, 0.6);
        text-align: center;
        color: #fff;
        font-size: 16px;
        line-height: 32px;
      }
      & > .photoSty1 {
        width: 152px;
        height: 208px;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background-color: #f5f5f5;
        margin-right: 75px;
        & > img {
          width: 106px;
          height: 150px;
          margin: 29px auto 0px;
          display: block;
        }
      }
      & > .photoSty2 {
        width: 328px;
        height: 208px;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background-color: #f5f5f5;
        margin-right: 75px;
        & > img {
          width: 243px;
          height: 154px;
          margin: 27px auto 0px;
          display: block;
        }
        &:last-of-type {
          margin-right: 0px;
        }
      }
    }
  }
}
.studyStyle {
  margin: 16px 0px 0px;
  display: flex;
  align-items: center;
  & > .a_style {
    display: flex;
    align-items: center;
    margin: 0px 16px 16px 0px;
    padding: 11px 16px;
    box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
    border-radius: 4px;
    height: 40px;
    width: 440px;
    user-select: none;
    i {
      width: 2px;
      height: 18px;
      display: inline-block;
      background-color: #0047d0;
      margin-right: 8px;
    }
    span {
      color: #666;
      font-weight: bold;
    }
    .flex_style_study {
      flex: 1;
    }
    .num_style {
      float: right;
      font-size: 14px;
      margin-left: 14px;
    }
  }
  .s_sd {
    flex: 1;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0px 16px 16px 0px;
    .dis_colu {
      height: 55px;
      margin-right: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 14px;
    }
  }
}
/deep/ .el-table__expanded-cell {
  background: #f5f5f5;
}
/deep/ .el-table__expanded-cell {
  padding: 0px !important;
}
.li_sty {
  cursor: pointer;
  transition: all 0.3s;
  background-color: #eee;
  padding: 0px 10px;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 26px;
  display: table;
  &:hover {
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
  }
}
#studyTimes {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 190px);
}
.styFlex {
  width: 80px;
  text-align: center;
}
.checkboxList {
  margin-bottom: 6px;
  &/deep/.el-checkbox__label {
    display: none;
  }
}
.btnstyles {
  margin-left: 0px;
  margin-bottom: 10px;
}
.dis_flexs {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  ul {
    margin-bottom: 0px;
  }
}
.liImgs {
  float: left;
  width: 210px;
  height: 280px;
  margin-right: 16px;
  margin-bottom: 16px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  .abos {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    background-color: rgba(51, 51, 51, 0.7);
  }
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
</style>