<template>
  <div class="wrap cleafix">
     <i-form :model="formItem" inline>
       <Form-item props='grade'>
            <i-select v-model="formItem.grade" placeholder="请选择">
                <i-option value="beijing">一年级</i-option>
                <i-option value="shanghai">二年级</i-option>
                <i-option value="shenzhen">三年级</i-option>
            </i-select>
        </Form-item>
        <Form-item props='name'>
            <i-input v-model="formItem.name" placeholder="请输入姓名"></i-input>
        </Form-item>
        <Form-item>
            <i-button  icon="ios-search" type="primary">提交</i-button>
        </Form-item>
        <Form-item class="add">
            <i-button  type="primary">添加</i-button>
        </Form-item>
      </i-form>
         <i-table border  :columns="columns1" :data="list"></i-table>
      <div class="bottom">
        <Page :total="100"></Page>
      </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      formItem: {
        grade: '',
        name: ''

      },
      columns1: [
        {
          title: '序号',
          key: 'id',
          align: 'center'
        },
        {
          title: '学生姓名',
          key: 'name',
          align: 'center'

        },
        {
          title: '就读学校',
          key: 'school',
          align: 'center'

        },
        {
          title: '年级',
          key: 'grade',
          align: 'center'

        },
        {
          title: '电话',
          key: 'phone',
          align: 'center',
          width: '120'

        },
        {
          title: '来源',
          key: 'from',
          align: 'center'

        },
        {
          title: '剩余总课时',
          key: 'hour',
          align: 'center',
          width: '110'

        },
        {
          title: '剩余总费用',
          key: 'money',
          align: 'center',
          width: '110'

        },
        {
          title: '是否冻结',
          align: 'center',
          render: (h, params) => { // 重点
            let _this = this
            return h('i-switch', { // 按钮的话是:button自行替换
              props: { // 这里可以设置它的属性
                value: params.row.status, // 设置它的值比如:true或false
                disabled: params.row.online // 设置是否可以操作,变灰
              },
              on: { // 操作事件
                input: function (event) { // 这里会起到监听的作用
                  if (event) { params.row.status = true } else { params.row.status = false }
                },
                'on-change': function () { // 值发生了改变调用方法
                  _this.functionFun() // 方法自定义
                }
              }
            })
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                // style: {
                //   color: 'black'
                // },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '编辑'),
              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)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      list: [
        {
          id: 1,
          name: '王小明',
          school: '朝阳',
          grade: '一年级',
          phone: '12563985967',
          from: '张三',
          hour: '45',
          money: '500'
        },
        {
          id: 2,
          name: '王小明',
          school: '朝阳',
          grade: '一年级',
          phone: '12563985967',
          from: '张三',
          hour: '45',
          money: '500'
        },
        {
          id: 3,
          name: '王小明',
          school: '朝阳',
          grade: '一年级',
          phone: '12563985967',
          from: '张三',
          hour: '45',
          money: '500'
        },
        {
          id: 4,
          name: '王小明',
          school: '朝阳',
          grade: '一年级',
          phone: '12563985967',
          from: '张三',
          hour: '45',
          money: '500'
        }
      ]
    }
  }

}
</script>

<style lang='less' scoped>
.wrap{
  background: white;
  padding: 20px;
  // position: relative;
  .ivu-btn-text:hover {
    background: transparent;
  }
  .ivu-form{
    .add{
      float:right;
    }
  }
  .bottom{
    margin:10px 0;
    display: flex;
    justify-content:flex-end;
    // position: absolute;
    // bottom: 10px;
    // right: 10px;
  }
}

</style>
