<template>
    <div class="page">
        <LayoutTable :data='tableData' :config='tableConfig' >
            <el-button slot='table-head-left2' style="margin-left: 10px" icon="el-icon-tickets" size='mini' @click='doImportOpen'>导入</el-button>
            <el-button slot='table-head-left2' style="margin-left: 10px" icon="el-icon-tickets" size='mini' @click='doExport' :disabled='isExport'>导出</el-button>
        </LayoutTable>

        <el-dialog
                title="导入"
                :visible.sync="deviceDialog.visible" width="600px">

            <div>
                <el-upload ref="upload" action="/wm/upload/"
                           :file-list="fileList3"
                           :on-change="readExcel"
                           :auto-upload="false">
                    <el-button slot="trigger" icon="el-icon-upload" size="small" type="primary">
                        导入EXCEL文件
                    </el-button>
                </el-upload>
                <a class='download' style="float:right" href='/testChair.xlsx' download  title="下载">模板下载</a>

            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="deviceDialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="doImport">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import table from "@/assets/mixins/table";
    export default {
        components: {
        },
        mixins: [table],
        created() {
        },
        methods: {
            doExport() {
                this.isExport = true;
                this.$download("demo/detail/doExport", {
                    'query.demoId': this.$route.query['query.demoId'],
                    'query.number': this.$route.query['query.number'],
                    'query.detail': this.$route.query['query.detail']                }, {}).then(() => this.isExport = false).catch(error => {
                    this.isExport = false;
                    this.$message.error(error.message);
                });
            },
        },
        data() {
            return {
                isExport: false,
                config: {
                    search: [
                        {
                            name: "demoId",
                            type: "text",
                            label: "测试demo表id",
                            fuzzy: true
                        },
                        {
                            name: "number",
                            type: "text",
                            label: "浮点值",
                            fuzzy: true
                        },
                        {
                            name: "detail",
                            type: "text",
                            label: "详细",
                            fuzzy: true
                        },
                    ],
                    columns: [
                        {type: "selection", width: 60},
                        {label: "主键id", prop: "id", formatter: this.formatterString},
                        {label: "测试demo表id", prop: "demoId"},
                        {label: "浮点值", prop: "number", formatter: this.formatterString},
                        {label: "详细", prop: "detail"},
                        {
                            label: "操作",
                            width: 180,
                            formatter: row => {
                                return (
                                    <div><el-button type="primary" icon="el-icon-edit" round size='mini' onClick={()=>{this.toEdit(row)}}>编辑</el-button></div>
                            );
                            }
                        }
                    ]
                }
            };
        }
    };
</script>