<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
  </div>
</template>

<script>
import { getPublishMapInfo } from '@/api/jmap/map';
import { getSimulationRelpayList, delSimulationRecord } from '@/api/simulationRecord';
import { simulationRelpay } from '@/api/simulationRecord';
import { launchFullscreen } from '@/utils/screen';
import { UrlConfig } from '@/router/index';

export default {
    name: 'ManagementList',

    data() {
        return {
            EffectiveTypeList: [],
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '120px',
                queryObject: {
                    mapName: {
                        type: 'text',
                        label: this.$t('replay.mapName')
                    }
                }
            },
            queryList: {
                query: getSimulationRelpayList,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('replay.mapName'),
                        prop: 'mapName'
                    },
                    {
                        title: this.$t('replay.creatorId'),
                        prop: 'creatorId'
                    },
                    {
                        title: this.$t('replay.createTime'),
                        prop: 'createTime'
                    },
                    {
                        title: this.$t('global.status'),
                        prop: 'status',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.status, this.EffectiveTypeList, ['value', 'label']); },
                        tagType: (row) => {
                            switch (row.status) {
                            case '1': return 'success';
                            default: return 'danger';
                            }
                        }
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '250',
                        buttons: [
                            {
                                name: this.$t('replay.replay'),
                                handleClick: this.rePlay,
                                type: '',
                                showControl: (row) => { return row.status == '1'; }
                            },
                            {
                                name: this.$t('global.delete'),
                                handleClick: this.delete,
                                type: 'danger',
                                showControl: (row) => { return this.role; }
                            }
                        ]
                    }
                ]
            },

            currentModel: {}
        };
    },
    computed: {
        role() {
            return this.$store.state.user.roles.includes('04') ||
                    this.$store.state.user.roles.includes('05');
        }
    },
    mounted() {
        this.loadInitData();
    },
    methods: {
        loadInitData() {
            this.EffectiveTypeList = [];
            this.$Dictionary.effectiveType().then(list => {
                this.EffectiveTypeList = list.map(elem => { return { value: elem.code, label: elem.name }; });
            });
        },
        reloadTable() {
            this.queryList.reload();
        },
        rePlay(index, data) {
            getPublishMapInfo(data.mapId).then(resp => {
                const model = resp.data;
                simulationRelpay(data.id).then(rest => {
                    const query = { skinCode: model.skinCode, group: rest.data, replayId: data.id, createTime: data.createTime, destroyTime: data.destroyTime };
                    this.$router.push({ path: `${UrlConfig.display}/replay`, query: query });
                    launchFullscreen();
                });
            });
        },
        delete(index, data) {
            this.$confirm(this.$t('replay.wellDelReplay'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                delSimulationRecord(data.id).then(response => {
                    this.$message.success(this.$t('replay.deleteSuccess'));
                    this.reloadTable();
                }).catch(() => {
                    this.reloadTable();
                    this.$messageBox(this.$t('error.deleteFailedv'));
                });
            }).catch(() => { });
        }
    }
};
</script>
