dy-admin-manager/src/views/teamDetail/teamCourseList.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      课表列表
      <filter-search
        ref="filterSearch"
        @reload="reloadSearch"
        @setTimeForSearch="setTimeForSearch"
        :keys="['searchType']"
        :moreKeys="['start', 'end', 'organId']"
      />
    </h2>
    <div class="m-core">
      <!-- 搜索类型 -->
      <save-form
        :inline="true"
        class="searchForm"
        @submit="search"
        @reset="reset"
        ref="searchForm"
        :model.sync="searchForm"
      >
        <el-form-item>
          <el-input
            type="number"
            v-model.trim="searchForm.courseIdSearch"
            clearable
            placeholder="课程编号"
          />
        </el-form-item>
        <!-- <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            clearable
            placeholder="课程组编号/课程名称"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.schoolId"
            clearable
            filterable
            placeholder="请选择教学点"
          >
            <el-option
              v-for="(item, index) in selects.schools"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <remote-search
            :commit="'setTeachers'"
            v-model="searchForm.teacherIdList"
          />
        </el-form-item>
        <!-- <el-form-item>
          <el-select
            class="multiple"
            v-model.trim="searchForm.organIdList"
            filterable
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.groupType"
            clearable
            filterable
            placeholder="课程组类型"
          >
            <el-option
              v-for="item in courseListType"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-select
            v-model.trim="searchForm.courseType"
            clearable
            filterable
            placeholder="课程类型"
          >
            <el-option
              v-for="(item, index) in courseType"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-select
            v-model.trim="searchForm.teachMode"
            clearable
            filterable
            placeholder="教学模式"
          >
            <el-option label="线上课" value="ONLINE"></el-option>
            <el-option label="线下课" value="OFFLINE"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-select
            v-model.trim="searchForm.courseStatus"
            clearable
            filterable
            placeholder="课程状态"
          >
            <el-option label="未开始" value="NOT_START"></el-option>
            <el-option label="进行中" value="UNDERWAY"></el-option>
            <el-option label="已结束" value="OVER"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-select
            v-model.trim="searchForm.mergeCourseType"
            clearable
            filterable
            placeholder="合并课程类型"
          >
            <el-option
              v-for="(item, index) in mergeCourseTypeOptions"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.teachType"
            clearable
            filterable
            placeholder="老师类型"
          >
            <el-option
              v-for="item in workTypeOptions"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.isCallNames"
            clearable
            filterable
            placeholder="是否点名"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-date-picker
            v-model.trim="searchForm.timer"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="上课开始日期"
            end-placeholder="上课结束日期"
            :picker-options="{
              firstDayOfWeek: 1,
            }"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            :type="isSearch ? 'primary' : 'info'"
            icon="el-icon-circle-plus-outline"
            @click="showMove = true"
            >更多选项</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="primary">搜索</el-button>
          <el-button native-type="reset" type="danger">重置</el-button>

          <el-button
            v-permission="'export/superFindCourseSchedules'"
            @click="onCourseExport"
            type="primary"
            >导出课表</el-button
          >
        </el-form-item>
      </save-form>
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table
          :data="tableList"
          ref="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          @selection-change="handleSelectionChange"
          @select="onTableSelect"
          row-key="id"
        >
          >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            align="center"
            prop="organName"
            label="分部名称"
          ></el-table-column>
          <el-table-column
            align="center"
            width="170px"
            prop="musicGroupId"
            label="乐团/课程组编号"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="gotoCourse(scope.row)">
                <copy-text>{{ scope.row.musicGroupId }}</copy-text>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="id"
            width="100px"
            label="课程编号"
          >
            <template slot-scope="scope">
              <copy-text>{{ scope.row.id }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" width="200px" label="上课时间">
            <template slot-scope="scope"
              >{{
                scope.row.startClassTime
                  ? scope.row.startClassTime.substr(0, 16)
                  : ""
              }}-{{
                scope.row.endClassTime
                  ? scope.row.endClassTime.substr(11, 5)
                  : ""
              }}</template
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="subjectName"
            label="声部"
          ></el-table-column>
          <el-table-column prop="name" width="150px" label="课程名称">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.name }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" width="150px" label="课程类型">
            <template slot-scope="scope">
              <div>{{ scope.row.type | coursesType }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="教学模式">
            <template slot-scope="scope">
              <div>{{ scope.row.teachMode | teachMode }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="teacherName"
            width="110"
            label="主教老师"
          ></el-table-column>
          <el-table-column align="center" prop="schoolName" label="教学点">
            <template slot-scope="scope">
              <div>
                {{ scope.row.schoolName ? scope.row.schoolName : "网络教室" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="courseScheduleStatus"
            label="课程状态"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.status | coursesStatus }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="考勤申诉">
            <template slot-scope="scope">
              <div>{{ scope.row.isComplaints == 1 ? "是" : "否" }}</div>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="isLock" label="是否冻结">
            <template slot-scope="scope">{{
              scope.row.isLock ? "是" : "否"
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="newCourseId"
            label="合并类型"
            width="130px"
          >
            <template slot-scope="scope">
              <div>
                <span
                  v-if="
                    scope.row.newCourseId > 0 &&
                    scope.row.newCourseId == scope.row.id
                  "
                  >合并课
                </span>
                <el-button
                  type="text"
                  @click="common(scope.row)"
                  v-if="
                    scope.row.newCourseId > 0 &&
                    scope.row.newCourseId != scope.row.id
                  "
                >
                  被合并课
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="isCallNames" label="云教练课程">
            <template slot-scope="scope">{{
              scope.row.memberFlag ? "是" : "否"
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="isCallNames"
            label="是否点名"
            fixed="right"
          >
            <template slot-scope="scope">{{
              scope.row.isCallNames ? "是" : "否"
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            label="详情"
            fixed="right"
            width="220px"
          >
            <template slot-scope="scope">
              <div>
                <!-- <el-button
                  type="text"
                  @click="removeCourse(scope.row)"
                  v-permission="
                    'courseSchedule/batchDelete?page=teamCourseList'
                  "
                  >删除</el-button
                > -->
                <auth auths="/teamCourseListDetail">
                  <!--    v-if="permission('teamCourseList/details')" -->
                  <el-button type="text" @click="lookDetail(scope.row)"
                    >详情</el-button
                  >
                </auth>
                <el-button
                  type="text"
                  v-if="
                    permission('courseSchedule/classStartDateAdjust?hight') &&
                    (!scope.row.isLock || scope.row.newCourseId > 0)
                  "
                  @click="resetClass(scope.row)"
                  >调整</el-button
                >

                <!-- <el-button
                  type="text"
                  @click="addCompound(scope.row)"
                  v-if="
                    scope.row.groupType == 'MUSIC' &&
                    scope.row.type != 'MUSIC_NETWORK' &&
                    scope.row.type != 'HIGH_ONLINE' &&
                    scope.row.status == 'NOT_START' &&
                    !isAddCom(scope.row) &&
                    permission('courseSchedule/courseMerge') &&
                    scope.row.newCourseId <= 0 &&
                    !scope.row.beMerged &&
                    !scope.row.isLock // 李焕辜临轩要求冻结课程不能合并
                  "
                  >添加合课</el-button
                >
                <el-button
                  type="text"
                  v-if="
                    isAddCom(scope.row) &&
                    permission('courseSchedule/courseMerge')
                  "
                  @click="cancleCompound(scope.row)"
                  >取消合课</el-button
                > -->
                <el-button
                  type="text"
                  v-if="
                    scope.row.newCourseId == scope.row.id &&
                    permission('courseSchedule/mergeCourseSplit') &&
                    scope.row.status != 'OVER'
                  "
                  @click="resetCompound(scope.row)"
                  >取消合并</el-button
                >
                <el-button
                  type="text"
                  v-if="
                    scope.row.status == 'OVER' &&
                    !scope.row.isSettlement &&
                    permission('courseSchedule/cleanAttendance')
                  "
                  @click="clearAttend(scope.row)"
                  >清除考勤</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total.sync="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
          sync
        />
      </div>
    </div>
    <el-dialog title="课表详情" :visible.sync="classVisible" width="1000px">
      <el-form :model="maskForm" :inline="true">
        <el-form-item label="老师姓名">
          <!-- <el-input v-model.trim="maskForm.teacherName"
          disabled></el-input>-->
          <div class="inputStyle">{{ maskForm.teacherName }}</div>
        </el-form-item>
        <el-form-item label="课程模式">
          <!-- <el-input :value="maskForm.teachMode | teachMode"
          disabled></el-input>-->
          <div class="inputStyle">{{ maskForm.teachMode | teachMode }}</div>
          <!-- <span>{{maskForm.teachMode }}</span> -->
        </el-form-item>
        <el-form-item label="课程类型">
          <!-- <el-input :value="maskForm.type |classType"
          disabled></el-input>-->
          <div class="inputStyle">{{ maskForm.type | coursesType }}</div>
        </el-form-item>
        <!-- courseScheduleStatus -->
        <el-form-item label="课程状态">
          <!-- <el-input :value="maskForm.type |classType"
          disabled></el-input>-->
          <div class="inputStyle">{{ maskForm.status | coursesStatus }}</div>
        </el-form-item>
        <!-- <el-form-item label="签到时间">
          <div class="inputStyle">{{maskForm.signInTime | dateForMinFormat}}</div>
        </el-form-item>
        <el-form-item label="签退时间">
          <div class="inputStyle">{{maskForm.signOutTime | dateForMinFormat}}</div>
        </el-form-item> -->
        <el-form-item label="是否点名">
          <!-- <el-input :value="maskForm.isCallNames | isCall"
          disabled></el-input>-->
          <div class="inputStyle">{{ maskForm.isCallNames | isCall }}</div>
        </el-form-item>
        <!-- <el-form-item label="签到状态">
          <div class="inputStyle"
               :class="maskForm.isSignIn==1?'':'red'">{{ maskForm.isSignIn | attendanceType}}</div>
        </el-form-item>
        <el-form-item label="签退状态">
          <div class="inputStyle"
               :class="maskForm.isSignIn==1?'':'red'">{{ maskForm.isSignOut | attendanceOutType}}</div>
        </el-form-item> -->

        <el-form-item label="上课时间">
          {{
            maskForm.startClassTime
              ? maskForm.startClassTime.substr(0, 16)
              : ""
          }}-{{
            maskForm.endClassTime ? maskForm.endClassTime.substr(11, 5) : ""
          }}
        </el-form-item>
        <el-form-item label="上课时长">
          <div
            class="inputStyle"
            :class="maskForm.attendClassTime <= 120 ? '' : 'red'"
          >
            {{
              maskForm.attendClassTime >= 0 ? maskForm.attendClassTime : 0
            }}分钟
            <el-tooltip placement="top" popper-class="mTooltip">
              <div slot="content">学员和老师同时在教室里的时长。</div>
              <!-- <img :src="imageIcon" class="micon el-tooltip" style="width:8px height:8px" alt /> -->
              <i
                class="el-icon-question micon el-tooltip"
                style="font-size: 18px; color: #f56c6c"
                v-permission="'export/teacherSalary'"
              ></i>
            </el-tooltip>
          </div>
        </el-form-item>
        <el-form-item label="学员考勤" v-if="maskForm.status != 'NOT_START'">
          <div
            class="inputStyle"
            :class="maskForm.errorAttendanceNum != 0 ? 'red' : 'green'"
          >
            {{ maskForm.errorAttendanceNum != 0 ? "异常" : "正常" }}
          </div>
        </el-form-item>
        <el-form-item label="老师考勤" v-if="maskForm.status != 'NOT_START'">
          <div
            class="inputStyle"
            :class="
              maskForm.signInStatusEnum == 1 && maskForm.signOutStatusEnum == 1
                ? 'green'
                : 'red'
            "
          >
            {{
              maskForm.signInStatusEnum == 1 && maskForm.signOutStatusEnum == 1
                ? "正常"
                : "异常"
            }}
          </div>
        </el-form-item>
        <el-form-item v-if="maskForm.school" label="教学点">
          {{ maskForm.school.name }}
          <el-tooltip content="查看教学点" :open-delay="0.5">
            <i
              @click="openLocation(maskForm.school)"
              class="el-icon-map-location"
              style="cursor: pointer"
            ></i>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <!--  v-if="maskForm.status != 'NOT_START'" -->
      <el-tabs v-model.trim="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          label="学员列表"
          name="first"
          v-if="permission('/teamCourseListDetailStudnetList')"
        >
          <div v-if="activeName == 'first'">
            <!-- studentRollCall  -->
            <studentRollCall
              :courseScheduleId="maskForm.id"
              :isMainGo="isMainGo"
            ></studentRollCall>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="GPS定位"
                     v-if="maskForm.teachMode == 'OFFLINE'"
                     name="second">
          <div v-if="activeName == 'second'">
            <gpsLoction :courseScheduleId="maskForm.id"></gpsLoction>
          </div>
        </el-tab-pane> -->
        <el-tab-pane
          label="老师列表"
          name="second"
          v-if="permission('/teamCourseListDetailTeacherList')"
        >
          <div v-if="activeName == 'second'">
            <teacherList
              :courseScheduleId="maskForm.id"
              :teachMode="maskForm.teachMode"
              :courseStatus="maskForm.status"
              @syncTeacherAttend="syncTeacherAttend"
            ></teacherList>
          </div>
        </el-tab-pane>
        <!--      v-if="maskForm.teachMode != 'OFFLINE'" -->
        <el-tab-pane
          label="作业"
          name="third"
          v-if="permission('/teamCourseListDetailWorkList')"
        >
          <div v-if="activeName == 'third'">
            <studentWork :courseScheduleId="maskForm.id"></studentWork>
          </div>
        </el-tab-pane>
        <!--    v-if="maskForm.type == 'VIP' || maskForm.type == 'PRACTICE'" -->
        <el-tab-pane
          label="评论"
          name="four"
          v-if="permission('/teamCourseListDetailCommentList')"
        >
          <div v-if="activeName == 'four'">
            <courseEvaluate :courseScheduleId="maskForm.id"></courseEvaluate>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="调整记录"
          v-if="permission('/teamCourseListDetailAdjust')"
          name="five"
        >
          <div v-if="activeName == 'five'">
            <infoMsg :courseScheduleId="maskForm.id"></infoMsg>
          </div>
        </el-tab-pane>
        <!-- infoMsg -->
      </el-tabs>
    </el-dialog>
    <el-dialog :visible.sync="show" width="400px" title="课程调整">
      <resetClass
        :show="show"
        v-if="show"
        @closeReset="closeReset"
        @getList="getList"
        :id="id"
      />
    </el-dialog>
    <el-dialog title="查看教学点" :visible.sync="locationVisible">
      <school-location
        v-if="maskForm.school"
        :longitudeLatitude="maskForm.school.longitudeLatitude"
        :address="maskForm.school.address"
      />
    </el-dialog>
    <el-dialog
      title="更多选项"
      :visible.sync="showMove"
      v-if="showMove"
      width="700px"
    >
      <el-form
        :inline="true"
        class="searchForm"
        @submit="search"
        @reset="reset"
        ref="searchForm2"
        :model.sync="searchForm"
        label-width="120px"
      >
        <el-form-item label="课程组编号/名称" prop="search">
          <el-input
            style="width: 180px"
            v-model.trim="searchForm.search"
            clearable
            placeholder="课程组编号/课程名称"
          />
        </el-form-item>
        <el-form-item label="教学点" prop="schoolId">
          <el-select
            style="width: 180px"
            v-model.trim="searchForm.schoolId"
            clearable
            filterable
            placeholder="请选择教学点"
          >
            <el-option
              v-for="(item, index) in selects.schools"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分部" prop="organIdList">
          <el-select
            style="width: 180px"
            class="multiple"
            v-model.trim="searchForm.organIdList"
            filterable
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程组类型" prop="groupType">
          <el-select
            style="width: 180px"
            v-model.trim="searchForm.groupType"
            clearable
            filterable
            placeholder="课程组类型"
          >
            <el-option
              v-for="item in courseListType"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教学模式" prop="teachMode">
          <el-select
            style="width: 180px"
            v-model.trim="searchForm.teachMode"
            clearable
            filterable
            placeholder="教学模式"
          >
            <el-option label="线上课" value="ONLINE"></el-option>
            <el-option label="线下课" value="OFFLINE"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="课程状态" prop="courseStatus">
          <el-select
             style="width:180px"
            v-model.trim="searchForm.courseStatus"
            clearable
            filterable
            placeholder="课程状态"
          >
            <el-option label="未开始" value="NOT_START"></el-option>
            <el-option label="进行中" value="UNDERWAY"></el-option>
            <el-option label="已结束" value="OVER"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="合并课类型" prop="mergeCourseType">
          <el-select
            style="width: 180px"
            v-model.trim="searchForm.mergeCourseType"
            clearable
            filterable
            placeholder="合并课程类型"
          >
            <el-option
              v-for="(item, index) in mergeCourseTypeOptions"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="老师类型" prop="teachType">
          <el-select
            style="width: 180px"
            v-model.trim="searchForm.teachType"
            clearable
            filterable
            placeholder="老师类型"
          >
            <el-option
              v-for="item in workTypeOptions"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否点名" prop="isCallNames">
          <el-select
            style="width: 180px"
            v-model.trim="searchForm.isCallNames"
            clearable
            filterable
            placeholder="是否点名"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="云教练课程" prop="memberFlag">
          <el-select
            style="width: 180px"
            v-model.trim="searchForm.memberFlag"
            clearable
            filterable
            placeholder="云教练课程"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建日期" prop="creatTimer">
          <el-date-picker
            v-model.trim="searchForm.creatTimer"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="创建开始日期"
            end-placeholder="创建结束日期"
            :picker-options="{
              firstDayOfWeek: 1,
            }"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="课程时间" prop="courseTime">
          <el-time-picker
            is-range
            :picker-options="{
              selectableRange: '04:00:00 - 23:59:59',
            }"
            style="width: 350px !important"
            v-model="searchForm.courseTime"
            range-separator="-"
            start-placeholder="上课开始时间"
            end-placeholder="上课结束时间"
            placeholder="选择时间范围"
            value-format="HH:mm:ss"
            format="HH:mm"
            @change="changeCourseTime"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleMore">取 消</el-button>
        <el-button type="primary" @click="okMore">确 定</el-button>
      </span>
    </el-dialog>
    <!-- showMove -->

    <addCompound
      ref="addCompound"
      :compoundList="deleteList"
      v-if="permission('courseSchedule/courseMerge')"
      v-show="deleteList.length > 0"
      @clearCom="clearCom"
      @getList="getList"
      @removeCourse="removeCourse"
      @cancleCompound="cancleCompound"
    />
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import {
  superFindCourseSchedules,
  cleanAttendance,
  cancelCourseMerge,
} from "@/api/buildTeam";
import { bathDelete } from "@/api/vipSeting";
import { workType, mergeCourseType } from "@/constant";
import { objectToOptions, getTimes } from "@/utils";
import { getTeacherPersonalAttendanceDetail } from "@/api/teacherManager";
import { getSchool } from "@/api/systemManage";
import { courseType, courseListType } from "@/utils/searchArray";
import studentRollCall from "./componentCourse/studentRollCall";
import gpsLoction from "./componentCourse/gpsLocation";
import studentWork from "./componentCourse/studentWork";
import courseEvaluate from "./componentCourse/courseEvaluate";
import { permission } from "@/utils/directivePage";
import axios from "axios";
import { getToken } from "@/utils/auth";
import load from "@/utils/loading";
import SchoolLocation from "./components/modals/school-location";
import resetClass from "./componentCourse/resetClass";
import teacherList from "./componentCourse/teacherList";
import addCompound from "./componentCourse/addCompound";
import infoMsg from "./componentCourse/infoMsg";
let nowTime = new Date();
nowTime =
  nowTime.getFullYear() +
  "-" +
  (nowTime.getMonth() + 1) +
  "-" +
  nowTime.getDate();

const initSearch = {
  teachMode: null, // 教学模式
  organIdList: null,
  courseStatus: null,
  courseType: null,
  timer: [], // 时间
  class: null,
  teachType: null,
  mergeCourseType: null,
  isCallNames: null, // 是否点名
  search: null, // 乐团名称 编号 vip课名称
  teacherIdList: null, // 老师编号
  schoolId: null, // 教学点编号
  creatTimer: [],
  courseIdSearch: null,
  memberFlag: null,
  courseTime: ["", ""],
};
export default {
  name: "teamCourseList",
  data() {
    return {
      classVisible: false,
      timerVisible: false,
      courseVisible: false,
      locationVisible: false,
      courseType: courseType,
      mergeCourseType,
      courseListType: courseListType,
      searchForm: { ...initSearch },
      tableList: [],
      searchLsit: [],
      organList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      teacherList: [],
      schoolList: [],
      maskForm: {},
      activeName: "first",
      id: null,
      show: false,
      compoundList: [],
      deleteList: [],
      isMainGo: false,
      isDetele: false,
      showMove: false,
    };
  },
  components: {
    pagination,
    studentRollCall,
    gpsLoction,
    studentWork,
    courseEvaluate,
    resetClass,
    teacherList,
    addCompound,
    infoMsg,
    SchoolLocation,
  },
  created() {
    // this.searchForm.timer = [nowTime, nowTime];
  },
  computed: {
    workTypeOptions() {
      return objectToOptions(workType);
    },
    mergeCourseTypeOptions() {
      return objectToOptions(mergeCourseType);
    },
    isSearch() {
      return (
        this.searchForm.search ||
        this.searchForm.schoolId ||
        this.searchForm.organIdList ||
        this.searchForm.groupType ||
        this.searchForm.teachMode ||
        this.searchForm.mergeCourseType ||
        this.searchForm.teachType ||
        this.searchForm.isCallNames ||
        this.searchForm.memberFlag ||
        this.searchForm.creatTimer?.length > 0 || (this.searchForm.courseTime?.length > 0&&this.searchForm.courseTime[0])
      );
    },
  },
  mounted() {
    const { query, params } = this.$route;
    if (params.courseIdSearch) {
      this.searchForm.courseIdSearch = params.courseIdSearch;
    }
    if (query.start || query.end) {
      this.searchForm.timer = [query.start, query.end];
    } else {
      let flag = false;
      for (let item in this.searchForm) {
        if (typeof this.searchForm[item] == "object") {
          // 对象或者数组
          if (this.searchForm[item]?.length > 0 && this.searchForm[item][0]) {
            flag = true;
          }
        } else {
          if (this.searchForm[item]) {
            // console.log(this.searchForm[item])
            //  this.searchForm.timer = [];
            flag = true;
          }
        }
      }
      if (!flag) {
        this.searchForm.timer = [nowTime, nowTime];
      }
    }
    // 课程时间段异常，不需要时间搜索
    if (query.searchType == "COURSE_TIME_ERROR") {
      this.searchForm.timer = [];
    }

    if (query.organId) {
      this.searchForm.organIdList = Number(query.organId);
    }

    console.log(this.searchForm);
    this.$store.dispatch("setBranchs");
    this.$store.dispatch("setTeachers");
    this.$store.dispatch("setSchools");

    this.init();
  },
  methods: {
    changeCourseTime(val) {
      console.log(val);
    },
    init() {
      this.getList();
    },
    setTimeForSearch() {
      const { query } = this.$route;
      if (query.start || query.end) {
        this.searchForm.timer = [query.start, query.end];
      } else {
        this.searchForm.timer = [];
        // this.reset()
        this.searchForm = { ...initSearch };
      }
    },
    permission(str, parent) {
      return permission(str, parent);
    },
    reloadSearch(notSetTime) {
      if (!notSetTime) {
        this.searchForm.timer = [nowTime, nowTime];
      }
      this.rules.page = 1;
      this.getList();
    },
    async removeCourse(row) {
      if (this.deleteList.length < 1 && !row) {
        this.$message.error("请自少选择一节课");
        return;
      }
      let flag = false;
      let arr = this.deleteList.map((course) => {
        if (course.isSettlement || course.status == "UNDERWAY") {
          flag = true;
        }
        return course.id;
      });
      if (flag) {
        this.$message.error("已结算或进行中的课程无法删除");
        return;
      }
      let courseScheduleIds = arr.join(",") || row.id;

      this.$confirm("是否确认删除此数据?", "提示", {
        type: "warning",
      })
        .then(() => {
          bathDelete({ courseScheduleIds: courseScheduleIds })
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("删除成功");
                this.getList();
                this.clearCom();
              }
            })
            .catch((e) => {
              this.$refs.addCompound.isLook = true;
            });
        })
        .catch((e) => {
          this.$refs.addCompound.isLook = true;
        });
    },
    reset() {
      this.searchForm = { ...initSearch };
      // this.$router.push({ query: {} })
      this.search();
    },
    search() {
      this.rules.page = 1;

      this.getList();
    },
    common(row) {
      this.searchForm = {
        ...initSearch,
        timer: [],
        courseIdSearch: row.newCourseId,
      };
      this.search();
    },
    getSearchForm() {
      let searchForm = this.searchForm;
      if (!searchForm.timer || searchForm.timer.length <= 0) {
        searchForm.timer = [];
        // this.$message.error("请选择时间段");
        // return;
      }
      if (!searchForm.creatTimer || searchForm.creatTimer.length <= 0) {
        searchForm.creatTimer = [];
      }
      let count = 0;
      for (let item in searchForm) {
        if (searchForm[item] && !Array.isArray(searchForm[item])) {
          count++;
        } else if (
          Array.isArray(searchForm[item]) &&
          searchForm[item].length > 0
        ) {
          count++;
        }
      }
      //  课程时间段异常，不需要时间搜索，则课表列表搜索可以不要条件搜索
      // if (count <= 0) {
      //   this.$message.error("请至少选择一个搜索条件");
      //   return false;
      // }
      if (searchForm.courseTime?.length > 0) {
        searchForm.startClassTimeStr = searchForm.courseTime[0];
        searchForm.endClassTimeStr = searchForm.courseTime[1];
      } else {
        searchForm.startClassTimeStr = null;
        searchForm.endClassTimeStr = null;
      }
      const { creatTimer, timer, courseTime, ...rest } = searchForm;

      return {
        ...rest,
        page: this.rules.page,
        rows: this.rules.limit,
        searchType: this.$route.query.searchType,
        ...getTimes(creatTimer, ["createStartDate", "createEndDate"]),
        ...getTimes(timer, ["startTime", "endTime"]),
      };
    },
    openLocation(school) {
      this.locationVisible = true;
    },
    onCourseExport() {
      // 课表导出
      if (!this.getSearchForm()) {
        return;
      }
      let url = "/api-web/export/superFindCourseSchedules";

      const options = {
        method: "get",
        headers: {
          Authorization: getToken(),
        },
        params: this.getSearchForm(),
        url,
        // responseType: "blob",
      };
      this.$confirm("您确定导出报表", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then((res) => {
              console.log(res);
              this.$message.success(res.data.data);
              // let blob = new Blob([res.data], {
              // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
              // type: "application/vnd.ms-excel;charset=utf-8",
              //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              // });
              // let text = new Response(blob).text();
              // text.then((res) => {
              //   // 判断是否报错
              //   if (res.indexOf("code") != -1) {
              //     let json = JSON.parse(res);
              //     this.$message.error(json.msg);
              //   } else {
              //     let objectUrl = URL.createObjectURL(blob);
              //     let link = document.createElement("a");
              //     let fname = "课表列表" + new Date().getTime() + ".xls"; //下载文件的名字
              //     link.href = objectUrl;
              //     link.setAttribute("download", fname);
              //     document.body.appendChild(link);
              //     link.click();
              //   }
              // });
              load.endLoading();
            })
            .catch((error) => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => {});
    },
    getList() {
      if (!this.getSearchForm()) {
        return;
      }
      superFindCourseSchedules(this.getSearchForm()).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
          let idList = this.deleteList.map((course) => {
            return course.id;
          });
          this.isDetele = true;
          this.$nextTick(() => {
            this.tableList.forEach((course) => {
              if (idList.indexOf(course.id) != -1) {
                this.$refs.tableList.toggleRowSelection(course, true);
              }
            });
            this.isDetele = false;
          });
          this.$refs.searchForm.save(this.searchForm);
          //
          //  this.$router.push({ query: {} })
          // let arr = this.$helpers.lodash.differenceWith( this.tableList, this.deleteList,'id')
        }
      });
      //  this.$router.replace({ query: {...this.$route.query,courseIdSearch:null} })
    },
    lookDetail(row) {
      // this.maskForm = row;
      // 发请求 获取详情 row.id
      this.maskForm = row;
      this.activeName = "first";
      this.classVisible = true;
      getTeacherPersonalAttendanceDetail({ courseScheduleId: row.id }).then(
        (res) => {
          if (res.code == 200) {
            this.maskForm = { ...this.maskForm, ...res.data };
            this.maskForm.id = row.id;
            this.activeName = "first";
            this.classVisible = true;
            this.isMainGo = this.$refs.filterSearch?.show;
          }
        }
      );
    },
    syncTeacherAttend() {
      if (this.maskForm.id) {
        getTeacherPersonalAttendanceDetail({
          courseScheduleId: this.maskForm.id,
        }).then((res) => {
          if (res.code == 200) {
            this.maskForm = { ...this.maskForm, ...res.data };
            this.isMainGo = this.$refs.filterSearch?.show;
          }
        });
      }
    },

    handleClick(tab, event) {
      // console.log(tab, event);
    },
    resetClass(row) {
      this.id = row.id;
      this.show = true;
    },
    closeReset() {
      this.show = false;
    },
    clearAttend(row) {
      this.$confirm("是否清除考勤记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          cleanAttendance({ courseScheduleIds: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("清除成功");
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    cancleMore() {
      // this.$refs.searchForm2.resetFields()
      this.showMove = false;
    },
    okMore() {
      this.getList();
      this.showMove = false;
    },
    // addCompound(row) {
    //   this.compoundList.push(row);
    //   this.compoundList = [...new Set(this.compoundList)];
    // },
    // isAddCom(row) {
    //   let flag = false;
    //   this.compoundList.forEach((com) => {
    //     if (com.id == row.id) {
    //       flag = true;
    //     }
    //   });
    //   return flag;
    // },
    cancleCompound(row) {
      let indexNum = null;
      this.deleteList.forEach((com, index) => {
        if (com.id == row.id) {
          indexNum = index;
        }
      });
      if (indexNum + "") {
        this.deleteList.splice(indexNum, 1);
      }
      this.tableList.forEach((course, index) => {
        if (course.id == row.id) {
          this.$refs.tableList.toggleRowSelection(course, false);
        }
      });
      if (this.deleteList.length <= 0) {
        this.clearCom();
      }
    },
    clearCom() {
      // this.deleteList = [];
      this.$set(this, "deleteList", []);
      this.$refs.tableList.clearSelection();
      this.$refs.addCompound.isLook = false;
    },
    resetCompound(row) {
      this.$confirm("您确定取消合并该课程?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          cancelCourseMerge({ mainCourseId: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("提交成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    handleSelectionChange(arr) {
      // this.deleteList = arr;
      if (arr.length > 0) {
        // 有可能加 有可能减
        this.deleteList = this.deleteList.concat(arr);
        // 去重
        this.deleteList = this.$helpers.lodash.uniqBy(this.deleteList, "id");
      }
      // else if(){}
      else {
        if (this.isDetele) return;
        // 有2种 1是新页
        // 2是点击反选
        let idList = this.deleteList.map((course) => {
          return course.id;
        });
        this.$nextTick(() => {
          let tableIdList = [];
          this.tableList.forEach((course) => {
            tableIdList.push(course.id);
            if (idList.indexOf(course.id) != -1) {
              this.$refs.tableList.toggleRowSelection(course, false);
              // 删除这个元素
            }
          });
          this.deleteList = this.$helpers.lodash.remove(
            this.deleteList,
            function (item) {
              return tableIdList.indexOf(item.id) == -1;
            }
          );
          if (this.deleteList.length <= 0) {
            this.clearCom();
          }
        });
      }
    },
    gotoCourse(row) {
      if (row.groupType == "MUSIC") {
        this.$router.push({
          path: "/teamList",
          query: { search: row.musicGroupId },
        });
      } else if (row.groupType == "VIP") {
        this.$router.push({
          path: "/vipManager/vipList",
          query: { search: row.musicGroupId },
        });
      } else if (row.groupType == "PRACTICE") {
        this.$router.push({
          path: "/accompanyManager/accompany",
          query: { search: row.musicGroupId },
        });
      }
    },
    onTableSelect(rows, row) {
      let idList = this.deleteList.map((course) => {
        return course.id;
      });
      if (idList.indexOf(row.id) != -1) {
        this.deleteList.splice(idList.indexOf(row.id), 1);
        if (this.deleteList.length <= 0) {
          this.clearCom();
        }
      }
    },
  },
  filters: {
    isCall(val) {
      if (val == 0) {
        return "未点名";
      } else if (val == 1) {
        return "已点名";
      }
    },
  },
  watch: {
    classVisible(val) {
      if (!val) {
        this.activeName = null;
      }
    },
    "searchForm.courseIdSearch"(val) {},
  },
};
</script>
<style lang="scss" scoped>
.visible {
  visibility: hidden;
}
.cl-container {
  .topFrom {
    margin: 20px 30px 0;
    .classlist {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      ul {
        li {
          list-style: none;
        }
      }
    }
  }
  .searchForm {
    margin: 0 30px;
  }
}
.btnWraps {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  div {
    margin-right: 20px;
  }
}
.inputStyle {
  width: 180px;
}
.red {
  color: red;
}
.green {
  color: #14928a;
}

.exportBtn {
  background: #13817a;
}
.newBand {
  margin-top: 30px;
}
</style>