<template>
    <div>
        <div class="student-search">
            <div>
                <Input placeholder="Enter something..." style="width: 300px" />
                <Button type="primary" icon="ios-search">
                    <span>搜索</span>
                </Button>
            </div>
            <Button type="primary">
                <span>添加</span>
            </Button>
        </div>
        <i-table border :content="self" :columns="columns" :data="data"></i-table>
        <div class="student-page">
            <Page :total="60"/>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                self: this,
                columns: [
                    {
                        type:"index",
                        title: '序号',
                        align: 'center'
                    },
                    {
                        title: '机构名字',
                        key: 'orgar',
                        align: 'center'
                    },
                    {
                        title: '负责人',
                        key: 'guarder',
                        align: 'center'
                    },
                    {
                        title: '负责人电话',
                        key: 'phone',
                        align: 'center'
                    },
                    {
                        title: '地址',
                        key: 'address',
                        align: 'center'
                    },
                    {
                        title: '教师数',
                        key: 'teacher',
                        align: 'center'
                    },
                    {
                        title: '学生数',
                        key: 'student',
                        align: 'center'
                    },
                    {
                      title: '操作',
                      key: 'action',
                      width: 180,
                      align: 'center',
                      render: (h, params) => {
                        return h('div', [
                          h('Button', {
                            props: {
                              type: 'text',
                              size: 'small'
                            },
                            style: {
                              color: '#3D8EFE'
                            },
                            on: {
                              click: () => {
                                this.show(params.index)
                              }
                            }
                          }, '查看'),
                          h('Button', {
                            props: {
                              type: 'text',
                              size: 'small'
                            },
                            style: {
                              color: '#FF3366'
                            },
                            on: {
                              click: () => {
                                this.show(params.index)
                              }
                            }
                          }, '删除')
                        ])
                      }
                    }
                ],
                data: [
                    { 
                        orgar:'郑州天琥培训机构',
                        guarder: '宋老师',
                        phone: 18888888888,
                        address: '北京市朝阳区芍药居',
                        teacher:60,
                        student:120
                    },
                    { 
                        orgar:'郑州天琥培训机构',
                        guarder: '宋老师',
                        phone: 18888888888,
                        address: '北京市朝阳区芍药居',
                        teacher:60,
                        student:120
                    },
                    { 
                        orgar:'郑州天琥培训机构',
                        guarder: '宋老师',
                        phone: 18888888888,
                        address: '北京市朝阳区芍药居',
                        teacher:60,
                        student:120
                    },
                    { 
                        orgar:'郑州天琥培训机构',
                        guarder: '宋老师',
                        phone: 18888888888,
                        address: '北京市朝阳区芍药居',
                        teacher:60,
                        student:120
                    },
                    { 
                        orgar:'郑州天琥培训机构',
                        guarder: '宋老师',
                        phone: 18888888888,
                        address: '北京市朝阳区芍药居',
                        teacher:60,
                        student:120
                    },
                    { 
                        orgar:'郑州天琥培训机构',
                        guarder: '宋老师',
                        phone: 18888888888,
                        address: '北京市朝阳区芍药居',
                        teacher:60,
                        student:120
                    },
                    { 
                        orgar:'郑州天琥培训机构',
                        guarder: '宋老师',
                        phone: 18888888888,
                        address: '北京市朝阳区芍药居',
                        teacher:60,
                        student:120
                    },
                    { 
                        orgar:'郑州天琥培训机构',
                        guarder: '宋老师',
                        phone: 18888888888,
                        address: '北京市朝阳区芍药居',
                        teacher:60,
                        student:120
                    }
                ]
            }
        },
        methods: {
            show (index) {
                this.$Modal.info({
                    title: '用户信息',
                    content: `负责人：${this.data[index].guarder}<br>年龄：${this.data[index].phone}<br>地址：${this.data[index].address}`
                })
            },
            remove (index) {
                this.data.splice(index, 1);
            }
        }
    }
</script>
<style scoped>
.student-search{
    display: flex;
    justify-content: space-between;
    margin-bottom: 21px;
}
.student-page{
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}
.ivu-page /deep/ .ivu-page-prev{
    border: none;
    background-color: #F4F4F5;
    font-weight: bold;
    border-radius: 2px;
}
.ivu-page /deep/ .ivu-page-item{
    border: none;
    background-color: #F4F4F5;
    font-weight: bold;
    border-radius: 2px;
}
.ivu-page /deep/ .ivu-page-next{
    border: none;
    background-color: #F4F4F5;
    font-weight: bold;
    border-radius: 2px;
}
.ivu-page /deep/ .ivu-page-item-active{
    background-color: #5B9EFF;
}
.ivu-page /deep/ .ivu-page-item-active a{
    color: #ffffff;
}
</style>