<template>
<div class="ele-body">
    <a-card :bordered="false">
        <!-- 搜索表单 -->
        <a-form :model="where" :label-col="{md: {span: 6}, sm: {span: 24}}" :wrapper-col="{md: {span: 18}, sm: {span: 24}}">
            <a-row>
                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                    <a-form-item label="菜单名称:">
                        <a-input v-model:value.trim="where.title" placeholder="请输入" allow-clear />
                    </a-form-item>
                </a-col>

            </a-row>
        </a-form>
        <!-- 表格 -->
        <ele-pro-table ref="table" row-key="ecoRoadSoundBillId" :datasource="url" :columns="columns" :where="where" :scroll="{x: 'max-content'}">
            <template #toolbar>
                <a-space>
                    <a-upload :before-upload="importFile" :show-file-list="false" accept=".xls,.xlsx,.csv">
                        <a-button>导入excel</a-button>
                    </a-upload>
                </a-space>
            </template>
            <template #action="{ record }">
                <a-space>
                    <a @click="openEdit(null, record.menuId)">添加</a>
                    <a-divider type="vertical" />
                    <a @click="openEdit(record)">修改</a>
                    <a-divider type="vertical" />
                    <a-popconfirm @confirm="remove(record)" title="确定要删除此菜单吗？">
                        <a class="ele-text-danger">删除</a>
                    </a-popconfirm>
                </a-space>
            </template>
        </ele-pro-table>
    </a-card>
</div>
<!-- 编辑弹窗 -->
</template>

<script>
import XLSX from 'xlsx';
import {} from '@ant-design/icons-vue';
import {
    pageBillUrl
} from "@/api/ecology/road_sound";
export default {
    name: 'RoadSound',
    components: {},
    data() {
        return {
            // 表格数据接口
            url: pageBillUrl,
            // 表格列配置
            columns: [{
                    key: 'index',
                    dataIndex: 'index',
                    width: 48,
                    align: 'center',
                    customRender: ({
                        index
                    }) => index + 1
                },
                // {
                //   title: '菜单名称',
                //   dataIndex: 'title',
                //   sorter: true
                // },
                {
                    title: '创建时间',
                    dataIndex: 'createTime',
                    sorter: true,
                    customRender: ({
                        text
                    }) => this.$util.toDateString(text)
                },
                {
                    title: '更新时间',
                    dataIndex: 'updateTime',
                    sorter: true,
                    customRender: ({
                        text
                    }) => this.$util.toDateString(text)
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    slots: {
                        customRender: 'action'
                    }
                }
            ],
            // 表格搜索条件
            where: {},
            // 表格选中数据
            selection: [],
            // 当前编辑数据
            current: null,
        };
    },
    methods: {

        /* 刷新表格 */
        reload() {
            this.$refs.table.reload({
                where: this.where
            });
        },
        /* 重置搜索 */
        reset() {
            this.where = {};
            this.reload();
        },
        /* 删除单个 */
        remove(row) {
            const hide = this.$message.loading('请求中..', 0);
            this.$http.delete('/sys/menu/' + row.menuId).then(res => {
                hide();
                if (res.data.code === 0) {
                    this.$message.success(res.data.msg);
                    this.reload();
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(e => {
                hide();
                this.$message.error(e.message);
            });
        },
        /* 导入本地excel文件 */
        importFile(file) {
            let reader = new FileReader();
            reader.onload = (e) => {
                let data = new Uint8Array(e.target.result);
                let workbook = XLSX.read(data, {
                    type: 'array'
                });
                let sheetNames = workbook.SheetNames;
                let worksheet = workbook.Sheets[sheetNames[0]];
                // 解析成二维数组
                let aoa = XLSX.utils.sheet_to_json(worksheet, {
                    header: 1
                });
                console.log(aoa);
            };
            reader.readAsArrayBuffer(file);
            return false;
        }
    }
}
</script>

<style scoped>
</style>
