<template>
    <div class="user">
        <Card :bordered="false" dis-hover>
            <bingo-list
                :columns="columns"
                :pageSetting="pageSetting"
                :page="false"
                :isTable="'high'"
                :showBtnType="'all'"
                :showBtnOutNum="2"
                :showNewBtn="true"
                :toolbarNew="true"
                ref="bingoList"
                :searchList="searchList"
                :dataApi="Api"
                :queryData="queryData"
                :isSearch="true"
                :isSearchAdvance="true"
                :showSwitchBtn="false"
                :autoFitWdith="false"
                :processData="processData"
                @on-query-submit="querySubmit"
                @on-add-new="onAddNew"
                @on-edit-btn="onEditBtn"
                treeColumn="nameCn"
                :defaultColDef="defaultColDef"
                :autoGroupColumnDef="autoGroupColumnDef"
                :groupDefaultExpanded="groupDefaultExpanded"
                :treeData="true"
                :animateRows="true"
                :getContextMenuItems="getContextMenuItems"
                :suppressContextMenu="false"
            >
            <!-- 高级搜索 -->
                <template slot="queryForm">
                    <bingo-grid-item>
                        <bingo-form-item label="菜单名称" prop="nameCn">
                            <Input
                                v-model="queryData.nameCn"
                                placeholder="请输入菜单名称"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="图标" prop="icon">
                            <Input
                                v-model="queryData.icon"
                                placeholder="请输入图标"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="是否显示" prop="isShow">
                            <Input
                                v-model="queryData.isShow"
                                placeholder="请输入是否显示"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <!-- <bingo-grid-item>
                        <bingo-form-item label="模块id" prop="moduleId">
                            <Input
                                v-model="queryData.moduleId"
                                placeholder="请输入模块id"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="父权限ID" prop="parentId">
                            <Input
                                v-model="queryData.parentId"
                                placeholder="请输入父权限ID"
                            />
                        </bingo-form-item>
                    </bingo-grid-item> -->
                    <bingo-grid-item>
                        <bingo-form-item label="类型" prop="type">
                            <Input
                                v-model="queryData.type"
                                placeholder="请输入类型"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="路径" prop="url">
                            <Input
                                v-model="queryData.url"
                                placeholder="请输入路径"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                </template>
            </bingo-list>
        </Card>
        <Modal v-model="isShowNewForm" :title="isAdd==true?'新建':'修改'" @on-ok="onOk" :width="900">
            <Form ref="formAdd" :model="formAdd" label-position="right" :label-width="80">
                <Row>
                    <Col :span="12">
                        <bingo-form-item label="菜单名称" :label-width="labelWidth">
                            <Input type="text" v-model="formAdd.nameCn" placeholder="请输入菜单名称">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="德文名称" :label-width="labelWidth">
                            <Input type="text" v-model="formAdd.nameDe" placeholder="请输入德文名称">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="英文名称" :label-width="labelWidth">
                            <Input type="text" v-model="formAdd.nameEn" placeholder="请输入英文名称">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="图标" :label-width="labelWidth">
                            <Poptip
                                placement="bottom-start"
                                width="460"
                                trigger="click"
                                @on-popper-show="popperShow"
                                transfer
                            >
                            <Input v-model="formAdd.icon" placeholder="点击选择图标" type="text" readonly>
                                <i v-if="formAdd.icon" slot="prefix" class="icon iconfont" :class="'icon'+formAdd.icon"></i>
                                <Icon v-else slot="prefix" type="ios-search"></Icon>
                            </Input>
                                <div class="api" slot="content">
                                    <IconSelect ref="iconSelect" @selected="selected" />
                                </div>
                            </Poptip>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="是否显示" :label-width="labelWidth">
                            <Input type="text" v-model="formAdd.isShow" placeholder="请输入是否显示">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="模块id" :label-width="labelWidth">
                            <Input type="text" v-model="formAdd.moduleId" placeholder="请输入模块id">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="父权限ID" :label-width="labelWidth">
                            <Input type="text" v-model="formAdd.parentId" placeholder="请输入父权限ID">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <!-- <Col :span="12">
                        <bingo-form-item label="数据编号" :label-width="labelWidth">
                            <Input type="text" v-model="formAdd.sn" placeholder="请输入数据编号" disabled>
                            </Input>
                        </bingo-form-item>
                    </Col>-->
                    <Col :span="12">
                        <bingo-form-item label="排序" :label-width="labelWidth">
                            <Input type="text" v-model="formAdd.sort" placeholder="请输入排序">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="类型" :label-width="labelWidth">
                            <Input type="text" v-model="formAdd.type" placeholder="请输入类型">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="路径" :label-width="labelWidth">
                            <Input type="text" v-model="formAdd.url" placeholder="请输入路径">
                            </Input>
                        </bingo-form-item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import bingoList from '@/components/bingo-list';
    import Api from '@/api/bmsa/setting/menu';
    import module from '@/mixins/module';
    import util from '@/util/tool'
    import IconSelect from '@/components/IconSelect'
    export default {
        data () {
            return {
                labelWidth: 90,
                columns: [
                    // {
                    //     title: '中文名称',
                    //     key: 'nameCn',
                    //     tree: true,
                    //     wdith:130
                    // },
                    {
                        title: '排序',
                        key: 'sort',
                        width: 80
                    },
                    {
                        title: '路径',
                        key: 'url',
                        width: 190
                    },
                    {
                        title: '类型',
                        key: 'typeName',
                        width: 80
                    },
                    // {
                    //     title: '是否显示',
                    //     key: 'isShow',
                    //     width: 130
                    // },
                    {
                        title: '图标',
                        key: 'icon',
                        width: 130
                    },
                    // {
                    //     title: '模块id',
                    //     key: 'moduleId'
                    // },
                    // {
                    //     title: '父权限ID',
                    //     key: 'parentId'
                    // },
                    {
                        title: '创建人',
                        key: 'creator',
                        width: 110
                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        width: 120
                    },
                    {
                        title: '修改人',
                        key: 'modifier',
                        width: 110
                    },
                    {
                        title: '修改时间',
                        key: 'modifyTime',
                        width: 120
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 130
                    }
                ],
                Api: Api,
                pageSetting: {
                    pageNum: 1,
                    pageSize: 20,
                    showSizer: true
                },
                // 搜索的字段
                searchList: [
                    {
                        label: '菜单名称',
                        value: 'nameCn',
                        type: 'input'
                    },
                    {
                        label: '图标',
                        value: 'icon',
                        type: 'input'
                    },
                    {
                        label: '是否显示',
                        value: 'isShow',
                        type: 'input'
                    },
                    // {
                    //     label: '模块id',
                    //     value: 'moduleId',
                    //     type: 'input'
                    // },
                    // {
                    //     label: '父权限ID',
                    //     value: 'parentId',
                    //     type: 'input'
                    // },
                    {
                        label: '类型',
                        value: 'type',
                        type: 'input'
                    },
                    {
                        label: '路径',
                        value: 'url',
                        type: 'input'
                    }
                ],
                tableData: [],
                queryData: {
                    nameCn: '',
                    nameDe: '',
                    nameEn: '',
                    icon: '',
                    isShow: '',
                    moduleId: '',
                    parentId: '',
                    sn: '',
                    type: '',
                    url: ''
                },
                queryObj: {},
                isShowNewForm: false,
                formAdd: {
                    nameCn: '',
                    nameDe: '',
                    nameEn: '',
                    icon: '',
                    isShow: '',
                    moduleId: '',
                    parentId: '',
                    sn: '',
                    sort: '',
                    type: '',
                    url: ''
                },
                grid: {
                    xl: 12,
                    lg: 13,
                    md: 13,
                    sm: 24,
                    xs: 24
                },
                typeList: [
                    {
                        label: '目录',
                        value: 0
                    },
                    {
                        label: '菜单',
                        value: 1
                    },
                    {
                        label: '按钮',
                        value: 2
                    }
                ],
                isAdd: true,
                defaultColDef: null,
                autoGroupColumnDef: null, // 分组
                groupDefaultExpanded: null // 树展开
            };
        },
        mounted () {
            this.defaultColDef = { flex: 1 };
            this.autoGroupColumnDef = {
                headerName: '菜单名称',
                minWidth: 300,
                cellRendererParams: { suppressCount: true }
                // rowDrag: true
            };
            this.groupDefaultExpanded = '-1';
        },
        mixins: [module],
        methods: {
            popperShow () {
                this.$refs.iconSelect.reset();
            },
            // 选择图标
            selected (name) {
                this.formAdd.icon = name
            },
            // 弹出层查询
            querySubmit (obj) {
                if (obj) {
                    this.queryObj = obj;
                }
                this.$refs.bingoList.getTableData(this.queryObj);
            },
            // 新建
            async onAddNew () {
                console.log(33)
                this.isAdd = true;
                for (let i in this.formAdd) {
                    if (Array.isArray(this.formAdd[i])) {
                        this.formAdd[i] = [];
                    } else {
                        this.formAdd[i] = '';
                    }
                }
                this.formAdd.sn = await this.getSn();
                this.isShowNewForm = true;
            },
            // 新建确定
            onOk () {
                if (this.isAdd) {
                    Api.addTable(this.formAdd).then(res => {
                        this.$Message.success('新建成功');
                        this.$refs.bingoList.getTableData();
                    })
                } else {
                    Api.editTable(this.formAdd).then(res => {
                        this.$Message.success('修改成功');
                        this.$refs.bingoList.getTableData();
                    })
                }
            },
            // 编辑
            onEditBtn (id) {
                this.isAdd = false;
                Api.getTableById(id).then(res => {
                    this.formAdd = res;
                    this.isShowNewForm = true;
                })
            },
            // 点击新建按钮
            handleContextMenuAdd (params) {
                if (params.node && params.node.data) {
                    this.formMenu.parentId = params.node.data.parentId;
                    this.formMenu.parentName = params.node.data.name[params.node.data.name.length - 2];
                } else {
                    this.formMenu.parentId = 0;
                    this.formMenu.parentName = '';
                }
                this.show = true;
            },
            // 新建子菜单
            handleContextMenuChildAdd (params) {
                if (params.node && params.node.data) {
                    this.formMenu.parentId = params.node.data.id;
                    this.formMenu.parentName = params.node.data.name[params.node.data.name.length - 1];
                } else {
                    this.formMenu.parentId = 0;
                    this.formMenu.parentName = '';
                }
                this.show = true;
            },
            // 处理数据
            processData (data) {
                data.forEach(item => {
                    let arr = this.typeList.filter(it => {
                        return it.value == item.type;
                    })
                    item.typeName = arr[0].label;
                    if (item.createTime) {
                        item.createTime = util.format(new Date(item.createTime), 'yyyy-MM-dd');
                    }
                    if (item.modifyTime) {
                        item.modifyTime = util.format(new Date(item.modifyTime), 'yyyy-MM-dd')
                    }
                });
                this.tableData = data;
            },
            // 右键
            getContextMenuItems (params) {
                let _this = this;
                var result = [
                    {
                        name: '新建菜单',
                        action: function () {
                            _this.handleContextMenuAdd(params)
                        }
                        // cssClasses: ['redFont', 'bold'],
                    },
                    {
                        name: '新建子菜单',
                        action: function () {
                            _this.handleContextMenuChildAdd(params)
                        }
                        // cssClasses: ['redFont', 'bold'],
                    }
                ];
                return result;
            }
        },
        components: { bingoList, IconSelect }
    };
</script>
