<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <edit ref="create" type="ADD" @reloadTable="reloadTable" />
    <edit ref="edit" type="EDIT" @reloadTable="reloadTable" />
    <config ref="config" @reloadTable="reloadTable" />
  </div>
</template>

<script>
import { getSkinCodePageList, delSkinCode } from '@/api/management/mapline';
import Edit from './edit';
import Config from './config';

export default {
    name: 'CommandDictionary',
    components: {
        Edit,
        Config
    },
    data() {
        return {
            taskStatusList: [],
            operateList: [],
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '80px',
                reset: true,
                queryObject: {
                    name: {
                        type: 'text',
                        label: '线路名称'
                    },
                    code: {
                        type: 'text',
                        label: '线路编号'
                    }
                }
            },
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: '线路编号', // 线路编号
                        prop: 'code'
                    },
                    {
                        title: '线路名称', // 线路编号
                        prop: 'name'
                    },
                    {
                        title: '线路坐标',
                        prop: 'origin',
                        type: 'tag',
                        columnValue: (row) => { return row.origin; },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: '缩放比例',
                        prop: 'scaling'
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '350',
                        buttons: [
                            {
                                name: this.$t('global.edit'),
                                handleClick: this.handleEdit
                            },
                            {
                                name: this.$t('global.delete'),
                                handleClick: this.handleDelete,
                                type: 'danger'
                            },
                            {
                                name: '查看配置项',
                                handleClick: this.handleConfig
                            }
                        ]
                    }
                ],
                actions: [
                    { text: this.$t('global.add'), handler: this.handleAdd }
                ]
            },

            currentModel: {}
        };
    },

    mounted () {
    },
    methods: {
        queryFunction(params) {
            return getSkinCodePageList(params);
        },
        // 编辑
        handleEdit(index, row) {
            this.$refs.edit.show(row);
        },
        // 新增指令
        handleAdd() {
            this.$refs.create.show();
        },
        handleDelete(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(() => {
                delSkinCode(row.id).then(response => {
                    this.$message.success(this.$t('system.deleteSuccess'));
                    this.reloadTable();
                }).catch(() => {
                    this.reloadTable();
                    this.$messageBox(this.$t('error.deleteFailed'));
                });
            });
        },
        handleConfig(index, row) {
            this.$refs.config.show(row);
        },
        reloadTable() {
            this.queryList.reload();
        }
    }
};
</script>
