<style>
  .OtherCourseNum {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border: 1px solid #2961FE;
    border-radius: 50%;
    cursor: pointer;
    color: #2961FE;
  }

  .OCourseTable {
    width: 400px;
    text-align: center;
  }

  .OCourseTable tr td {
    height: 40px;
  }

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

  .redStuStyle {
    color: red;
  }

  .blaStuStyle {
    color: #000;
  }

  .classProgress {
    color: var(--q-color-primary);
  }

  .classList .q-table__bottom {
    height: 0;
    padding: 0;
  }
</style>
<template>
  <div class="page-content classList">
    <q-table :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat :data="data" :columns="columns"
      class="sticky-column-table sticky-right-column-table " separator="none" row-key="name">
      <template v-slot:top>
        <div class="col-2 q-table__title">班级信息</div>
        <q-space />
        <div class="page-option">
          <q-btn color="accent" v-if="AuthorityObj.isShowAddBtn" size="sm" class="q-mr-md" icon="add" label="新增班级"
            @click="EditCourse(null)" />
        </div>
      </template>
      <template v-slot:body-cell-CourseId="props">
        <q-td auto-width :props="props">
          <span style="color:blue;cursor:pointer;" @click="goChapter(props.row.CouseId)">详情</span>
        </q-td>
      </template>
      <template v-slot:body-cell-ClassName="props">
        <q-td auto-width :props="props">
          <div style="display: flex;align-items: center;">
            <q-avatar size="md" style="background:#d4dfff;color:#2961FE;font-weight:bold;" v-if="props.row.ClassName">
              {{GetFirst(props.row.ClassName)}}</q-avatar>
            <div>
              <span style="color:#2961FE;margin-left:10px;cursor:pointer;" @click="getClassInfo(props.row)"
                title="点击查看详情">{{props.row.ClassName}}</span>
              <div style="margin-left: 10px;">{{props.row.ClassNo}}</div>
            </div>
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-OtherCourseName="props">
        <q-td auto-width :props="props">
          <template v-if="props.row.OtherCourseList">
            <template v-if="props.row.OtherCourseList.length==1">
              {{props.row.OtherCourseList[0].CourseName}}【{{props.row.OtherCourseList[0].ClassHours}}课时】
            </template>
            <template v-if="props.row.OtherCourseList.length>1">
              {{props.row.OtherCourseList[0].CourseName}}：
              <span class="OtherCourseNum">
                {{props.row.OtherCourseList.length}}
                <q-popup-proxy>
                  <q-banner>
                    <table class="OCourseTable" style="border-collapse:collapse;">
                      <tr>
                        <th>课程名称</th>
                        <th>课时数</th>
                      </tr>
                      <tr v-for="(sItem,sIndex) in props.row.OtherCourseList" style="border-bottom:1px dashed #d1d1d1;" :key="sIndex">
                        <td>{{sItem.CourseName}}</td>
                        <td>{{sItem.ClassHours}}</td>
                      </tr>
                    </table>
                  </q-banner>
                </q-popup-proxy>
              </span>
            </template>
            <template v-if="props.row.OtherCourseList.length==0">
              无
            </template>
          </template>
        </q-td>
      </template>
      <template v-slot:body-cell-TeacherName="props">
        <q-td auto-width :props="props">
          <template v-if="props.row.Teacher_Id==0">
            <span style="color:red">未指定</span>
          </template>
          <template v-else>
            <span style="color:#3FC4FF;">{{props.row.TeacherName}}</span>
          </template>
        </q-td>
      </template>
      <template v-slot:body-cell-ClassPersion="props">
        <q-td auto-width :props="props">
          <span
            :class="{'redStuStyle':props.row.ClassPersion>props.row.OrderStudentCount,'blaStuStyle':props.row.ClassPersion==props.row.OrderStudentCount}">{{props.row.ClassPersion}}-{{props.row.OrderStudentCount}}</span>
        </q-td>
      </template>
      <template v-slot:body-cell-CompleteProgress="props">
        <q-td auto-width :props="props">
          <span
            :class="{'classProgress':props.row.UsePlanNum<props.row.TotalPlanNum,'blaStuStyle':props.row.UsePlanNum==props.row.TotalPlanNum}">{{props.row.UsePlanNum}}/{{props.row.TotalPlanNum}}</span>
        </q-td>
      </template>
      <template v-slot:bottom>
      </template>
      <template v-slot:body-cell-optioned="props">
        <q-td :props="props">
          <q-btn v-if="props.row.ClassStatus==1" flat size="xs" icon="edit" color="accent" style="font-weight:400"
            label="编辑" @click="EditCourse(props.row)" />
          <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;">
            <q-list>
              <q-item clickable v-close-popup @click="gotoOrder(props.row)">
                <q-item-section>
                  <q-item-label>订单中心</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="goPayment(props.row)">
                <q-item-section>
                  <q-item-label>收支明细</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="removeClass(props.row,1)"
                v-if="props.row.Status==0&&AuthorityObj.isShowDelBtn">
                <q-item-section>
                  <q-item-label>删除</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="removeClass(props.row,0)"
                v-if="props.row.Status==1&&AuthorityObj.isShowRestoreBtn">
                <q-item-section>
                  <q-item-label>恢复</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="showOtherCourse(props.row)"
                v-if="AuthorityObj.isShowOtherCourseBtn">
                <q-item-section>
                  <q-item-label>关联其他课程</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="gomonthLessonCost(props.row)"
                v-if="AuthorityObj.isShowLessonCost">
                <q-item-section>
                  <q-item-label>月度课耗</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup v-if="props.row.ClassStatus!=3&&AuthorityObj.isShowStatusChange"
                @click.stop="getClassItem(props.row)">
                <q-item-section>
                  <q-item-label>状态变更</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click.stop="goStudent(props.row)" v-if="AuthorityObj.isShowStudentMenu">
                <q-item-section>
                  <q-item-label>未完成学员名单</q-item-label>
                </q-item-section>
              </q-item>
              <q-item v-if="props.row.ClassStatus!=3&&AuthorityObj.isShowApply" clickable v-close-popup
                @click="classApply(props.row)">
                <q-item-section>
                  <q-item-label>调课申请</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </q-td>
      </template>
    </q-table>
    <class-form v-if="isShowClassForm" :save-obj="classObjOption" @getClassFlict="getClassFlict"
      @close="closeClassSaveForm" @success="refreshPage">
    </class-form>
    <classinfo-form v-if="isShowClassInfo" :seting-obj="classObjOption" @close="closeClassSaveForm"
      @success="refreshPage">
    </classinfo-form>
    <othercourseForm v-if="IsShowOtherCourse" :seting-obj="classObjOption" @close="closeClassSaveForm"
      @success="refreshPage">
    </othercourseForm>
    <changestatusForm v-if="isShowStatusChange" :seting-obj="classObjOption" @getClassFlict="getClassFlict"
      @close="closeClassSaveForm" @success="refreshPage"></changestatusForm>
    <change-class-form v-if="isShowTiaoke" :seting-obj="classObjOption" @close="closeClassSaveForm"
      @success="refreshPage"></change-class-form>
    <classconflict-form :ClassId="ClassId" v-if="isShowConflict" @getzk="getzk" @close="closeClassConflictForm"
      @success="refreshPage"></classconflict-form>
  </div>
