<template>
  <section class="top">
    <router-link :to="backPath" slot="left">
      <i class="yd-back-icon" style="float:left" ></i>
    </router-link>
    <span class="name" @click="showStudentPicker = true"><img class="head" src="https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/student_alarm.png" />
    {{selectStudentName ? selectStudentName : '请选择'}}
      <yd-icon slot="icon" name="downarrow" size="0.35rem" color="#fff" custom></yd-icon>
    </span>
    <span class="head-right-opera">
      <van-switch v-model="selectStudentAuthorize" active-color="#4cd864" size="0.4rem" @change="setAuthorize" v-if="switchShow"/>
      <span v-if="switchShow">开放后台权限</span>
    </span>

    <van-popup v-model="showStudentPicker" position="bottom">
    <van-picker
        show-toolbar
        value-key="name"
        :columns="studentColumns"
        @confirm="studentConfirm"
        @cancel="showStudentPicker = false"
    />
    </van-popup>
  </section>
</template>

<script>
import Vue from 'vue'; 
import 'vant/lib/index.css';
import { Switch, Dialog, Notify, Popup } from 'vant';

Vue.use(Switch);
Vue.use(Dialog);
Vue.use(Notify);
Vue.use(Popup);

export default {
  name: 'heads',
  props:{
    backPath: {
      type: String,
      default:'/'
    },
    switchShow: {
      type: Boolean,
      default: true
    },
  },
  watch:{
      selectStudentId(val){
        let stuInfo = {}
        this.studentColumns.forEach(item => {
          if (item.id == val) {
            stuInfo = item;
          }
        })
        // 保存在本地
        localStorage.setItem('select_student_info', JSON.stringify(stuInfo));
        
        this.$emit('studentChange', stuInfo);
      }
  },
  data () {
    return {
      vociceOpen:true,
      selectStudentId: '',
      selectStudentName: '',
      showStudentPicker: false,
      selectStudentAuthorize: false,
      
      studentColumns:[]
    }
  },

  mounted(){
    let that = this;
    this.$http
      .get("/stu_list&userid=" + localStorage.getItem("userid"))
      .then(res => {
        let resp = res.data;

        if(!resp.success){
          this.$dialog.toast({
            mes:resp.message
          });
          return;
        }
        var studentColumns = [];

        resp.data.forEach(item => {
          studentColumns.push({
            id:item.id,
            name:item.realname,
            authorize: item.authorize
          })
        });

        that.studentColumns = studentColumns;
        
        this.$nextTick(()=>{
          this.setDefaultStudent()
        })
      })
      .catch(res => {
        console.log(res);
        this.$dialog.loading.close();
      });

  },
  methods:{
    // 默认学生
    setDefaultStudent() {
        // 默认选中
        let stuInfo = localStorage.getItem('select_student_info');

        if (stuInfo && stuInfo.length) {
          stuInfo = JSON.parse(stuInfo);
          let filteredData = this.studentColumns.filter(item => {
            return item.id == stuInfo.id;
          })
          stuInfo = filteredData[0] || {}
          if (!stuInfo.id) {
            stuInfo = this.studentColumns[0] || {}
          }
        } else {
          stuInfo = this.studentColumns[0] || {}
        }
        // 
        localStorage.getItem('select_student_info', stuInfo);
        if (stuInfo.id) {
          this.studentConfirm(stuInfo);
        }
    },

    studentConfirm(e){
      // console.log('select ===', e)
      this.selectStudentName = e.name;
      this.selectStudentId = e.id;
      this.selectStudentAuthorize = parseInt(e.authorize) ? true : false ;
      this.showStudentPicker = false;
    },
    setAuthorize(val){
      let that = this;
      this.$http
        .get("/changeAuthorize&userid=" + this.selectStudentId + '&authorize=' + (val ? 1 : 0) )
        .then(res => {
          let resp = res.data;

          if(!resp.success){
            this.$dialog.toast({
              mes:resp.message
            });
            that.selectStudentAuthorize = !val;
            return;
          }

          that.selectStudentAuthorize = val;
          
        })
        .catch(res => {
          console.log(res);
          that.selectStudentAuthorize = !val;
        });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top {
    height: 1rem;
    /* line-height: 50px; */
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    color: #fff;
    background-color: #2196f3;
    padding: 5px 10px;
        display: flex;
    justify-content: space-between;
        align-items: center;
  }
  
  .top .head-right-opera{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .top .head {
    width: 36px;
    height: 36px;
    /* float: left; */
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .top .name {
    font-size: 18px;
    color: #fff;
    margin-left: 10px;
        display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .top .voice {
    width: 30px;
    height: 50px;
    float: right;
    text-align: center;
  }
</style>