<template>
  <div> 
    <!-- 检索区域 -->
    <sh-search ref="search" :model="form" :resetBtn="true">
      <sh-form-item label="姓名" :span="8" prop="name">
        <el-input v-model="form.name"></el-input>
      </sh-form-item>
      <sh-form-item label="班级" :span="8" prop="classNo">
        <el-input v-model="form.classNo"></el-input>
      </sh-form-item>
      <template slot="btn">
        <sh-button type="primary" @click="loadList">查询</sh-button>
        <sh-button type="success" @click="onOpen('add')" v-if="$isCode ('clazz-student-add')">新增</sh-button>
      </template>
    </sh-search>
    <!-- 表格 -->
    <sh-table ref="table" class="space-top" :api="tableApi" :param="form">
      <sh-table-column type="index" label="序号" width="50"> </sh-table-column>
      <sh-table-column prop="name" label="姓名" min-width="60"> </sh-table-column>
      <sh-table-column prop="age" label="年龄" min-width="60" :show-overflow-tooltip="true"> </sh-table-column>
      <sh-table-column prop="gender" label="性别" min-width="60"> </sh-table-column>
      <sh-table-column prop="classNo" label="班级" min-width="80"> </sh-table-column>
      <sh-table-column label="操作" min-width="80">
        <template slot-scope="scope">
          <el-button @click="onOpen('view', scope.row)" type="text" v-if="$isCode ('clazz-student-view')">查看</el-button>
          <el-button @click="onOpen('edit', scope.row)" type="text" v-if="$isCode ('clazz-student-edit')">编辑</el-button>
          <el-button @click="onDelete(scope.row)" type="text" v-if="$isCode ('clazz-student-delete')">删除</el-button>
        </template>
      </sh-table-column>
    </sh-table>
    <!-- 弹框 -->
    <InfoDialog ref="infoDialog" @loadList="loadList" />
  </div>
</template>
<script>
import InfoDialog from './components/InfoDialog'
import { CLAZZ_STUDENT_PAGE, CLAZZ_STUDENT_DELETE } from '@/apis/demo'
export default {
  components: { InfoDialog },
  data () {
    return {
      tableApi: CLAZZ_STUDENT_PAGE,
      form: {
        name: '',
          classNo: ''
      }
    }
  },
  methods: {
    onOpen (type, row) {    // 打开弹框
      this.$refs.infoDialog.open(type, row)
      
    },
    onDelete (row) {
      // 删除方法-封装
      this.$deleteInfo( CLAZZ_STUDENT_DELETE, { id: row.id }, '', this.loadList)
    },
    loadList () {
      // 重载table-封装
      this.$refs.table.loadList()
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar{
	height: 40px;
	width: 40px;
	position: absolute;
	top: 4px;
  left: 50%;
  margin-left: -20px;
	::v-deep.el-image__inner,
	img {
		width: auto;
		height: auto;
		max-height: 100%;
		max-width: 100%;
		vertical-align: text-bottom;
	}
}
.headImage{
	height: 200px;
}
</style>

