<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <dictionary-edit ref="edit" @reloadTable="reloadTable" />
    <correlation-map ref="correlationMap" />
  </div>
</template>

<script>
import { getUserList } from '@/api/management/user';
import DictionaryEdit from './edit';
import CorrelationMap from './correlationMap';

export default {
    name: 'UserControl',
    components: {
        DictionaryEdit,
        CorrelationMap
    },
    data() {
        return {
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '80px',
                reset: true,
                queryObject: {
                    name: {
                        type: 'text',
                        label: this.$t('system.name')
                    },
                    roles: {
                        type: 'select',
                        label: this.$t('system.roles'),
                        config: {
                            data: this.$ConstSelect.roleList
                        }
                    }
                }

            },
            queryList: {
                query: getUserList,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('system.name'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('system.nickname'),
                        prop: 'nickname'
                    },
                    {
                        title: this.$t('global.mobile'),
                        prop: 'mobile'
                    },
                    {
                        title: this.$t('global.email'),
                        prop: 'email'
                    },
                    {
                        title: this.$t('system.roles'),
                        prop: 'roles',
                        type: 'tagMore',
                        columnValue: (row) => { return this.$convertField(row.roles, this.$ConstSelect.roleList, ['value', 'label'], true); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '250',
                        buttons: [
                            {
                                name: this.$t('global.edit'),
                                handleClick: this.handleUserEdit
                            },
                            {
                                name: this.$t('system.subscribeMap'),
                                handleClick: this.handleMapCorrelation,
                                type: 'danger'
                            }
                        ]
                    }
                ]
            },
            currentModel: {}
        };
    },
    created() {
    },
    methods: {
        // 编辑
        handleUserEdit(index, row) {
            this.$refs.edit.doShow(row);
        },

        // 删除
        handleUserDelete(index, row) {
            this.$confirm(this.$t('system.wellDelType'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                // delPublishMap(row.id).then(response => {
                //     this.$message.success('删除成功')
                //     this.reloadTable()
                //     localStore.remove('mapId')
                // }).catch(error => {
                //     this.reloadTable()
                //     this.$messageBox('删除失败')
                // })
            });
        },

        // 关联地图
        handleMapCorrelation(index, row) {
            this.$refs.correlationMap.doShow(row);
        },

        reloadTable() {
            this.queryList.reload();
        }
    }
};
</script>
