<template>
    <table-page-template>
        <el-form slot='form' :inline='true' :model='formInline' size='mini'>
            <el-form-item label='审批人'>
                <el-input v-model='formInline.user' placeholder='审批人'></el-input>
            </el-form-item>
            <el-form-item label='活动区域'>
                <el-select v-model='formInline.region' placeholder='活动区域'>
                    <el-option label='区域一' value='shanghai'></el-option>
                    <el-option label='区域二' value='beijing'></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type='primary' @click='query'>查询</el-button>
            </el-form-item>
            <el-form-item label='审批人'>
                <el-input v-model='formInline.user' placeholder='审批人'></el-input>
            </el-form-item>
            <el-form-item label='备选项'>
                <el-radio-group v-model='radio2'>
                    <el-radio :label='3'>备选项3</el-radio>
                    <el-radio :label='6'>备选项6</el-radio>
                    <el-radio :label='9'>备选项9</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='审批人'>
                <el-input v-model='formInline.user' placeholder='审批人'></el-input>
            </el-form-item>
            <el-form-item label='复选框'>
                <el-checkbox-group v-model='checkList' @change='checkListChange'>
                    <el-checkbox label='复选框 A'>复选框 1</el-checkbox>
                    <el-checkbox label='复选框 B'></el-checkbox>
                    <el-checkbox label='复选框 C'></el-checkbox>
                    <el-checkbox label='禁用' disabled></el-checkbox>
                    <el-checkbox label='选中且禁用' disabled></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <el-table
            slot='table'
            ref='multipleTable'
            :data='tableData3'
            border
            tooltip-effect='dark'
            style='width: 100%'
            @selection-change='handleSelectionChange'
        >
            <el-table-column type='selection' width='55'></el-table-column>
            <el-table-column label='日期' width='120'>
                <template slot-scope='scope'>{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop='name' label='姓名' width='120'></el-table-column>
            <el-table-column prop='address' label='地址' show-overflow-tooltip></el-table-column>
        </el-table>
        <base-pagination :total='456' @pageChanged='pageChanged' slot='pagination'></base-pagination>
    </table-page-template>
</template>
<script>
export default {
    name: 'DemoTable',
    data() {
        return {
            radio2: 3,
            checkList: ['选中且禁用', '复选框 A'],
            formInline: {
                user: '',
                region: ''
            },
            tableData3: [],
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
            multipleSelection: [],
            total: 456
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!')
        },
        checkListChange() {
            console.log('checkListChange ' + JSON.stringify(this.checkList))
        },
        handleSelectionChange(val) {
            console.log('handleSelectionChange --> ' + val)
            this.multipleSelection = val
        },
        handleSizeChange(size) {
            console.log('handleSizeChange --> ' + size)
        },
        handleCurrentChange(page) {
            console.log('handleCurrentChange --> ' + page)
        },
        query() {
            this.postJson('/server/getTableData', {}, resp => {
                console.log(resp)
            })
        },
        pageChanged(page, size) {
            console.log('pageChanged size=' + size + ', page = ' + page)
        }
    },
    created() {
        this.$store.dispatch('setBreadcrumb', [{ label: 'Demo' }, { label: 'Table' }])
        for (let i = 0; i < 50; i++) {
            this.tableData3.push({
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            })
        }
    }
}
</script>
