<template>
    <el-layout>
        <el-form isSearch ref="form" :model="form" :rules="rules">
            <!--<el-form-item label="名字">-->
            <!--    <el-input v-model="form.input" type="datetimerange"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="名字">-->
            <!--    <el-form-content v-model="form.input" ele="input" showWordLimit :maxLength="100" type="textarea"></el-form-content>-->
            <!--</el-form-item>-->
<!--            <el-form-item label="名字">-->
<!--                <el-date-picker v-model="form.input" type="datetimerange"></el-date-picker>-->
<!--            </el-form-item>-->

            <!--<el-form-item label="日期选择">-->
            <!--    <el-date-picker-->
            <!--            v-model="form.date"-->
            <!--            type="datetimerange"-->
            <!--            start-placeholder="开始日期"-->
            <!--            end-placeholder="结束日期"-->
            <!--    >-->
            <!--    </el-date-picker>-->
            <!--</el-form-item>-->

            <!--<el-form-item label="日期">-->
            <!--    <el-date-picker-->
            <!--            v-model="form.date1"-->
            <!--            type="date"-->
            <!--            placeholder="选择日期">-->
            <!--    </el-date-picker>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="名字">-->
            <!--    <el-dict-select v-model="form.select" :options="options" label-key="name" value-key="id"></el-dict-select>-->
            <!--</el-form-item>-->

            <!--<el-form-item label="名字">-->
            <!--    <el-cascader v-model="form.cascader" multiple :options="cascaders" label-key="name" value-key="id"></el-cascader>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="图片">-->
            <!--    <el-form-content ele="upload" v-model="form.fileLisst" list-type="picture-card"></el-form-content>-->
            <!--</el-form-item>-->

            <el-form-item label="合同文件上传" prop="annexPathList" :span="2">
                <el-form-content ele="upload" v-model="form.annexPathList" accept="jpg,png">
                    <el-button type="primary">选择文件</el-button>
                </el-form-content>
            </el-form-item>
        </el-form>



        <div style="background-color:#fff; padding: 20px;" class="aaa">
            <el-button-group base style="margin-bottom: 20px;">
                <el-button @click="handleTestUpload">测试上传验证</el-button>
                <el-button type="primary" @click="isShow = !isShow">新建</el-button>
                <el-button @click="handleDelete">删除</el-button>

                <!--<el-upload-->
                <!--        ele="upload"-->
                <!--        v-model="files"-->
                <!--        :limit="2"-->
                <!--        list-type="picture-card"-->
                <!--        accept="bmp,jpg,png,tif,gif"-->
                <!--&gt;</el-upload>-->
                <el-button @click="handleInfo">查看上传文件</el-button>

                <el-tooltip class="item" effect="light">
                    <div slot="content">Top Left 提示文字</div>
                    <div @click="handleClick">测试不消失问题</div>
                </el-tooltip>
            </el-button-group>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="日期">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名">
                </el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="地址" width="140px"></el-table-column>
                <el-table-column prop="address" label="操作" width="200px" fixed="right">
                    <template slot-scope="{ row }">
                        <el-button @click="handleDelete(row)">删除</el-button>
                        <el-button>测试</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    direction="right"
                    :page-size="pageSize"
                    :current-page="current"
                    :total="total">
            </el-pagination>
        </div>

        <!--<el-drawer :visible.sync="isShow" title="标题" @confirm="handleConfirm" size="50%">-->

        <!--<el-form :model="form" column="2" >-->
        <!--<el-form-item label="名字" >-->
        <!--<el-date-picker v-model="form.input"  type="datetimerange"></el-date-picker>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="名字">-->
        <!--<el-form-content v-model="form.input" type="input"></el-form-content>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="名字">-->
        <!--<el-date-picker v-model="form.input" type="datetimerange"></el-date-picker>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="名字">-->
        <!--<el-date-picker v-model="form.input" type="datetimerange"></el-date-picker>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="名字">-->
        <!--<el-date-picker v-model="form.input" type="datetimerange"></el-date-picker>-->
        <!--</el-form-item>-->

        <!--</el-form>-->

        <!--</el-drawer>-->
        <Create v-if="isShow" :visible.sync="isShow" title="标题" @submit="handleConfirm" size="70%" look></Create>
        <!--<el-dict-select v-model="form.input" type="a" @change="handleSearch"></el-dict-select>-->
    </el-layout>
</template>

<script>
    import Create from './components/create'

    export default {
        name: 'App',
        components: {
            Create
        },
        data() {
            return {
                form: {
                    input: '333',
                    select: '',
                    cascader: ['2', '3'],
                    annexPathList: []
                },
                rules: {
                    annexPathList: [
                        { required: true, message: '请上传文件', trigger: ['change', 'input'] }
                    ]
                },
                options: [
                    { id: '1', name: 'a' },
                    { id: '2', name: 'b' },
                ],
                cascaders: [
                    { id: 1, label: 'a', value: 1 },
                    { id: 2, label: 'b', value: 2, children: [
                            { id: 3, label: 'b-a', value: 3 }
                        ] },
                ],
                files: [],
                isShow: false,
                fileList: [],
                pageSize: 10,
                current: 1,
                total: 0,
                tableData: [
                    { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    // { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                ],
            };
        },
        created() {
            this.$on('click', (data) => {
                console.log('click', data)
            })
            this.$on('search', (data) => {
                console.log('search', data)
            })
        },
        methods: {
            handleSearch() {
                console.log(111, this.form.input);
            },
            handleConfirm() {
                console.log('handleConfirm')
            },
            handleDelete() {
                console.log('handleDelete')
            },
            handleRemove() {

            },
            handleInfo() {
                console.log(this.files)
            },
            handleClick() {
                this.isShow = true
            },
            handleTestUpload() {
                this.$refs.form.validate(valid => {
                    if (valid) {

                    }
                })
            }
        }
    };
</script>
<style>
    html, body, #app {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .el-layout {
        padding: 36px;
        background: linear-gradient(360deg, #EDF1F7 0%, #DFE7F1 100%);
    }
</style>
