<style>
  .classFlictTable {
    width: 500px;
    text-align: center;
  }

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

  .classFlictTable tr th {
    height: 40px;
    background-color: rgb(238, 238, 239);
  }

  .classConflitDialog {
    width: 370px;
  }
  .resStyle{
    color:red;
  }
</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale">
    <q-card style="width: 800px;max-width:900px;" class="CLM-Form">
      <q-card-section>
        <div class="text-h6">上课计划冲突调整 【{{showMsg.ClassName}}（{{showMsg.ClassNo}}）】</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <q-table :pagination="showMsg" :loading="loading" no-data-label="暂无相关数据" selection="multiple" flat
          :selected.sync="selectedAll" class="sticky-column-table sticky-header-column-table" separator="none"
          style="max-height: 400px" :data="dataList" :columns="columns" row-key="ClassPlanId" hide-bottom>
          <template v-slot:top="props">
            <div class="text-caption q-my-lg q-px-md text-grey-6 col">
              变更内容 注意：需要对变更的内容进行打钩
            </div>
            <q-space />
            <div class="page-option">
              <q-btn color="accent" size="sm" class="q-mr-md" @click="rePaiAll" label="全部重排" />
              <q-select filled stack-label style="display:inline-block;width:150px;" option-value="Id"
                option-label="Name" v-model="postMsg.ChangeType" :options="changeTypeList" label="变更类型" :dense="false"
                class="col-6" emit-value map-options />
            </div>
          </template>
          <template v-slot:body-cell-TeacherName="props">
            <q-td>
              {{getTeacherName(props.row.TeacherId)}}
            </q-td>
          </template>
          <template v-slot:body-cell-RoomName="props">
            <q-td>
              {{getClassRoomName(props.row.ClassRoomId)}}
            </q-td>
          </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:bottom>
          </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-btn flat size="xs" icon="edit" color="accent" style="font-weight:400;" label="编辑" @click="getInfo()">
                <q-popup-proxy>
                  <q-banner v-if="isShowEdit">
                    <div class="classConflitDialog">
                      <div style="margin:10px 0 15px 0;">{{props.row.ClassDate}}课程安排</div>
                      <div class="row wrap">
                        <div class="col-6">
                          <q-select filled stack-label option-value="TId" option-label="TeacherName"
                            v-model="props.row.TeacherId" ref="Teacher_Id" :options="TeacherList" label="关联教师"
                            :dense="false" class="col-6 q-pb-lg q-pr-lg" emit-value map-options />
                        </div>
                        <div class="col-6">
                          <q-select filled stack-label option-value="RoomId" option-label="RoomName"
                            v-model="props.row.ClassRoomId" ref="ClassRoomId" :options="ClassRoomList" label="关联教室"
                            :dense="false" class="col-6 q-pb-lg" emit-value map-options />
                        </div>
                      </div>
                      <q-input filled v-model="props.row.ClassDate" class="col-6 q-pb-lg" mask="date" label="上课时间">
                        <template v-slot:append>
                          <q-icon name="event" class="cursor-pointer">
                            <q-popup-proxy ref="qDateProxy3" transition-show="scale" transition-hide="scale">
                              <q-date v-model="props.row.ClassDate" @input=' () => $refs.qDateProxy3[0].hide()' />
                            </q-popup-proxy>
                          </q-icon>
                        </template>
                      </q-input>
                      <div style="display:flex;justify-content:flex-end;margin-bottom:20px;">
                        <q-btn @click="addStepOne(props.row)" size="10px" round color="primary"
                          icon="iconfont icon-img_haha" />
                      </div>
                      <div class="row wrap" style="position:relative;"
                        v-for="(subItem,subIndex) in props.row.PlanTimeList" :key="subIndex">
                        <div class="col-4">
                          <q-input filled v-model="subItem.StartTime" class="col-6 q-pr-lg q-pb-lg" 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="subItem.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>
                        </div>
                        <div class="col-4">
                          <q-input filled v-model="subItem.EndTime" class="col-6 q-pr-lg q-pb-lg" 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="subItem.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>
                        </div>
                        <div class="col-4">
                          <q-input filled stack-label maxlength="10" :dense="false" v-model="subItem.TimeHour"
                            ref="TimeHour" class="col-4 q-pr-lg q-pb-lg" label="消耗课时"
                            :rules="[val => !!val || '请填写消耗课时']" @keyup.native="checkPrice(subItem,'TimeHour')" />
                        </div>
                        <div class="delBtnStyle">
                          <i @click="delStepOne(props.row,subIndex)" class="iconfont icon-guanbi"></i>
                        </div>
                      </div>
                      <q-card-actions align="right" class="bg-white">
                        <q-btn label="确认调整" color="accent q-px-md" style="font-weight:400 !important"
                          @click="isShowEdit=false" />
                      </q-card-actions>
                    </div>
                  </q-banner>
                </q-popup-proxy>
              </q-btn>
            </q-td>
          </template>
        </q-table>
        <div class="row wrap" style="margin-top:20px;">
          <div class="col-4">
            <template v-if="postMsg.ChangeType==1">
              <q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="postMsg.TeacherId"
                ref="Teacher_Id" :options="TeacherList" label="关联教师" :dense="false" class="col-6 q-pb-lg" emit-value
                map-options />
            </template>
            <template v-if="postMsg.ChangeType==2">
              <q-select filled stack-label option-value="RoomId" option-label="RoomName" v-model="postMsg.ClassRoomId"
                ref="ClassRoomId" :options="ClassRoomList" label="关联教室" :dense="false" class="col-6 q-pb-lg" emit-value
                map-options />
            </template>
          </div>
          <template v-if="postMsg.ChangeType==3">
            <div class="col-12">
              <div style="display:flex;justify-content:flex-end;margin-bottom:20px;">
                <q-btn @click="addStepOne(postMsg)" size="10px" round color="primary" icon="iconfont icon-img_haha" />
              </div>
              <div class="row wrap" style="position:relative;" v-for="(subItem,subIndex) in postMsg.PlanTimeList"
                :key="subIndex">
                <div class="col-4">
                  <q-input filled v-model="subItem.StartTime" class="col-6 q-pr-lg q-pb-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="subItem.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>
                </div>
                <div class="col-4">
                  <q-input filled v-model="subItem.EndTime" class="col-6 q-pr-lg q-pb-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="subItem.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>
                </div>
                <div class="col-4">
                  <q-input filled stack-label maxlength="10" :dense="false" v-model="subItem.TimeHour" ref="TimeHour"
                    class="col-4 q-pr-lg q-pb-lg" label="消耗课时" :rules="[val => !!val || '请填写消耗课时']"
                    @keyup.native="checkPrice(subItem,'TimeHour')" />
                </div>
                <div class="delBtnStyle">
                  <i @click="delStepOne(postMsg,subIndex)" class="iconfont icon-guanbi"></i>
                </div>
              </div>
            </div>
          </template>
        </div>
      </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="IgnoreClass" />
        <q-btn label="提交调整" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="saveClass">
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    GetRepeatClassPlan,
    getTeacherDropDownList,
    queryClassRoomList,
    UpdateClassPlanSingle,
    BatchUpdateClassPlan,
    IgnoreClassPlan
  } from "../../api/school/index";
  export default {
    props: {
      ClassId: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        changeTypeList: [{
            Id: 0,
            Name: "课程",
          },
          {
            Id: 1,
            Name: "老师",
          }, {
            Id: 2,
            Name: "教室",
          },
          {
            Id: 3,
            Name: "时段",
          }
        ],
        columns: [{
            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"
          }
        ],
        dataList: [],
        loading: true,
        selectedAll: [], //全选数据
        showMsg: {
          ClassName: "",
          ClassNo: "",
          rowsPerPage: 1000,
        },
        isShowEdit: false,
        TeacherList: [], //老师下拉数据
        ClassRoomList: [], //教室下拉数据
        saveLoading: false,
        isShowClassForm: false,
        saveClassLoading: false,
        //提交参数
        postMsg: {
          ClassId: 0,
          ChangeType: 0, //调动类型(1-老师，2-教室，3-时段)
          ClassPlanIdList: [], //选中的ClassPlanId数组
          PlanList: [],
          ClassRoomId: "", //全局调整--教室编号
          TeacherId: "", //全局调整--教师编号
          PlanTimeList: [{
            StartTime: "", //开始时间
            EndTime: "", //结束时间
            TimeHour: 0, //消耗课时
          }], //全局调整--上课时段
        },
      }
    },
    created() {
      this.GetTeacherList();
      this.getClassRoomList();
    },
    mounted() {
      if (this.ClassId) {
        this.postMsg.ClassId = this.ClassId;
      }
      this.getList();
    },
    methods: {
      //点击全部重排
      rePaiAll(){
        this.$emit('getzk');
      },
      //点击新增上课时间段
      addStepOne(item) {
        var obj = {
          StartTime: "", //开始时间
          EndTime: "", //结束时间
          TimeHour: 0, //消耗课时
        }
        item.PlanTimeList.push(obj);
      },
      //删除上课时间段
      delStepOne(item, index) {
        item.PlanTimeList.splice(index, 1);
      },
      //获取老师名称
      getTeacherName(teacherId) {
        let obj = {};
        obj = this.TeacherList.find(item => {
          return item.TId === teacherId;
        });
        var tName = "";
        if (obj) {
          tName = obj.TeacherName;
        }
        return tName;
      },
      //获取教室名称
      getClassRoomName(ClassRoomId) {
        let obj = {};
        obj = this.ClassRoomList.find(item => {
          return item.RoomId === ClassRoomId;
        });
        var tName = "";
        if (obj) {
          tName = obj.RoomName;
        }
        return tName;
      },
      //忽略上课调整
      IgnoreClass() {
         this.$q.dialog({
          title: '提示信息',
          message: "这样会造成上课冲突，本次选择将会记录到班级日志，你确定需要这样做吗？",
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
         IgnoreClassPlan({
          ClassId: this.ClassId
        }).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.$emit('success');
            this.$emit('close');
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
          }
        })
        }).onCancel(() => {});
      },
      //获取冲突的数据列表
      getList() {
        this.loading = true;
        this.dataList = [];
        this.selectedAll = [];
        GetRepeatClassPlan({
          ClassId: this.ClassId
        }).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data.RepeatList;
            this.showMsg.ClassNo = res.Data.ClassNo;
            this.showMsg.ClassName = res.Data.ClassName;
          }
        })
      },
      //编辑修改
      getInfo() {
        this.isShowEdit = true;
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
          }
        })
      },
      //获取教室下拉
      getClassRoomList() {
        queryClassRoomList({}).then(res => {
          if (res.Code == 1) {
            this.ClassRoomList = res.Data;
          }
        })
      },

      //刷新页面
      refreshPage() {
        this.isShowClassForm = false;
        this.getList();
      },

      //保存信息
      saveClass() {
        if (this.selectedAll.length == 0) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请勾选需要修改的数据！`
          })
          return
        }
        this.postMsg.PlanList = [];
        this.postMsg.ClassPlanIdList = [];
        if (this.postMsg.ChangeType == 0) {
          this.selectedAll.forEach(x => {
            this.postMsg.PlanList.push(x);
          })
        } else {
          this.selectedAll.forEach(x => {
            this.postMsg.ClassPlanIdList.push(x.ClassPlanId);
          })
        }
        if (this.postMsg.ChangeType == 0) {
          this.saveLoading = true;
          UpdateClassPlanSingle({
            PlanList: this.postMsg.PlanList
          }).then(res => {
            this.saveLoading = false
            if (res.Code == 1) {
              this.isShowEdit = false;
              this.getList();
              if (res.Data) {
                this.$q.notify({
                  type: 'negative',
                  position: "top",
                  message: `还存在冲突数据请继续修改！`
                })
              } else {
                this.$emit('success');
                this.$emit('close');
              }
            }
          }).catch(() => {
            this.saveLoading = false
          })
        } else {
          if (this.postMsg.ChangeType == 1 && this.postMsg.TeacherId == 0) {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请选择老师`
            })
            return
          }
          if (this.postMsg.ChangeType == 2 && this.postMsg.ClassRoomId == 0) {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请选择教室`
            })
            return
          }
          if (this.postMsg.ChangeType == 3) {
            for (let i = 0; i < this.postMsg.PlanTimeList.length; i++) {
              if (this.postMsg.PlanTimeList[i].StartTime == '') {
                this.$q.notify({
                  type: 'negative',
                  position: "top",
                  message: `请选择第${i+1}节课开始时间`
                })
                return
              }
              if (this.postMsg.PlanTimeList[i].EndTime == '') {
                this.$q.notify({
                  type: 'negative',
                  position: "top",
                  message: `请选择第${i+1}节课结束时间`
                })
                return
              }
            }
          }
          this.postMsg.ClassId = this.ClassId;
          this.saveLoading=true;
          BatchUpdateClassPlan(this.postMsg).then(res => {
            this.saveLoading=false;
            if (res.Code === 1) {
              this.getList();
              if (res.Data) {
                this.$q.notify({
                  type: 'negative',
                  position: "top",
                  message: `还存在冲突数据请继续修改！`
                })
              } else {
                this.$q.notify({
                  icon: 'iconfont icon-chenggong',
                  color: 'accent',
                  timeout: 2000,
                  message: res.Message,
                  position: 'top'
                })
                this.$emit('success');
                this.$emit('close');
              }
            } else {
              this.Error(res.Message);
            }
          })
        }
      },
    }
  }

</script>