</template>
<script>
  //获取校区列表
  import {
    deleteClass,
  } from '../../api/school/index';
  import classForm from '../../components/course/class-form';
  import classinfoForm from '../../components/course/classinfo-form';
  import othercourseForm from '../../components/course/othercourse-form';
  import changestatusForm from '../../components/course/changestatus-form'
  import changeClassForm from '../../components/teacher/changeClassForm.vue'
  import classconflictForm from '../../components/course/classconflict-form';

  export default {
    meta: {
      title: "班级列表"
    },
    props: {
      data: {
        type: Array,
        default: null
      },
      authObj: {
        type: Object,
        default: null
      },
      loading: {
        type: Boolean,
        default: null
      }
    },
    components: {
      classForm,
      classinfoForm,
      othercourseForm,
      changestatusForm,
      changeClassForm,
      classconflictForm
    },
    data() {
      return {
        columns: [{
            name: 'ClassName',
            label: '班级名称',
            field: 'ClassName',
            align: 'left'
          },
          {
            name: 'SchoolName',
            label: '校区',
            field: 'SchoolName',
            align: 'left',
          },
          {
            name: "CourseSubjectName",
            label: "所属科目",
            field: 'CourseSubjectName',
            align: "left",
          },
          {
            name: 'CourseName',
            label: '课程',
            field: 'CourseName',
            align: 'left'
          },
          {
            name: 'OtherCourseName',
            label: '关联其他课程',
            field: 'OtherCourseName',
            align: 'left'
          },
          {
            name: 'CourseId',
            label: '课程大纲',
            field: 'CourseId',
            align: 'left'
          },
          {
            name: 'TeacherName',
            label: '带班老师',
            field: 'TeacherName',
            align: 'left'
          },
          {
            name: 'ClassPersion',
            label: '招生/报名',
            field: 'ClassPersion',
            align: 'left'
          },
          {
            name: 'OpenTime',
            label: '开班时间',
            field: 'OpenTime',
            align: 'left'
          },
          {
            name: 'FinishTimeStr',
            label: '预计结束时间',
            field: 'FinishTimeStr',
            align: 'left'
          },
          {
            name: 'CompleteProgress',
            label: '课程进度',
            field: 'CompleteProgress',
            align: 'left'
          },
          {
            name: 'ClassStatusStr',
            label: '状态',
            align: 'left',
            field: 'ClassStatusStr'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'CourseId'
          }
        ],
        //班级状态
        classStatusList: [],
        //关联校区列表
        schoolList: [],
        pageCount: 0,
        classObjOption: null,
        isShowClassForm: false, //是否显示新增修改弹窗
        isShowClassInfo: false, //是否显示课程信息
        IsShowOtherCourse: false, //是否显示其他课程
        TeacherList: [],
        isShowStatusChange: false, //是否显示修改状态弹窗
        isShowTiaoke: false, //是否显示调课申请
        pageMsg: {
          rowsPerPage: 12,
        },
        //权限显示对象
        AuthorityObj: {
          isShowAddBtn: false, //显示新增按钮
          isShowDelBtn: false, //显示删除
          isShowRestoreBtn: false, //显示恢复
          isShowOtherCourseBtn: false, //显示关联其他课程
          isShowLessonCost: false, //显示月度课耗
          isShowStatusChange: false, //显示状态变更
          isShowStudentMenu: false, //显示未完成学员名单
          isShowApply: false //显示调课申请
        },
        isShowConflict: false,
        ClassId: 0
      }
    },
    created() {
      this.initAuth();
    },
    mounted() {},
    methods: {
      //关闭、
      closeClassConflictForm() {
        this.isShowConflict = false;
      },
      //显示冲突切换弹窗
      getClassFlict(ClassId) {
        this.isShowClassForm = false;
        this.isShowStatusChange = false;
        this.isShowConflict = true;
        this.ClassId = ClassId;
      },
      //点击全部重排
      getzk() {
        this.isShowConflict = false;
        this.isShowClassForm = true;
      },

      //初始化权限信息
      initAuth() {
        if (this.authObj) {
          if (this.authObj.isShowAddBtn != null && this.authObj.isShowAddBtn) {
            this.AuthorityObj.isShowAddBtn = this.authObj.isShowAddBtn;
          }
          if (this.authObj.isShowDelBtn != null && this.authObj.isShowDelBtn) {
            this.AuthorityObj.isShowDelBtn = this.authObj.isShowDelBtn;
          }
          if (this.authObj.isShowRestoreBtn != null && this.authObj.isShowRestoreBtn) {
            this.AuthorityObj.isShowRestoreBtn = this.authObj.isShowRestoreBtn;
          }
          if (this.authObj.isShowOtherCourseBtn != null && this.authObj.isShowOtherCourseBtn) {
            this.AuthorityObj.isShowOtherCourseBtn = this.authObj.isShowOtherCourseBtn;
          }
          if (this.authObj.isShowLessonCost != null && this.authObj.isShowLessonCost) {
            this.AuthorityObj.isShowLessonCost = this.authObj.isShowLessonCost;
          }
          if (this.authObj.isShowStatusChange != null && this.authObj.isShowStatusChange) {
            this.AuthorityObj.isShowStatusChange = this.authObj.isShowStatusChange;
          }
          if (this.authObj.isShowStudentMenu != null && this.authObj.isShowStudentMenu) {
            this.AuthorityObj.isShowStudentMenu = this.authObj.isShowStudentMenu;
          }
          if (this.authObj.isShowApply != null && this.authObj.isShowApply) {
            this.AuthorityObj.isShowApply = this.authObj.isShowApply;
          }
        }
      },
      //删除班级
      removeClass(item, status) {
        let delMsg = {
          ClassId: item.ClassId,
          Status: status
        };
        var message = "是否要删除该班级？";
        if (status == 0) {
          message = "是否要恢复该班级？";
        }
        this.$q.dialog({
          title: '提示信息',
          message: message,
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          deleteClass(delMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '删除成功！',
                position: 'top'
              })
              this.refreshPage();
            } else {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: res.Message,
                position: 'top'
              })
            }
          })
        }).onCancel(() => {

        });
      },
      //当前点击的班级
      getClassItem(obj) {
        if (obj) {
          this.classObjOption = obj
        } else {
          this.classObjOption = null
        }
        this.isShowStatusChange = true;
      },
      gotoOrder(item) {
        this.OpenNewUrl('/course/classorder', {
          ClassId: item.ClassId,
        });
      },
      //跳转到收支明细
      goPayment(item) {
        this.OpenNewUrl('/course/paymentDetail', {
          ClassId: item.ClassId,
          School_Id: item.School_Id,
          ClassName: encodeURI(item.ClassName),
        });
      },
      //跳转到未完成学生名单
      goStudent(item) {
        this.OpenNewUrl('/stuMan/unfinishedStudent', {
          ClassId: item.ClassId,
        });
      },
      //刷新页面
      refreshPage() {
        this.isShowClassForm = false;
        this.isShowClassInfo = false;
        this.IsShowOtherCourse = false;
        this.isShowStatusChange = false;
        this.isShowTiaoke = false;
        //调用父页面成功方法
        this.$emit('success');
      },
      //新增修改菜单
      EditCourse(obj) {
        if (obj) {
          this.classObjOption = obj
        } else {
          this.classObjOption = null
        }
        this.isShowClassForm = true
      },
      //关闭弹窗
      closeClassSaveForm() {
        //关闭新增修改弹窗
        this.isShowClassForm = false;
        //关闭班级信息弹窗
        this.isShowClassInfo = false;
        //关闭关联其他课程弹窗
        this.IsShowOtherCourse = false;
        this.isShowStatusChange = false;
        this.isShowTiaoke = false;
      },
      GetFirst(val) {
        if (val) {
          return val.substr(0, 1);
        }
      },
      //显示关联课程
      showOtherCourse(item) {
        this.IsShowOtherCourse = true;
        this.classObjOption = item;
      },
      //点击班级名称
      getClassInfo(obj) {
        this.classObjOption = null;
        this.isShowClassInfo = false;
        this.classObjOption = obj;
        this.isShowClassInfo = true;
      },
      gomonthLessonCost(row) {
        let ClassName = encodeURI(row.ClassName)
        this.OpenNewUrl('/course/monthLessonCost', {
          ClassId: row.ClassId,
          ClassName: ClassName,
        });
      },
      //跳转到课程大纲
      goChapter(CouseId) {
        this.OpenNewUrl('/course/chapter', {
          CourseId: CouseId
        });
      },
      //调课申请
      classApply(item) {
        this.classObjOption = item;
        this.isShowTiaoke = true;
      }
    }
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>