<template>
    <div class="table flex-display">

        <div class="head">
            <div class="action">
                <el-button plain type="success" icon="el-icon-circle-plus-outline" @click="handelOneMenu">新增一级菜单
                </el-button>
                <el-button plain type="warning" icon="el-icon-edit" @click="handelWechatMenu">修改菜单</el-button>
            </div>
        </div>

        <div class="list">
            <el-table
                    :data="MenuList"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    height="100%"
                    default-expand-all
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column prop="sname" label="菜单" width="180"></el-table-column>
                <el-table-column prop="type" label="type" width="180"></el-table-column>
                <el-table-column prop="skey" label="key" width="180"></el-table-column>
                <el-table-column prop="url" label="url" width="180"></el-table-column>
                <el-table-column prop="mediaId" label="media_id" width="180"></el-table-column>
                <el-table-column prop="appid" label="appid" width="180"></el-table-column>
                <el-table-column prop="pagepath" label="pagepath" width="180"></el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <div class="headrow">
                            <el-button size="mini" @click="handelMenu(scope)">{{scope.row.isAdd?"新增":"编辑"}}</el-button>
                            <el-button size="mini" type="danger" @click="handelDelete(scope)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="dialog.title" :visible.sync="dialog.visible" center @close="handelCancel">
            <div class="content">

                <el-form label-width="100px" :model="MenuDto" ref="buttonForm">

                    <el-form-item label="响应动作类型:" prop="type">
                        <template>
                            <el-select v-model="MenuDto.type" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>

                    <el-form-item label="菜单名称:" prop="sname">
                        <el-input v-model="MenuDto.sname" placeholder="请输入内容"></el-input>
                    </el-form-item>

                    <el-form-item label="key:" prop="skey">
                        <el-input v-model="MenuDto.skey" placeholder="请输入内容"></el-input>
                    </el-form-item>

                    <el-form-item label="url:" prop="url">
                        <el-input v-model="MenuDto.url" placeholder="请输入内容"></el-input>
                    </el-form-item>

                    <el-form-item label="media_id:" prop="mediaId">
                        <el-input v-model="MenuDto.mediaId" placeholder="请输入内容"></el-input>
                    </el-form-item>

                    <el-form-item label="appid:" prop="appid" v-show="MenuDto.type == 'miniprogram'">
                        <el-input v-model="MenuDto.appid" placeholder="请输入内容"></el-input>
                    </el-form-item>

                    <el-form-item label="pagepath:" prop="pagepath" v-show="MenuDto.type == 'miniprogram'">
                        <el-input v-model="MenuDto.pagepath" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-form>

            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="handelCancel">取 消</el-button>
                <el-button type="primary" @click="handelClickConform">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import tableApi from '@/api/table'

    export default {
        name: "tableList",
        data() {
            return {
                buttonList: [],
                button: {},
                dialog: {
                    visible: false,
                    title: '新增'
                },
                subButton: {},

                isUpdate: false,
                MenuList: [],
                MenuDto: {},
                options: [{value: 'view', label: '网页类型'},
                    {value: 'click', label: '点击类型'},
                    {value: 'miniprogram', label: '小程序类型'}]

            }
        },
        mounted() {
            this.getMenuList()
        },
        methods: {
            getMenuList() {
                tableApi.getMenuList().then(res => {
                    let treeList = this.treeConver(res);
                    this.MenuList = treeList[0].children;
                    this.MenuList.map(m => m.isAdd = true);
                })
            },
            treeConver(list) {
                let parentList = list.filter(f => f.parentId == -1);
                parentList.forEach(f => {
                    this.findChildren(f, list);
                });
                return parentList;
            },
            findChildren(parent, list) {
                let childrenList = list.filter(f => f.parentId == parent.id);
                parent.children = childrenList;
                if (childrenList && childrenList.length > 0) {
                    childrenList.forEach(children => {
                        this.findChildren(children, list)
                    })
                }
            },
            handelOneMenu() {
                this.MenuDto.parentId = 1;
                this.MenuList.length < 3 ? this.dialog.visible = true : this.open('公众号一级菜单最多3项，请删除再试！');
            },
            open(message) {
                this.$alert(message, '警告', {
                    confirmButtonText: '确定',
                    callback: () => {
                        this.$message({
                            type: 'info',
                            message: `请删除再试`
                        });
                    }
                });
            },
            /**
             *  新增/编辑
             */
            handelMenu(scope) {
                this.dialog.visible = true;
                if (!scope.row.isAdd) {
                    tableApi.getMenuById(scope.row.id).then(res => {
                        this.isUpdate = true;
                        this.MenuDto = res;
                    })
                }
                else if (scope.row.children.length < 6) {
                    this.MenuDto.parentId = scope.row.id;
                } else {
                    this.open('公众号二级菜单最多6项，请删除再试！')
                    this.dialog.visible = false;
                }
            },
            handelDelete(scope) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    tableApi.deleteMenu(scope.row.id).then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.refresh()
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handelClickConform() {
                if (this.isUpdate) {
                    tableApi.updateSub(this.MenuDto).then(this.refresh)
                } else {
                    tableApi.addMenu(this.MenuDto).then(this.refresh)
                }
            },
            /**
             * 刷新
             */
            refresh() {
                this.getMenuList()
                this.handelCancel()
            },
            /**
             * 取消按钮
             */
            handelCancel() {
                this.dialog.visible = false;
                this.isUpdate = false;
                this.MenuDto = {}
            },

            handelWechatMenu() {
                tableApi.setMenu().then(this.refresh);
            }
        }

    }
</script>

<style lang="less" scoped>
    .table {
        /deep/ .el-dialog {
            width: 450px;
        }
    }
</style>
