<style>
.common_Style {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
}

.classForm_monday {
  background-color: #ced9f8;
  color: #2961fe;
}

.classForm_tuesday {
  background-color: #d9f3ff;
  color: #3fc4ff;
}

.classForm_wednesday {
  background-color: #f6e2cb;
  color: #f28c1d;
}

.classForm_thursday {
  background-color: #ccf3eb;
  color: #02c499;
}

.classForm_friday {
  background-color: #f7cfd6;
  color: #f72e52;
}

.classForm_saturday {
  background-color: #fff5cc;
  color: #ffcc00;
}

.classForm_sunday {
  background-color: #e6e3fe;
  color: #8175fb;
}

.planTimeLi tbody::before {
  content: "";
  display: table-row;
  height: 20px;
}

._font_size12 {
  font-size: 12px !important;
}

._addUpload_box {
  display: block;
  margin-top: 15px;
}

._addUpload_box img {
  width: 100%;
}

._addUpload_box > div {
  float: left;
  width: 138px;
  height: 92px;
  border: 1px dashed rgba(210, 210, 210, 1);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 5px;
  margin-right: 10px;
  position: relative;
}

._addUpload_box > div:hover {
  background-color: #f5f5f5;
}

._addFile_name {
  padding-left: 15px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._addUpload_box .icon-guanbi1 {
  font-size: 12px;
  color: white;
  display: inline-block;
  margin-left: 15px;
  position: absolute;
  right: -6px;
  top: -9px;
  background-color: #f56c6c;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 20px;
}

._addUpload_box .icon-guanbi1:hover {
  font-size: 12px;
  color: #c94052;
}

._addUpload_box .icon-excel,
._addUpload_box .icon-pdf,
._addUpload_box .icon-txt,
._addUpload_box .icon-wenjian,
._addUpload_box .icon-yasuobao,
._addUpload_box .icon-shipin,
._addUpload_box .icon-word {
  text-align: center;
  font-size: 38px;
  color: green;
  line-height: 75px;
}

._addUpload_box .icon-yasuobao {
  color: gray;
}

._show_img_box {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
  width: 100vw !important;
  height: 100vh;
  z-index: 999;
  text-align: center;
}

._addUpload_tips {
  font-size: 12px;
  color: #999999;
}

._jump_page {
  cursor: pointer;
  text-decoration: underline;
}

._jump_page:hover {
  color: #c94052;
}

.stop .el-upload-dragger {
  font-size: 28px;
  color: #8c939d;
  width: 126px;
  height: 80px;
  line-height: 41px;
  text-align: center;
}
.classFlictTable {
  width: 500px;
  text-align: center;
}

.classFlictTable tr td {
  height: 40px;
  color: #000;
}

.classFlictTable tr th {
  height: 40px;
  background-color: rgb(238, 238, 239);
}
.resStyle {
  color: red;
}
</style>
<template>
  <q-dialog
    v-model="persistent"
    content-class="bg-grey-1"
    persistent
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 800px; max-width: 900px" class="stop">
      <q-card-section>
        <div class="text-h6">创建调课申请单</div>
      </q-card-section>
      <q-card-section class="q-pt-none" style="height: 70vh">
        <q-scroll-area
          :thumb-style="thumbStyle"
          :content-style="contentStyle"
          :content-active-style="contentActiveStyle"
          class="full-width full-height"
        >
          <div class="text-caption q-mb-lg q-px-md text-grey-6">基本资料</div>
          <div class="row q-col-gutter-lg">
            <q-select
              filled
              stack-label
              option-value="SId"
              option-label="SName"
              v-model="msg.SchoolId"
              ref="School_Id"
              :options="schoolList"
              label="校区"
              :dense="false"
              class="col-6"
              emit-value
              map-options
              @input="changeSchool"
            />
            <q-select
              filled
              stack-label
              option-value="CourseId"
              option-label="CourseName"
              v-model="msg.CouseId"
              ref="CouseId"
              :options="courseList"
              label="关联课程"
              :dense="false"
              class="col-6"
              emit-value
              map-options
              @input="changeCourse"
            />
            <q-select
              filled
              stack-label
              option-value="ClassId"
              option-label="ClassName"
              v-model="msg.ClassId"
              :options="classList"
              @input="changeClass"
              emit-value
              map-options
              label="班级"
              class="col-6"
            >
              <template
                v-slot:option="{
                  itemProps,
                  itemEvents,
                  opt,
                  selected,
                  toggleOption,
                }"
              >
                <q-item v-bind="itemProps" v-on="itemEvents">
                  <q-item-section>
                    <q-item-label v-html="opt.ClassName"></q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-item-label v-html="opt.OpenTime"></q-item-label>
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
            <q-select
              filled
              stack-label
              option-value="Id"
              option-label="Name"
              v-model="msg.ChangeType"
              :options="changeType"
              label="变更类型"
              :dense="false"
              class="col-6"
              emit-value
              map-options
              @input="changeTypeResult"
            />
          </div>
          <div class="row items-center">
            <div class="text-caption q-my-lg q-px-md text-grey-6 col">
              变更内容 注意：需要对变更的内容进行打钩
            </div>
            <div class="row items-center">
              <div class="text-grey-6">变更范围：</div>
              <q-radio
                size="xs"
                v-model="msg.MoveType"
                val="1"
                label="单个或多个"
              />
              <q-radio size="xs" v-model="msg.MoveType" val="2" label="全局" />
            </div>
          </div>
          <div v-if="msg.MoveType == '1'" class="row items-center">
            <div class="col">
              <q-table
                no-data-label="暂无相关数据"
                flat
                style="max-height: 300px"
                :pagination="pages"
                class="
                  sticky-column-table sticky-header-column-table
                  no-bottom-table
                "
                separator="none"
                :data="currentClass"
                :columns="msg.ChangeType == 1 ? columns : columns2"
                row-key="ClassPlanId"
                selection="multiple"
                :selected.sync="selected"
              >
                <template v-slot:body-cell-ClassDate="props">
                  <q-td :props="props">
                    <div>{{ props.row.ClassDate }}</div>
                    <div>{{ props.row.WeekDayStr }}</div>
                  </q-td>
                </template>
                <template v-slot:body-cell-TimeList="props">
                  <q-td auto-width :props="props">
                    <div
                      v-for="(item, index) in props.row.TimeList"
                      class="lessForm_Class"
                    >
                      {{ index + 1 }}节课 {{ item.StartTime }}-{{
                        item.EndTime
                      }}
                    </div>
                  </q-td>
                </template>
                <template v-slot:body-cell-TargetClassDate="props">
                  <q-td
                    auto-width
                    :props="props"
                    style="border-left: 1xp solid #000"
                  >
                    {{ props.row.NewPlan.ClassDate }}
                    <q-popup-edit
                      v-model="props.row.NewPlan.ClassDate"
                      title="变更日期"
                      persistent
                      buttons
                      label-set="确认"
                      label-cancel="取消"
                    >
                      <el-date-picker
                        v-model="props.row.NewPlan.ClassDate"
                        type="date"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </q-popup-edit>
                  </q-td>
                </template>
                <template v-slot:body-cell-TargetTimeList="props">
                  <q-td auto-width :props="props">
                    <div
                      v-for="(item, index) in props.row.NewPlan.TimeList"
                      class="lessForm_Class"
                    >
                      {{ index + 1 }}节课 {{ item.StartTime }}-{{
                        item.EndTime
                      }}
                    </div>
                    <q-popup-edit
                      :validate="proteinRangeValidation"
                      persistent
                      v-model="props.row.NewPlan.TimeList"
                      title="变更时间"
                      buttons
                      label-set="确认"
                      label-cancel="取消"
                    >
                      <div
                        v-for="(item, index) in props.row.NewPlan.TimeList"
                        class="q-mb-md row items-center"
                        style="width: 430px"
                      >
                        <div class="lessForm_Class col">
                          {{ index + 1 }}节课
                        </div>
                        <div class="row items-center">
                          <el-time-select
                            placeholder="起始时间"
                            v-model="item.StartTime"
                            style="width: 100px"
                            :picker-options="pickers"
                          >
                          </el-time-select>
                          <el-time-select
                            placeholder="结束时间"
                            v-model="item.EndTime"
                            style="width: 100px; margin-left: 12px"
                            :picker-options="{
                              start: '09:00',
                              step: '00:15',
                              end: '22:30',
                              minTime: item.StartTime,
                            }"
                          >
                          </el-time-select>
                          <q-input
                            filled
                            v-model="item.TimeHour"
                            size="xs"
                            mask="#.#"
                            fill-mask="0.0"
                            label="有效课时"
                            suffix="课时"
                            style="width: 100px; margin-left: 12px"
                          />
                          <q-btn
                            v-if="props.row.NewPlan.TimeList.length > 1"
                            round
                            color="negative"
                            class="q-ml-md"
                            size="xs"
                            icon="iconfont icon-guanbi1"
                            @click="removeTime(props.row.NewPlan, index)"
                          >
                          </q-btn>
                        </div>
                      </div>
                      <q-btn
                        round
                        color="primary"
                        size="xs"
                        icon="iconfont icon-img_haha"
                        @click="addTime(props.row.NewPlan)"
                      ></q-btn>
                    </q-popup-edit>
                  </q-td>
                </template>
                <template v-slot:bottom></template>
              </q-table>
            </div>
          </div>
          <div v-if="msg.ChangeType == 1 && msg.MoveType == 2">
            <div class="row">
              <q-input
                filled
                v-model="msg.AllChangePlanItem.OpenTimeStr"
                class="col-6 q-pr-lg q-pb-lg"
                mask="date"
                label="开班时间"
              >
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy
                      ref="qDateProxy1"
                      transition-show="scale"
                      transition-hide="scale"
                    >
                      <q-date
                        v-model="msg.AllChangePlanItem.OpenTimeStr"
                        :options="optionsFn"
                        @input="() => $refs.qDateProxy1.hide()"
                      />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
              <q-select
                filled
                stack-label
                option-value="Id"
                option-label="Name"
                v-model="msg.AllChangePlanItem.ClassStyle"
                ref="ClassStyle"
                :options="classSetList"
                label="排课安排"
                :dense="false"
                class="col-6 q-pr-lg q-pb-lg"
                emit-value
                map-options
                @input="changeClassStyle(msg.AllChangePlanItem.ClassStyle)"
              />
            </div>
            <div class="row wrap" v-if="msg.AllChangePlanItem.ClassStyle == 1">
              <div class="col-6">
                <q-select
                  filled
                  stack-label
                  multiple
                  option-value="value"
                  option-label="label"
                  v-model="checkedDays"
                  ref="ClassStyle"
                  :options="weekList"
                  label="选择周几"
                  :dense="false"
                  class="col-6 q-pr-lg"
                  emit-value
                  map-options
                >
                  <template
                    v-slot:option="{
                      itemProps,
                      itemEvents,
                      opt,
                      selected,
                      toggleOption,
                    }"
                  >
                    <q-item v-bind="itemProps" v-on="itemEvents">
                      <q-item-section avatar>
                        <span
                          v-if="opt.icon == 1"
                          class="common_Style classForm_monday"
                          >月</span
                        >
                        <span
                          v-if="opt.icon == 2"
                          class="common_Style classForm_tuesday"
                          >火</span
                        >
                        <span
                          v-if="opt.icon == 3"
                          class="common_Style classForm_wednesday"
                          >水</span
                        >
                        <span
                          v-if="opt.icon == 4"
                          class="common_Style classForm_thursday"
                          >木</span
                        >
                        <span
                          v-if="opt.icon == 5"
                          class="common_Style classForm_friday"
                          >金</span
                        >
                        <span
                          v-if="opt.icon == 6"
                          class="common_Style classForm_saturday"
                          >土</span
                        >
                        <span
                          v-if="opt.icon == 7"
                          class="common_Style classForm_sunday"
                          >日</span
                        >
                      </q-item-section>
                      <q-item-section>
                        <q-item-label v-html="opt.label" />
                      </q-item-section>
                      <q-item-section side>
                        <i
                          style="color: #2961fe"
                          v-if="selected"
                          class="iconfont icon-chenggong"
                        ></i>
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
              </div>
            </div>
            <div class="row wrap" v-if="msg.AllChangePlanItem.ClassStyle == 2">
              <q-select
                filled
                stack-label
                multiple
                option-value="value"
                option-label="label"
                v-model="checkedDays"
                ref="ClassStyle"
                :options="dayList"
                label="选择日期"
                :dense="false"
                class="col-6 q-pr-lg q-pr-lg"
                emit-value
                map-options
              >
              </q-select>
            </div>
            <div class="row wrap" v-if="msg.AllChangePlanItem.ClassStyle == 3">
              <div class="col-12">
                <q-date
                  v-model="checkedDays"
                  minimal
                  multiple
                  style="width: 100%"
                />
              </div>
            </div>
            <div class="row wrap" style="margin: 20px 0">
              <div class="col-6">
                学习时段
                <q-btn
                  style="margin-left: 30px"
                  size="10px"
                  @click="addPlan()"
                  round
                  color="primary"
                  icon="iconfont icon-img_haha"
                />
              </div>
            </div>
            <template
              v-if="DefaultPlanTimeList && DefaultPlanTimeList.length > 0"
            >
              <table
                style="width: 100%; border-collapse: collapse"
                class="planTimeLi"
              >
                <thead>
                  <tr>
                    <th>日期/周</th>
                    <th colspan="2">时间</th>
                    <th>消耗课时</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody
                  v-for="(nItem, nIndex) in DefaultPlanTimeList"
                  :key="nIndex + 10000"
                >
                  <tr v-for="(sItem, sIndex) in nItem.TimeList">
                    <td
                      :rowspan="nItem.TimeList.length"
                      v-if="sIndex == 0"
                      style="position: relative"
                    >
                      <q-select
                        filled
                        style="width: 220px"
                        stack-label
                        multiple
                        v-model="nItem.DateList"
                        ref="DateList"
                        :options="checkedDays"
                        :label="
                          msg.AllChangePlanItem.ClassStyle == 1
                            ? '选择周几'
                            : '选择日期'
                        "
                        :dense="false"
                        class="col-6"
                        emit-value
                        map-options
                        clearable
                      >
                      </q-select>
                      <a
                        @click="deletePlan(nIndex)"
                        style="color: blue; cursor: pointer; position: absolute"
                        >删除</a
                      >
                    </td>
                    <td>
                      <q-input
                        filled
                        v-model="sItem.StartTime"
                        class="col-6 q-pl-lg"
                        placeholder="开始时间"
                        mask="time"
                      >
                        <template v-slot:append>
                          <q-icon name="access_time" class="cursor-pointer">
                            <q-popup-proxy
                              transition-show="scale"
                              transition-hide="scale"
                            >
                              <q-time v-model="sItem.StartTime">
                                <div class="row items-center justify-end">
                                  <q-btn
                                    v-close-popup
                                    label="确定"
                                    color="primary"
                                    flat
                                  />
                                </div>
                              </q-time>
                            </q-popup-proxy>
                          </q-icon>
                        </template>
                      </q-input>
                    </td>
                    <td>
                      <q-input
                        filled
                        v-model="sItem.EndTime"
                        class="col-6 q-pr-lg"
                        placeholder="结束时间"
                        mask="time"
                      >
                        <template v-slot:append>
                          <q-icon name="access_time" class="cursor-pointer">
                            <q-popup-proxy
                              transition-show="scale"
                              transition-hide="scale"
                            >
                              <q-time v-model="sItem.EndTime">
                                <div class="row items-center justify-end">
                                  <q-btn
                                    v-close-popup
                                    label="确定"
                                    color="primary"
                                    flat
                                  />
                                </div>
                              </q-time>
                            </q-popup-proxy>
                          </q-icon>
                        </template>
                      </q-input>
                    </td>
                    <td>
                      <q-input
                        filled
                        stack-label
                        maxlength="20"
                        v-model="sItem.TimeHour"
                        @keyup.native="checkPrice(sItem, 'TimeHour')"
                        :dense="false"
                        class="col-6 q-pr-lg"
                        label="消耗课时"
                      />
                    </td>
                    <td>
                      <q-btn
                        size="10px"
                        v-if="sIndex == 0"
                        @click="addPlanTime(nItem)"
                        round
                        color="primary"
                        icon="iconfont icon-img_haha"
                      />
                      <q-btn
                        v-if="sIndex > 0"
                        size="10px"
                        @click="deletePlanTime(nItem, sIndex)"
                        round
                        color="red"
                        icon="iconfont icon-guanbi1"
                      />
                    </td>
                  </tr>
                </tbody>
              </table>
            </template>
            <div class="row wrap" style="margin-top: 30px; display: none">
              <div class="col-6">
                <q-input
                  filled
                  stack-label
                  maxlength="6"
                  v-model="msg.AllChangePlanItem.ClassHours"
                  :dense="false"
                  class="col-6 q-pr-lg q-pb-lg"
                  label="学习课时"
                  @keyup.native="
                    checkInteger(msg.AllChangePlanItem, 'ClassHours')
                  "
                />
              </div>
              <div class="col-6">
                <q-select
                  label="课时分钟数"
                  filled
                  stack-label
                  v-model="msg.AllChangePlanItem.ClassHourMinute"
                  :options="ClassHourMinuteArray"
                  option-value="Id"
                  option-label="Name"
                  :dense="false"
                  class="col-6 q-pr-lg q-pb-lg"
                  emit-value
                  map-options
                >
                </q-select>
              </div>
            </div>
          </div>
          <div v-if="msg.ChangeType == 3">
            <div
              class="text-caption q-mb-lg q-px-md text-grey-6 col"
              style="margin-top: 20px"
            >
              目标教室
            </div>
            <div class="row">
              <q-select
                filled
                option-value="RoomId"
                option-label="RoomName"
                v-model="msg.ClassRoomId"
                :options="roomList"
                emit-value
                map-options
                label="教室"
                class="col-6 q-pr-lg"
              >
                <template
                  v-slot:option="{
                    itemProps,
                    itemEvents,
                    opt,
                    selected,
                    toggleOption,
                  }"
                >
                  <q-item v-bind="itemProps" v-on="itemEvents">
                    <q-item-section>
                      <q-item-label v-html="opt.RoomName"></q-item-label>
                    </q-item-section>
                    <q-item-section side>
                      <q-item-label v-html="opt.SchoolName"></q-item-label>
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
              <q-input
                v-if="msg.MoveType == '2'"
                filled
                v-model="msg.TakeEffectTime"
                class="col-6"
                mask="date"
                label="生效时间"
              >
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy
                      ref="qDateProxy1"
                      transition-show="scale"
                      transition-hide="scale"
                    >
                      <q-date
                        v-model="msg.TakeEffectTime"
                        :options="optionsFn"
                        @input="() => $refs.qDateProxy1.hide()"
                      />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
          </div>
          <div v-if="msg.ChangeType == 2">
            <div
              class="text-caption q-mb-lg q-px-md text-grey-6 col"
              style="margin-top: 20px"
            >
              目标老师
            </div>
            <div class="row">
              <q-select
                filled
                option-value="TId"
                option-label="TeacherName"
                v-model="msg.TeacherId"
                :options="TeacherList"
                emit-value
                map-options
                label="老师"
                class="col-6 q-pr-lg"
              >
              </q-select>
              <q-input
                filled
                v-if="msg.MoveType == '2'"
                v-model="msg.TakeEffectTime"
                class="col-6"
                mask="date"
                label="生效时间"
              >
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy
                      ref="qDateProxy1"
                      transition-show="scale"
                      transition-hide="scale"
                    >
                      <q-date
                        v-model="msg.TakeEffectTime"
                        :options="optionsFn"
                        @input="() => $refs.qDateProxy1.hide()"
                      />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
          </div>
          <div v-if="msg.ChangeType == 4 && msg.MoveType == '2'" class="row">
            <q-input
              filled
              v-model="msg.TakeEffectTime"
              class="col-6"
              mask="date"
              label="生效时间"
            >
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy
                    ref="qDateProxy1"
                    transition-show="scale"
                    transition-hide="scale"
                  >
                    <q-date
                      v-model="msg.TakeEffectTime"
                      :options="optionsFn"
                      @input="() => $refs.qDateProxy1.hide()"
                    />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
          <q-input
            filled
            type="textarea"
            :rows="3"
            style="margin-top: 20px"
            stack-label
            maxlength="2000"
            v-model="msg.Remarks"
            :dense="false"
            class="col-12 q-pb-lg"
            label="备注"
          />
          <div class="row" style="display: none">
            <div class="col-12 q-mt-md text-grey-6">
              上传附件：<span
                class="fj-tip"
                style="font-size: 10px; color: #f00"
                >*单文件限制5M内</span
              >
            </div>
            <div>
              <div class="_addUpload_box clearfix">
                <template v-for="(file, fIndex) in saveMsg">
                  <div v-if="file.Type == 3">
                    <div style="width: 100%; height: 100%; overflow: hidden">
                      <img
                        :src="file.Url ? file.Url : file.Content"
                        @click="showUpLoadFile(file)"
                      />
                    </div>
                    <span
                      class="iconfont icon-guanbi1"
                      @click="deleteUploadFile(fIndex)"
                    ></span>
                  </div>
                  <div v-if="file.Type == 1">
                    <div
                      class="iconfont"
                      :class="
                        file.Content.substring(
                          file.Content.lastIndexOf('.') + 1,
                          file.Content.length
                        ).toUpperCase() == 'PDF'
                          ? 'icon-pdf'
                          : file.Content.substring(
                              file.Content.lastIndexOf('.') + 1,
                              file.Content.length
                            ).toUpperCase() == 'TXT'
                          ? 'icon-txt'
                          : file.Content.substring(
                              file.Content.lastIndexOf('.') + 1,
                              file.Content.length
                            ).toUpperCase() == 'DOCX' ||
                            file.Content.substring(
                              file.Content.lastIndexOf('.') + 1,
                              file.Content.length
                            ).toUpperCase() == 'DOC'
                          ? 'icon-word'
                          : 'icon-excel'
                      "
                      @click="showUpLoadFile(file)"
                    ></div>
                    <span
                      class="iconfont icon-guanbi1"
                      @click="deleteUploadFile(fIndex)"
                    ></span>
                  </div>
                  <div v-if="file.Type == 2">
                    <div
                      class="iconfont icon-wenjian"
                      @click="showUpLoadFile(file)"
                    ></div>
                    <span
                      class="iconfont icon-guanbi1"
                      @click="deleteUploadFile(fIndex)"
                    ></span>
                  </div>
                  <div v-if="file.Type == 4">
                    <div
                      class="iconfont icon-yasuobao"
                      @click="showUpLoadFile(file)"
                    ></div>
                    <span
                      class="iconfont icon-guanbi1"
                      @click="deleteUploadFile(fIndex)"
                    ></span>
                  </div>
                  <div v-if="file.Type == 5">
                    <div
                      class="iconfont icon-shipin"
                      @click="showUpLoadFile(file)"
                    ></div>
                    <span
                      class="iconfont icon-guanbi1"
                      @click="deleteUploadFile(fIndex)"
                    ></span>
                  </div>
                </template>
                <div class="_pic_upload">
                  <el-upload
                    drag
                    :http-request="uploadFileBtn"
                    :multiple="true"
                    :show-file-list="false"
                    action=""
                  >
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    <div class="el-upload__text">
                      {{ $t("active.ld_djscwj") }}
                    </div>
                  </el-upload>
                </div>
              </div>
            </div>
          </div>
          <q-table
            no-data-label="暂无相关数据"
            :data="conflictData"
            v-if="conflictData.length > 0"
            :columns="columns3"
            flat
            style="max-height: 300px"
            :pagination="pages"
            class="sticky-column-table no-bottom-table"
            separator="none"
            row-key="ClassPlanId"
          >
            <template v-slot:top="props">
              <div class="text-caption q-px-md text-grey-6 col">冲突数据</div>
              <q-space />
            </template>
            <template v-slot:body-cell-PlanTimeList="props">
              <q-td>
                <div
                  v-for="(item, index) in props.row.PlanTimeList"
                  :key="index"
                >
                  {{ item.StartTime }}-{{ item.EndTime }}
                </div>
              </q-td>
            </template>
            <template v-slot:body-cell-optioned="props">
              <q-td :props="props">
                <span>
                  <q-btn
                    flat
                    size="xs"
                    icon="iconfont icon-View"
                    color="accent"
                    style="font-weight: 400"
                    label="查看"
                  />
                  <q-popup-proxy>
                    <q-banner>
                      <table
                        class="classFlictTable"
                        style="border-collapse: collapse"
                      >
                        <tr>
                          <th>班级</th>
                          <th>日期</th>
                          <th>老师</th>
                          <th>教室</th>
                          <th>上课时段</th>
                        </tr>
                        <tr
                          v-for="(subItem, subIndex) in props.row
                            .PlanRepeatList"
                          :key="subIndex"
                        >
                          <td style="width: 180px; text-align: left">
                            {{ subItem.ClassName }}
                          </td>
                          <td>{{ subItem.ClassDate }}</td>
                          <td>
                            <span
                              :class="{
                                resStyle:
                                  props.row.TeacherId == subItem.TeacherId,
                              }"
                            >
                              {{ subItem.TeacherName }}</span
                            >
                          </td>
                          <td>
                            <span
                              :class="{
                                resStyle:
                                  props.row.ClassRoomId == subItem.ClassRoomId,
                              }"
                              >{{ subItem.RoomName }}</span
                            >
                          </td>
                          <td>
                            <template
                              v-if="
                                subItem.PlanTimeList &&
                                subItem.PlanTimeList.length > 0
                              "
                            >
                              <div
                                v-for="(cItem, cIndex) in subItem.PlanTimeList"
                                :key="cIndex"
                              >
                                {{ cItem.StartTime }}-{{ cItem.EndTime }}
                              </div>
                            </template>
                          </td>
                        </tr>
                      </table>
                    </q-banner>
                  </q-popup-proxy>
                </span>
              </q-td>
            </template>
          </q-table>
        </q-scroll-area>
      </q-card-section>

      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn
          label="取消"
          flat
          color="grey-10"
          style="font-weight: 400 !important"
          @click="closeSaveForm"
        />
        <q-btn
          label="立即提交"
          color="accent q-px-md"
          style="font-weight: 400 !important"
          :loading="saveLoading"
          @click="save"
        />
      </q-card-actions>
      <div
        v-if="picIsShow"
        class="_show_img_box"
        @click="(picIsShow = false), (picObj = [])"
      >
        <div
          style="
            position: absolute;
            max-width: 800px;
            height: auto;
            left: 50%;
            top: 50%;
            margin-left: -400px;
            margin-top: -300px;
          "
        >
          <el-image
            style="width: 100%; height: 100%"
            fit="cover"
            v-for="(item, index) in picObj"
            :key="index"
            :src="item"
            :preview-src-list="picObj"
          >
          </el-image>
        </div>
      </div>
    </q-card>
  </q-dialog>
