<template>
  <div class="app-container">
    <el-row :gutter="20">
        <record  v-if="user.roles && user.roles[0].roleId == 3"></record>
        <el-card  v-else>
          <el-row>
            <el-col :span="6" :xs="6"  >
                <span>{{user.busiSchool && user.busiSchool[0].schoolName}}</span>
             </el-col>
            <el-col :span="18" :xs="18"  style="text-align: right">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="年级">
                  <el-select v-model="formInline.gradeId" clearable placeholder="请选择">
                      <el-option
                        v-for="item in grade"
                        :key="item.gradeId"
                        :label="item.gradeName"
                        :value="item.gradeId">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级">
                 <el-select v-model="formInline.classId" clearable placeholder="请选择">
                     <el-option
                       v-for="item in classOptions"
                       :key="item.classId"
                       :label="item.className"
                       :value="item.classId">
                     </el-option>
                   </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="confirm">查询</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col
              :span="2"
              v-for="(item, idx) in dataList"
              :key="idx"
              class="mb20 mt20 text-center" style="min-width:100px">
              <student-card
                @click.native="detail(item)"
                :name="item.name"
                :avatar='item.avatar'
              ></student-card>
            </el-col>
        </el-row>
        </el-card>
      </el-row>
  </div>
</template>

<script>
import Record from "./components/record";
import { getUserProfile } from "@/api/system/user";
export default {
  components: { Record},
  data() {
    return {
      user:{},
      classOptions:[],
      grade:[],
      formInline:{
        gradeId:'',
        classId:''
      },
      dataList:[{name:'张三三',avatar:''}]
    };
  },
  watch:{
    'formInline.gradeId':function(value){
      this.formInline.classId = ''
      this.classOptions = []
      if(value){
          this.grade.forEach(item=>{
            if(value == item.gradeId){
              this.classOptions = item.clazz || []
            }
          })
      }
    }
  },
  created() {
    this.getUser()
  },
  methods: {
      detail(data){
        this.$router.push({ path: "/user/record", query: data });
      },
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data;
          if(response.data.busiSchool && response.data.busiSchool[0]){
            this.grade = response.data.busiSchool[0].grade || []
          }

        });
      },
      confirm(){

      }
  }
};
</script>
