<template>
  <div class="app-container">
    <el-card class="box-card" >
      <div slot="header" class="clearfix text-center f20 pb10 pt10" >
        {{ title }}
      </div>
      <div>
        <p class="mb10">
          <el-button type="primary" @click="toSign">完成选科签字</el-button>
          <el-button type="primary" @click="showDispatchInfo">查看分班信息</el-button>
        </p>
        <div v-if="isSign && isShow">
          <el-alert
            class="mb5"
            :title="`通知：${$store.getters.nickName}同学您的新班级信息于2022年6月18日0点生效`"
            type="info"
            :closable="false"
            show-icon>
          </el-alert>
          <mx-table :prop-defines="propsDefines" :rows="rows">
            <template #tips="{row}">
              <el-button type="primary">查看</el-button>
            </template>
          </mx-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
 export default {
   data(){
     return{
       isSign:false,
       isShow:false,
       rows: [
         {
           year: 2021,
           group: '物化生',
           name: this.$store.getters.nickName,
           oldClass: '2101',
           newClass: '2105',
         }
       ],
       propsDefines: {
         year: {
           label:'学年'
         },
         group: {
           label:'选择组合'
         },
         name: {
           label:'姓名'
         },
         oldClass: {
           label:'原班级'
         },
         newClass: {
           label:'新班级'
         },
         tips: {
           label:'新班报道备注',
           slot: 'tips'
         },
       }
     }
   },
   computed:{
      title(){
        const store  = this.$store.getters
        if(!store) return  ''
        console.log(store)
        return `${store.school.schoolName}${store.firstClassName}级分班信息  ${store.nickName}同学`
     }
   },
   methods: {
     showDispatchInfo() {
       if(!this.isSign){
         this.$message.warning('请完成选科报名签字，个人的分班信息才能显示')
         return
       }
       this.isShow = true

     },
     toSign() {
       // 签字
       if(this.isSign) return
       this.$Dialog('ElectiveSign',{},() => {
          this.$message.success('已完成签名')
          this.isSign = true
       })
       // if(!this.isSign) {
       //   this.isSign = true
       //   this.$message.success('已完成签名')
       // }
     }
   }
 }
</script>
<style>

</style>