</template>

<script>
import {
  getClassDropDownList,
  getSchoolDropdown,
  queryClassRoomPage,
  getTeacherDropDownList,
  SetChangeClassPlan,
} from "../../api/school/index";
import { queryCourseDropdownList } from "../../api/course/index";
import { UploadSelfFile } from "../../api/common/common";
import Lockr from "lockr";
export default {
  props: {
    setingObj: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      TeacherList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      pages: {
        rowsPerPage: 100000,
      },
      persistent: true,
      saveLoading: false,
      contentStyle: {},
      contentActiveStyle: {},
      pickers: {
        start: "09:00",
        step: "00:15",
        end: "22:30",
      },
      thumbStyle: {
        right: "2px",
        borderRadius: "5px",
        backgroundColor: "#027be3",
        width: "5px",
        opacity: 0.75,
      },
      msg: {
        Id: 0,
        ClassId: 0,
        SchoolId: -1,
        CouseId: 0,
        ChangeType: 1,
        MoveType: "1",
        ClassRoomId: 0,
        TeacherId: 0,
        OldChangePlanItemList: [],
        NewChangePlanItemList: [],
        AllChangePlanItem: {
          OpenTimeStr: "", //开班时间
          ClassStyle: 1, //排课方式(1-周，2-月，3-固定日期，4-约课)
          ClassHours: 0, //
          ClassHourMinute: 0,
          WeekDayList: [], //周几
          TeacherId: 0,
          ClassRoomId: 0,
          DefaultTimeList: [],
        },
        TakeEffectTime: "", //生效日期
        Remarks: "", //备注
        ReceiptFileList: [], //附件
      },
      selected: [],
      classList: [],
      schoolList: [],
      courseList: [],
      queryClass: {
        CourseId: 0,
        IsAddDefault: 1,
        SchoolId: -1,
        Teacher_Id: 0,
        MoreStatus: "1,2",
        IsQuerySurplusPlan: 1,
      },
      currentClass: [],
      columns2: [
        {
          name: "RoomName",
          label: "教室名称",
          field: "RoomName",
          align: "left",
        },
        {
          name: "ClassDate",
          label: "上课日期",
          field: "ClassDate",
          align: "left",
        },
        {
          name: "TeacherName",
          label: "老师",
          field: "TeacherName",
          align: "left",
        },
        {
          name: "TimeList",
          label: "上课时间",
          field: "TimeList",
          align: "left",
        },
      ],
      columns: [
        {
          name: "RoomName",
          label: "教室名称",
          field: "RoomName",
          align: "left",
        },
        {
          name: "ClassDate",
          label: "上课日期",
          field: "ClassDate",
          align: "left",
        },
        {
          name: "TeacherName",
          label: "老师",
          field: "TeacherName",
          align: "left",
        },
        {
          name: "TimeList",
          label: "上课时间",
          field: "TimeList",
          align: "left",
        },
        {
          name: "TargetClassDate",
          label: "目标日期",
          field: "TargetClassDate",
          align: "left",
        },
        {
          name: "TargetTimeList",
          label: "目标时间",
          field: "TargetTimeList",
          align: "left",
        },
      ],
      changeType: [
        {
          Id: 1,
          Name: "课程时间",
        },
        {
          Id: 2,
          Name: "老师",
        },
        {
          Id: 3,
          Name: "教室",
        },
        {
          Id: 4,
          Name: "取消上课",
        },
      ],
      classSetList: [
        {
          Name: "按周排课",
          Id: 1,
        },
        {
          Name: "按月排课",
          Id: 2,
        },
        {
          Name: "固定日期",
          Id: 3,
        },
      ],
      roomList: [],
      //选中日期/星期
      checkedDays: [],
      //周几
      weekList: [
        {
          label: "周一",
          value: "1",
          icon: 1,
        },
        {
          label: "周二",
          value: "2",
          icon: 2,
        },
        {
          label: "周三",
          value: "3",
          icon: 3,
        },
        {
          label: "周四",
          value: "4",
          icon: 4,
        },
        {
          label: "周五",
          value: "5",
          icon: 5,
        },
        {
          label: "周六",
          value: "6",
          icon: 6,
        },
        {
          label: "周日",
          value: "7",
          icon: 7,
        },
      ],
      dayList: [], //日期数组1-31
      //默认上课时间数组
      DefaultPlanTimeList: [],
      ClassHourMinuteArray: [
        {
          Id: 45,
          Name: 45,
        },
        {
          Id: 60,
          Name: 60,
        },
      ],
      classSetMsg: {
        OpenTime: "", //开班时间
        ClassStyle: 1, //排课方式(1-周，2-月，3-固定日期，4-约课)
        ClassHours: "",
        ClassHourMinute: "",
      },
      saveMsg: [],
      picIsShow: false,
      picObj: [],
      initialIndex: 0,
      columns3: [
        {
          name: "ClassDate",
          label: "日期",
          field: "ClassDate",
          align: "left",
        },
        {
          name: "TeacherName",
          label: "老师",
          field: "TeacherName",
          align: "left",
        },
        {
          name: "RoomName",
          label: "教室",
          field: "RoomName",
          align: "left",
        },
        {
          name: "PlanTimeList",
          label: "上课时段",
          field: "PlanTimeList",
          align: "left",
        },
        {
          name: "optioned",
          label: "操作",
          field: "CourseId",
        },
      ],
      conflictData: [],
    };
  },
  created() {
    if (this.setingObj) {
      if (this.setingObj.CouseId) {
        this.msg.CouseId = this.setingObj.CouseId;
        this.queryClass.CourseId = this.setingObj.CouseId;
      }
      if (this.setingObj.ClassId) {
        this.msg.ClassId = this.setingObj.ClassId;
      }
      if (this.setingObj.School_Id) {
        this.msg.SchoolId = this.setingObj.School_Id;
      }
    }
    this.getSchool();
    this.getCourseList();
  },
  mounted() {
    let u = Lockr.get("loginUserInfo");
    if (this.setingObj && this.setingObj.Teacher_Id) {
      this.queryClass.Teacher_Id = this.setingObj.Teacher_Id;
    } else if (u) {
      this.queryClass.Teacher_Id = u.AccountId;
    }
    this.getClass(0);
    this.getClassRoomPage();
    this.GetTeacherList();
    this.initDayList();
  },
  methods: {
    GetTeacherList() {
      getTeacherDropDownList({}).then((res) => {
        if (res.Code == 1) {
          this.TeacherList = res.Data;
          var obj = {
            TeacherName: "请选择",
            TId: 0,
          };
          this.TeacherList.unshift(obj);
        }
      });
    },
    getClassRoomPage() {
      queryClassRoomPage({
        pageIndex: 1,
        pageSize: 10000,
        RoomName: "",
        School_Id: 0, //校区编号
        Status: "-1", //状态
      }).then((res) => {
        this.roomList = res.Data.PageData;
        var obj = {
          RoomName: "请选择",
          RoomId: 0,
          SchoolName: "",
        };
        this.roomList.push(obj);
      });
    },
    closeSaveForm() {
      this.$emit("close");
      this.persistent = false;
    },
    optionsFn(date) {
      var myDate = new Date();
      let month = myDate.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let day = myDate.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      var toDay = myDate.getFullYear() + "/" + month + "/" + day;
      return date >= toDay;
    },
    //保存修改
    save() {
      //变更类型课程时间  变更范围单个或多个
      if (this.msg.ChangeType == 1 && this.msg.MoveType == 1) {
        if (this.selected.length > 0) {
          this.msg.OldChangePlanItemList = [];
          this.msg.NewChangePlanItemList = [];
          let MySelect = JSON.parse(JSON.stringify(this.selected));
          if (MySelect && MySelect.length > 0) {
            MySelect.forEach((x) => {
              this.msg.OldChangePlanItemList.push(x);
              this.msg.NewChangePlanItemList.push(x.NewPlan);
            });
          }
          if (
            this.msg.OldChangePlanItemList &&
            this.msg.OldChangePlanItemList.length > 0
          ) {
            this.msg.OldChangePlanItemList.forEach((x) => {
              delete x.NewPlan;
              x.PlanTimeList = x.TimeList;
              delete x.TimeList;
            });
          }
          if (
            this.msg.NewChangePlanItemList &&
            this.msg.NewChangePlanItemList.length > 0
          ) {
            this.msg.NewChangePlanItemList.forEach((x) => {
              x.PlanTimeList = x.TimeList;
              delete x.TimeList;
            });
          }
          this.msg.AllChangePlanItem = {};
        } else {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择变更数据`,
          });
          return;
        }
      }
      //变更类型课程时间  变更范围 全局
      if (this.msg.ChangeType == 1 && this.msg.MoveType == 2) {
        this.msg.OldChangePlanItemList = [];
        this.msg.NewChangePlanItemList = [];
        this.msg.AllChangePlanItem.WeekDayList = this.checkedDays;
        this.msg.AllChangePlanItem.DefaultTimeList = this.DefaultPlanTimeList;
      }
      //变更类型老师 变更范围单个或多个
      if (this.msg.ChangeType == 2 && this.msg.MoveType == 1) {
        if (this.selected.length > 0) {
          if (this.msg.TeacherId == 0) {
            this.$q.notify({
              type: "negative",
              position: "top",
              message: `请选择目标老师`,
            });
            return;
          }
          this.msg.OldChangePlanItemList = [];
          this.msg.NewChangePlanItemList = [];
          let Array1 = JSON.parse(JSON.stringify(this.selected));
          Array1.forEach((x) => {
            delete x.NewPlan;
            x.PlanTimeList = x.TimeList;
            delete x.TimeList;
            this.msg.OldChangePlanItemList.push(x);
          });
          let Array2 = JSON.parse(JSON.stringify(this.selected));
          Array2.forEach((x) => {
            x.NewPlan.PlanTimeList = x.NewPlan.TimeList;
            delete x.NewPlan.TimeList;
            x.NewPlan.TeacherId = this.msg.TeacherId;
            this.msg.NewChangePlanItemList.push(x.NewPlan);
          });
          this.msg.AllChangePlanItem = {};
        } else {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择变更数据`,
          });
          return;
        }
      }
      //变更类型老师 变更范围 单全局
      if (this.msg.ChangeType == 2 && this.msg.MoveType == 2) {
        this.msg.OldChangePlanItemList = [];
        this.msg.NewChangePlanItemList = [];
        this.msg.AllChangePlanItem.TeacherId = this.msg.TeacherId;
      }
      //变更类型教室 变更范围单个或多个
      if (this.msg.ChangeType == 3 && this.msg.MoveType == 1) {
        if (this.selected.length > 0) {
          if (this.msg.ClassRoomId == 0) {
            this.$q.notify({
              type: "negative",
              position: "top",
              message: `请选择目标教室`,
            });
            return;
          }
          this.msg.OldChangePlanItemList = [];
          this.msg.NewChangePlanItemList = [];
          let Array1 = JSON.parse(JSON.stringify(this.selected));
          Array1.forEach((x) => {
            delete x.NewPlan;
            x.PlanTimeList = x.TimeList;
            delete x.TimeList;
            this.msg.OldChangePlanItemList.push(x);
          });
          let Array2 = JSON.parse(JSON.stringify(this.selected));
          Array2.forEach((x) => {
            x.NewPlan.PlanTimeList = x.NewPlan.TimeList;
            delete x.NewPlan.TimeList;
            x.NewPlan.ClassRoomId = this.msg.ClassRoomId;
            this.msg.NewChangePlanItemList.push(x.NewPlan);
          });
          this.msg.AllChangePlanItem = {};
        } else {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择变更数据`,
          });
          return;
        }
      }
      //变更类型教室 变更范围全局
      if (this.msg.ChangeType == 3 && this.msg.MoveType == 2) {
        this.msg.OldChangePlanItemList = [];
        this.msg.NewChangePlanItemList = [];
        this.msg.AllChangePlanItem.ClassRoomId = this.msg.ClassRoomId;
      }
      //变更类型 取消上课 变更范围单个或多个
      if (this.msg.ChangeType == 4 && this.msg.MoveType == 1) {
        if (this.selected.length > 0) {
          this.msg.OldChangePlanItemList = [];
          this.msg.NewChangePlanItemList = [];
          let Array1 = JSON.parse(JSON.stringify(this.selected));
          Array1.forEach((x) => {
            delete x.NewPlan;
            x.PlanTimeList = x.TimeList;
            delete x.TimeList;
            this.msg.OldChangePlanItemList.push(x);
          });
          this.msg.AllChangePlanItem = {};
        } else {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择变更数据`,
          });
          return;
        }
      }
      //变更类型 取消上课 变更范围 全局
      if (this.msg.ChangeType == 4 && this.msg.MoveType == 2) {
        this.msg.OldChangePlanItemList = [];
        this.msg.NewChangePlanItemList = [];
        this.msg.AllChangePlanItem = {};
      }
      this.$q
        .dialog({
          title: "提示信息",
          message: "调课行为将影响您的备课记录，请慎重！",
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        })
        .onOk(() => {
          SetChangeClassPlan(this.msg)
            .then((res) => {
              if (res.Code == 1) {
                this.closeSaveForm();
                this.$emit("success");
                this.$q.notify({
                  icon: "iconfont icon-chenggong",
                  color: "accent",
                  timeout: 2000,
                  message: res.Message,
                  position: "top",
                });
              }
            })
            .catch((e) => {
              if (e.Code == 0) {
                //注释 不要删
                this.conflictData = e.Data;
              }
            });
        })
        .onCancel(() => {});
    },
    proteinRangeValidation(val) {
      let newList = [];
      let errorMsg = "";
      val.forEach((x) => {
        if (
          x.StartTime &&
          x.EndTime &&
          x.TimeHour &&
          x.StartTime != "" &&
          x.EndTime != "" &&
          x.TimeHour != "0.0"
        ) {
          newList.push({
            StartTime: x.StartTime,
            EndTime: x.EndTime,
            TimeHour: x.TimeHour,
          });
        } else {
          errorMsg = "存在不完善的数据，请完善数据信息";
        }
      });
      if (errorMsg != "") {
        this.$q.notify({
          icon: "iconfont icon-guanbi1",
          color: "negative",
          timeout: 2000,
          message: errorMsg,
          position: "top",
        });
      }
      return errorMsg == "";
    },
    removeTime(plan, i) {
      plan.TimeList.splice(i, 1);
    },
    addTime(plan) {
      let obj = {
        ClassTimeId: 0,
        EndTime: "",
        StartTime: "",
        TimeHour: 0,
      };
      plan.TimeList.push(obj);
    },
    changeClass(val) {
      this.currentClass = this.classList.find((x) => {
        return x.ClassId == val;
      }).PlanList;
    },
    changeTypeResult(val) {
      this.selected = [];
    },
    changeSchool(val) {
      this.queryClass.SchoolId = val;
      this.getClass(1);
    },
    changeCourse(val) {
      this.queryClass.CourseId = val;
      this.getClass(1);
    },
    getClass(isClear) {
      getClassDropDownList(this.queryClass).then((res) => {
        this.classList = [];
        if (isClear == 1) {
          this.msg.ClassId = 0;
        }
        if (res.Code == 1) {
          res.Data.forEach((x) => {
            x.PlanList.forEach((y) => {
              let newPlan = JSON.parse(JSON.stringify(y));
              y.NewPlan = newPlan;
            });
          });
          this.classList = res.Data;
          var obj = {
            ClassName: "请选择",
            ClassId: 0,
          };
          this.classList.unshift(obj);
          if (this.msg.ClassId > 0 && isClear == 0) {
            this.currentClass = this.classList.find((x) => {
              return x.ClassId == this.msg.ClassId;
            }).PlanList;
          }
        }
      });
    },
    getSchool() {
      getSchoolDropdown({}).then((res) => {
        if (res.Code == 1) {
          this.schoolList = res.Data;
          var obj = {
            SName: "请选择",
            SId: -1,
          };
          this.schoolList.unshift(obj);
        }
      });
    },
    getCourseList() {
      queryCourseDropdownList({
        IsQPrice: 1,
      }).then((res) => {
        if (res.Code == 1) {
          this.courseList = res.Data;
          var obj = {
            CourseName: "请选择",
            CourseId: 0,
          };
          this.courseList.unshift(obj);
        }
      });
    },
    //下拉选择改变
    changeClassStyle(style) {
      this.checkedDays = [];
    },
    //初始化日期-天
    initDayList() {
      this.dayList = [];
      for (var i = 1; i <= 31; i++) {
        this.dayList.push({
          label: i,
          value: i,
        });
      }
    },
    //添加学习时间
    addPlan() {
      var planObj = {
        DateList: [],
        TimeList: [
          {
            StartTime: "",
            EndTime: "",
            TimeHour: "",
          },
        ],
      };
      this.DefaultPlanTimeList.push(planObj);
    },
    //删除学习时间
    deletePlan(index) {
      this.$q
        .dialog({
          title: "提示信息",
          message: "是否要删除",
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        })
        .onOk(() => {
          this.DefaultPlanTimeList.splice(index, 1);
        })
        .onCancel(() => {});
    },
    //添加学习时段
    addPlanTime(item) {
      var obj = {
        StartTime: "",
        EndTime: "",
      };
      item.TimeList.push(obj);
    },
    //删除学习时段
    deletePlanTime(item, index) {
      this.$q
        .dialog({
          title: "提示信息",
          message: "是否要删除此学习时间段",
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        })
        .onOk(() => {
          item.TimeList.splice(index, 1);
        })
        .onCancel(() => {});
    },
    showUpLoadFile(i) {
      // 预览上传文件
      if (i.Type == 3) {
        this.picObj.push(i.Url);
        // this.imgList.push(i.Url)
        this.picIsShow = true;
      } else {
        if (
          i.Content.substring(
            i.Content.lastIndexOf(".") + 1,
            i.Content.length
          ).toUpperCase() == "PDF" ||
          i.Content.substring(
            i.Content.lastIndexOf(".") + 1,
            i.Content.length
          ).toUpperCase() == "TXT"
        ) {
          this.previewPDF(i.Url);
        } else {
          window.open(
            "https://view.officeapps.live.com/op/view.aspx?src=" + i.Url
          );
        }
      }
    },
    deleteUploadFile(i) {
      // 删除上传文件
      this.saveMsg.splice(i, 1);
      this.msg.ReceiptFileList.splice(i, 1);
    },
    uploadFileBtn(file) {
      //上传
      if (file.file.size > 1024 * 1024 * 5) {
        this.$message.warning("文件大小不能超过5M");
        return;
      }
      //  1 文档  2 数据 3 图片
      let typeArr = [
        {
          stringArr: "GIF|JPG|JPEG|PNG|BMP|WEBP",
          type: 3,
        },
        {
          stringArr: "DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF|TXT",
          type: 1,
        },
        {
          stringArr: "ZIP|RAR|7Z|TAR",
          type: 4,
        },
        {
          stringArr: "MP4|3GP|AVI|MOV|WMV|RMVB|MKV|M4V|FLV",
          type: 5,
        },
      ];
      let ft = file.file.name
        .substring(file.file.name.lastIndexOf(".") + 1, file.file.name.length)
        .toUpperCase();
      let fileTypeNumber = 2;
      typeArr.forEach((x) => {
        if (x.stringArr.indexOf(ft) != "-1") {
          fileTypeNumber = x.type;
        }
      });
      // let newArr = [];
      // newArr.push(file.file);
      this.$message.info(this.$t("tips.shangchuanzhong"));
      UploadSelfFile(
        "Temporary",
        file.file,
        (x) => {
          if (x.Code == 1) {
            this.saveMsg.push({
              Content: x.FileUrl,
              ID: 0,
              Type: fileTypeNumber,
              Url: x.FileUrl,
            });
            this.msg.ReceiptFileList.push(x.FileUrl);
            this.$message.success(this.$t("tips.scchenggong"));
          }
        },
        1
      );
    },
  },
};
</script>

<style>
</style>
