<template>
    <el-contaier>
        <el-row>
            <el-col :span="5">
                <el-input v-model="name" placeholder="任务名称" style="width: 200px"></el-input>
            </el-col>
            <el-col :span="5">
                <el-input v-model="cateId" placeholder="任务分类" style="width: 200px"></el-input>
            </el-col>

            <el-col :span="6">
                <el-button type="primary" size="mini" @click="add()">查询</el-button>
                <el-button type="success" size="mini" @click="add()">新增</el-button>
            </el-col>
        </el-row>
        <el-row>
            <template>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="date"
                            label="日期"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="province"
                            label="省份"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="市区"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="160"
                            align="left">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    plain
                                    @click="handleClick(scope.row)"
                                    style="margin-right: 5px;">
                                编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    plain
                                    @click="applyDel(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-row>
        <el-row>
            <el-dialog
                    :title="dialogMap[dialogApply]"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="任务名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-col>

        </el-row>
    </el-contaier>
</template>

<script>

    export default {
        data() {
            return {
                tableData: [
                    {
                        date: '2016-05-02',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1517 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1519 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1516 弄',
                        zip: 200333
                    }],
                dialogVisible:false,
                ruleForm:{
                    id:'',
                    name:''
                },
                rules:{
                    name: [
                        { required: true, message: '请输入任务名称', trigger: 'blur' },
                        { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                    ]
                },
                dialogMap: {
                    update: '编辑',
                    create: '新增'
                },
                dialogApply: 'create',
                page:1,
                pageSize:10,
                total:0,
                name:'',
                cateId:''
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            handleClick(row) {
                this.dialogApply='update';
                this.dialogVisible=true;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.dialogVisible=false;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            // 删除
            applyDel(index, row) {
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    //
                }).catch(() => {
                })
            },
            add(){
                this.ruleForm={
                    id:'',
                    name:''
                };
                this.dialogApply='create';
                this.dialogVisible=true;
            }
        }
    }
</script>