<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);
  }

</style>
<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input @change="getClassList" clearable standout="bg-primary text-white" v-model="msg.ClassName"
            label="班级名称" @clear="getClassList" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="getClassList" standout="bg-primary text-white" option-value="Id" option-label="Name"
            v-model="msg.ClassStatus" :options="classStatusList" emit-value map-options label="班级状态" />
        </div>
        <div class="col-3">
          <q-input @change="getClassList" clearable standout="bg-primary text-white" v-model="msg.TeacherName"
            label="带班老师" @clear="getClassList" maxlength="20" />
        </div>
        <div class="col-3">
          <q-input @change="getClassList" clearable standout="bg-primary text-white" v-model="msg.CourseName"
            label="学习课程" @clear="getClassList" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="getClassList" standout="bg-primary text-white" option-value="SId" option-label="SName"
            v-model="msg.School_Id" :options="schoolList" emit-value map-options label="关联校区" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-column-table sticky-right-column-table" separator="none" :data="data" :columns="columns"
        row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">班级信息</div>
          <q-space />
          <div class="page-option">
            <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增班级" @click="EditCourse(null)" />
          </div>
        </template>
        <template v-slot:body-cell-ClassName="props">
          <q-td auto-width :props="props">
            <q-avatar size="md" style="background:#d4dfff;color:#2961FE;font-weight:bold;" v-if="props.row.ClassName">
              {{GetFirst(props.row.ClassName)}}</q-avatar>
            <span style="color:#2961FE;margin-left:10px;cursor:pointer;" @click="getClassInfo(props.row)"
              title="点击查看详情">{{props.row.ClassName}}</span>
          </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;">
                          <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">
            <span style="color:#3FC4FF;">{{props.row.TeacherName}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-ClassPersion="props">
          <q-td auto-width :props="props">
            <i class="iconfont icon-ren-" style="color:#2961FE;"></i>预招 <span
              style="color:#2961FE;">{{props.row.ClassPersion}} </span>
            <i class="iconfont icon-ren-" style="color:#3FC4FF;margin-left:30px;"></i>当前 <span
              style="color:#3FC4FF">{{props.row.OrderStudentCount}}</span>
            <q-linear-progress rounded size="20px"
              :value="getProgress(props.row.OrderStudentCount,props.row.ClassPersion)"
              style="background-color:#EEEEEF;color:#3FC4FF" class="q-mt-sm" />
          </q-td>
        </template>
        <template v-slot:body-cell-CompleteProgress="props">
          <q-td auto-width :props="props">
            已进行{{props.row.CompleteProgress}}%
            <q-linear-progress rounded size="20px" :value="getProgress(props.row.CompleteProgress,100)"
              style="background-color:#EEEEEF;color:#3FC4FF" class="q-mt-sm" />
          </q-td>
        </template>
        <!--班级状态-->
        <template v-slot:body-cell-ClassStatusStr="props">
          <q-td>
            <span>{{props.row.ClassStatusStr}}</span>&nbsp;
            <i class="iconfont icon-edit" @click.stop="getClassItem(props.row)" title="点击修改班级状态">
              <q-popup-proxy>
                <q-banner v-if="isShowEdit">
                  <div class="calenderDialog">
                    <div style="margin:10px 0 15px 0;">设置班级状态</div>
                    <q-select standout="bg-primary text-white" option-value="Id" option-label="Name"
                      v-model="statusMsg.ClassStatus" :options="classStatusList" emit-value map-options label="班级状态" />
                    <q-card-actions align="right" class="bg-white">
                      <q-btn label="取消" flat color="grey-10" @click="isShowEdit=false"
                        style="font-weight:400 !important" />
                      <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important"
                        @click="setClassStatus()" />
                    </q-card-actions>
                  </div>
                </q-banner>
              </q-popup-proxy>
            </i>
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <q-btn 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">
                  <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">
                  <q-item-section>
                    <q-item-label>恢复</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="showOtherCourse(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" @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>
    </div>
  </div>
</template>
<script>
  import {
    queryClassPage,
    queryClassStatusList,
    saveClassStatus, //修改班级状态
  } from '../../api/course/class';
  //获取校区列表
  import {
    getSchoolDropdown,
    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';
  export default {
    meta: {
      title: "班级管理"
    },
    components: {
      classForm,
      classinfoForm,
      othercourseForm
    },
    data() {
      return {
        columns: [{
            name: 'ClassName',
            label: '班级名称',
            field: 'ClassName',
            align: 'left'
          },
          {
            name: 'SchoolName',
            label: '校区',
            field: 'SchoolName',
            align: 'left',
          },
          {
            name: 'CourseName',
            label: '课程',
            field: 'CourseName',
            align: 'left'
          },
          {
            name: 'OtherCourseName',
            label: '关联其他课程',
            field: 'OtherCourseName',
            align: 'left'
          },
          {
            name: 'TeacherName',
            label: '带班老师',
            field: 'TeacherName',
            align: 'left'
          },
          {
            name: 'ClassPersion',
            label: '招生/报名',
            field: 'ClassPersion',
            align: 'left'
          },
          {
            name: 'OpenTime',
            label: '开班时间',
            field: 'OpenTime',
            align: 'left'
          },
          {
            name: 'CompleteProgress',
            label: '课程进度',
            field: 'CompleteProgress',
            align: 'left'
          },
          {
            name: 'ClassStatusStr',
            label: '状态',
            align: 'left',
            field: 'ClassStatusStr'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'CourseId'
          }
        ],
        data: [],
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          ClassName: '', //班级名称
          ClassStatus: 0, //班级状态
          TeacherName: '', //带班老师
          CourseName: '', //学习课程
          School_Id: 0, //关联校区
        },
        //班级状态
        classStatusList: [],
        //关联校区列表
        schoolList: [],
        pageCount: 0,
        classObjOption: null,
        isShowEdit: false,
        statusMsg: {
          ClassId: 0,
          ClassStatus: 0
        },
        isShowClassForm: false, //是否显示新增修改弹窗
        isShowClassInfo: false, //是否显示课程信息
        IsShowOtherCourse: false, //是否显示其他课程
      }
    },
    created() {
      if (this.$route.query) {
        this.msg.ClassName = this.$route.query.ClassName
      }
      this.getClassStatus();
      this.getSchool();
    },
    mounted() {
      this.getClassList();
    },
    methods: {
      //删除班级
      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.getClassList();
            } else {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: res.Message,
                position: 'top'
              })
            }
          })
        }).onCancel(() => {

        });
      },
      //当前点击的班级
      getClassItem(item) {
        this.isShowEdit = true;
        var Obj = JSON.parse(JSON.stringify(item));
        this.statusMsg.ClassStatus = Obj.ClassStatus;
        this.statusMsg.ClassId = Obj.ClassId;
      },
      //更新班级状态
      setClassStatus() {
        saveClassStatus(this.statusMsg).then(res => {
          this.isShowEdit = false;
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '设置成功!',
              position: 'top'
            })
            this.getClassList();
          } else {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
          }
        });
      },
      gotoOrder(item) {
        var tempStr = '/course/classorder?ClassId=' + item.ClassId;
        this.$router.push({
          path: tempStr
        });
      },
      //跳转到收支明细
      goPayment(item) {
        this.$router.push({
          path: 'paymentDetail',
          query: {
            ClassId: item.ClassId,
            School_Id: item.School_Id,
            blank: 'y'
          }
        })
      },
      //获取校区列表
      getSchool() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.unshift({
              SId: 0,
              SName: "不限"
            })
            this.schoolList = tempArray;
          }
        })
      },
      //获取班级状态列表
      getClassStatus() {
        queryClassStatusList({}).then(res => {
          if (res.Code == 1) {
            this.classStatusList = res.Data;
          }
        }).catch(() => {})
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getClassList()
      },
      //获取菜单分页列表
      getClassList() {
        this.loading = true;
        queryClassPage(this.msg).then(res => {
          this.loading = false;
          this.data = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false
        })
      },
      //刷新页面
      refreshPage() {
        this.isShowClassForm = false;
        this.getClassList();
      },
      //新增修改菜单
      EditCourse(obj) {
        if (obj) {
          this.classObjOption = obj
        } else {
          this.classObjOption = null
        }
        this.isShowClassForm = true
      },
      //关闭弹窗
      closeClassSaveForm() {
        //关闭新增修改弹窗
        this.isShowClassForm = false;
        //关闭班级信息弹窗
        this.isShowClassInfo = false;
        //关闭关联其他课程弹窗
        this.IsShowOtherCourse = false;
      },
      GetFirst(val) {
        if (val) {
          return val.substr(0, 1);
        }
      },
      //获取进度条
      getProgress(num, total) {
        if (num == 0 || total == 0) {
          return 0;
        }
        return (Math.round(num / total * 100) / 100.00);
      },
      //显示关联课程
      showOtherCourse(item) {
        this.IsShowOtherCourse = true;
        this.classObjOption = item;
      },
      //点击班级名称
      getClassInfo(obj) {
        this.classObjOption = null;
        this.isShowClassInfo = false;
        this.classObjOption = obj;
        this.isShowClassInfo = true;
      }
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
