<template>
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-center  JNPF-flex-main">
            <div class="JNPF-common-layout-main JNPF-flex-main">
                <div class="JNPF-common-head">
                    <div>
                        <el-button type="primary" icon="el-icon-plus" @click="addMenu()">
                            新增
                        </el-button>
                        <el-button icon="el-icon-search" @click="initData()">查询</el-button>
                    </div>

                    <div class="JNPF-common-head-right">
                        <el-tooltip effect="dark" content="展开" placement="top">
                            <el-link v-show="!expands" type="text"
                                icon="icon-ym icon-ym-btn-expand JNPF-common-head-icon"
                                :underline="false" @click="toggleExpand()" />
                        </el-tooltip>
                        <el-tooltip effect="dark" content="折叠" placement="top">
                            <el-link v-show="expands" type="text"
                                icon="icon-ym icon-ym-btn-collapse JNPF-common-head-icon"
                                :underline="false" @click="toggleExpand()" />
                        </el-tooltip>
                        <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon"
                                :underline="false" @click="initData()" />
                        </el-tooltip>
                    </div>
                </div>
                <JNPF-table v-loading="listLoading" :data="treeList" row-key="id"
                    v-if="refreshTable" :default-expand-all="expands"
                    :tree-props="{ children: 'subButtons', hasChildren: '' }">
                    <el-table-column prop="name" label="菜单名称"> </el-table-column>
                    <el-table-column prop="type" label="菜单类型" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type == 'miniprogram'">小程序类型</span>
                            <span v-else-if="scope.row.type == 'view'">网页类型</span>
                            <span v-else-if="scope.row.type == 'click'">点击类型</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="url" label="菜单路径">
                        <template slot-scope="scope">
                            {{scope.row.pagePath ||  scope.row.url  ||  '--'}}
                        </template>

                    </el-table-column>

                    <el-table-column prop="key" label=" KEY值">
                        <template slot-scope="scope">
                            {{scope.row.key ||  '--'}}
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="150" fixed="right">
                        <template slot-scope="scope" sortable>
                            <span style="color: #f56c6c;cursor: pointer;margin-right: 10px;"
                                @click="deleteMenu(scope.row)">删除</span>
                            <span style="color:#1890ff;cursor: pointer;"
                                @click="editMenu(scope.row,true)">编辑</span>
                        </template>
                    </el-table-column>
                </JNPF-table>
            </div>
        </div>
        <Form v-if="formVisible" ref="Form" @refresh="initData" />
    </div>
</template>

<script>
import {
    getMenu2,
    deleteMenu2
} from "@/api/governmentCloud/officialAccount/menuManagement/menuManagement";

import Form from './form'

export default {
    name: "menuManagement",
    components: {},
    data() {
        return {
            listQuery: {
                keyword: ""
            },
            treeList: [],
            expands: true,
            refreshTable: true,
            btnLoading: false,
            listLoading: true,
            formVisible: false,
        };
    },
    components: {
        Form
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
            this.loading = true;
            this.listLoading = true;
            getMenu2(this.listQuery)
                .then(res => {
                    this.treeList = res.data;
                    if (this.treeList.length > 0) this.setTableIndex(this.treeList);
                    this.listLoading = false;
                    this.btnLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                    this.btnLoading = false;
                });
        },
        addMenu(id, isEdit = false) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.Form.init(id, isEdit)
            })
        },
        deleteMenu(row) {
            console.log(row)
            let params = {
                menuId: row.id
            }
            deleteMenu2(params).then(res => {
                if (res.code == 200) {
                    this.$message.success('删除成功')
                    this.initData()
                } else {
                    this.$message.warning(res.msg)
                }
            })
        },
        editMenu(row, isEdit) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.Form.init(row, isEdit)
            })
        },
        // 树形列表index层级，实现方法（可复制直接调用）
        setTableIndex(arr, index) {
            arr.forEach((item, key) => {
                item.index = key + 1;
                if (index) {
                    item.index = index + 1;
                }
                if (item.children) {
                    this.setTableIndex(item.children, item.index);
                }
            });
        },
        toggleExpand() {
            this.refreshTable = false;
            this.expands = !this.expands;
            this.$nextTick(() => {
                this.refreshTable = true;
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.table-icon {
    vertical-align: bottom;
    font-size: 16px;
    margin-right: 6px;
    line-height: 23px;
}
</style>
