<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" :key="index">
                      {{ 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" :key="index">
                      {{ 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" :key="index">
                        <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" :key="sIndex">
                    <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" :key="fIndex">
                    <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" :key="fIndex+100000">
                    <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" :key="fIndex+200000">
                    <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" :key="fIndex+300000">
                    <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" :key="fIndex+400000">
                    <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.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;
          }
        });
        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>