<style>
  .classinfo_Dialog .drawerTop {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #F0F5FB;
    padding: 5px 10px;
    align-items: center;
  }

  .classinfo_Dialog .classFirst {
    color: #000000;
    font-weight: bold;
  }

  .classinfo_Dialog .className {
    margin-left: 10px;
  }

  .classinfo_Dialog .classStatus {
    padding: 3px 8px;
    background-color: #c8d7fc;
    color: #2961FE;
    font-size: 12px;
    border-radius: 2px;
    margin-left: 20px;
  }

  .classinfo_Dialog .normalName {
    color: #999999;
  }

  .classinfo_Dialog .normalInner {
    color: #111111;
  }

  .drop_NameDown {
    margin-top: 20px;
    width: 300px;
  }

</style>
<template>
  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeShenheForm">
    <q-card style="margin-top:61px;width:850px" class="no-border-radius classinfo_Dialog">
      <div class="drawerTop">
        <div style="display:flex;align-items:center;">
          <q-avatar size="md" style="background:#d4dfff;color:#2961FE;font-weight:bold;">
            <template v-if="classObj.ClassName">{{classObj.ClassName.substring(0,1)}}</template>
          </q-avatar>
          <div class="className">
            <div class="classFirst">{{classObj.ClassName}}</div>
            <div style="color:#666666;font-size:12px;">{{classObj.CourseName}}</div>
          </div>
          <div class="classStatus">{{classObj.ClassStatusStr}}</div>
        </div>
      </div>
      <div style="margin:20px;font-size:12px;">
        <div class="row wrap ">
          <div class="col-6">
            <span class="normalName">老师名称：</span>
            <span class="normalInner">{{classObj.TeacherName}}</span>
          </div>
          <div class="col-6">
            <span class="normalName">开班时间：</span>
            <span class="normalInner">
              <template v-if="classObj.NewPlanDateTime">
                {{classObj.NewPlanDateTime}}
              </template>
              <template v-else>
                {{classObj.OpenTime}}
              </template>
            </span>
          </div>
        </div>
        <div class="row wrap" style="margin-top:20px;">
          <div class="col-6" style="display:flex;align-items:center;">
            <span class="normalName">课程进度：</span>
            <q-linear-progress rounded size="20px" :value="getProgress(classObj.CompleteProgress,100)"
              style="background-color:#EEEEEF;color:#3FC4FF;display:inline-block;width:30%;margin-right:10px;" />
            {{classObj.CompleteProgress}}%
          </div>
        </div>
      </div>
      <q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
        <q-tab :ripple="false" name="first" label="学员信息" />
        <q-tab :ripple="false" name="second" label="上课计划" />
        <q-tab :ripple="false" name="third" label="上课记录" />
        <q-tab :ripple="false" name="fourth" label="班级日志" />
      </q-tabs>
      <div v-if="tabCheck=='first'" style="margin:0 15px;">
         <classstuForm :seting-obj="setingObj" :isShowMyBtn="isShowMyBtn"></classstuForm>
      </div>
      <div v-if="tabCheck=='second'">
         <lessForm :seting-obj="setingObj" :isShowMyBtn="isShowMyBtn"></lessForm>
      </div>
      <div v-if="tabCheck=='third'">
        <recordForm :seting-obj="setingObj" :isShowMyBtn="isShowMyBtn"></recordForm>
      </div>
      <div v-if="tabCheck=='fourth'">
        <classlogForm :seting-obj="setingObj"></classlogForm>
      </div>
    </q-card>
    <div class="dialog-out-close" @click="closeShenheForm"
      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
  </q-dialog>
</template>

<script>
  import {
    getClassInfo
  } from '../../api/school/index'
  import lessForm from '../course/lesson-form';
  import recordForm from '../course/record-form';
  import classlogForm from '../course/classlog-form';
  import classstuForm from '../course/classstu-form';
  export default {
    props: {
      setingObj: {
        type: Object,
        default: null
      },
      isShowEditBtn:{
        type: Number,
        default: null
      }
    },
    components: {
      lessForm,
      recordForm,
      classlogForm,
      classstuForm
    },
    data() {
      return {
        persistent: true,
        tabCheck: 'first', //默认选第一个
        loading: false,
        classObj:{},
        isShowMyBtn:0
      }
    },
    created() {

    },
    watch: {
      setingObj: {
        handler(newValue) {
          this.queryClassInfo();
        },
        immediate: true
      }
    },
    mounted() {
      if(this.isShowEditBtn==1){
        this.isShowMyBtn=1
      }
    },
    methods: {
      queryClassInfo() {
        getClassInfo({
          ClassId: this.setingObj.ClassId
        }).then(res => {
          if (res.Code == 1) {
               this.classObj=res.Data;
          }
        })
      },
      closeShenheForm() {
        this.persistent = false;
        this.$emit('close');
      },
      //获取进度条
      getProgress(num, total) {
        if (num == 0 || total == 0) {
          return 0;
        }
        return (Math.round(num / total * 100) / 100.00);
      },
    }
  }

</script>
