<template>
  <el-dialog v-dialogDrag :title="$t('map.autoTurnedList')" :visible.sync="show" width="85%" :before-do-close="doClose">
    <div>
      <QueryListPage
        ref="queryListPage"
        :pager-config="pagerConfig"
        :query-form="queryForm"
        :query-list="queryList"
      />
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { getAutoReentryList, delAutoReentry, getAutoReentryById, getRouteNewList } from '@/api/jmap/mapdraft';

export default {
    name: 'RouteDetail',
    props: {
        mapInfo: {
            type: Object,
            default() {
                return null;
            }
        }
    },
    data() {
        return {
            show: false,
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            routeList: [],
            queryForm: {
                labelWidth: '120px',
                queryObject: {
                    name: {
                        type: 'text',
                        label: this.$t('map.autoTurnedName')
                    },
                    code: {
                        type: 'text',
                        label: '折返进路code'
                    }
                }
            },
            queryList: {
                query: this.queryFunction,
                afterQuery: this.afterQuery,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('map.autoTurnedName'),
                        prop: 'name'
                    },
                    {
                        title: '折返进路code',
                        prop: 'code'
                    },
                    {
                        title: this.$t('map.routeStationName'),
                        prop: 'stationCode'
                    },
                    {
                        title: this.$t('map.reentryRoute'),
                        prop: 'turnBackRouteCode'
                    },
                    {
                        title: this.$t('map.basicRoute'),
                        prop: 'basicRouteCode'
                    },
                    {
                        title: this.$t('map.reentrySection'),
                        prop: 'reentryTrackCode'
                    },
                    {
                        title: this.$t('map.reentryRoute2'),
                        prop: 'turnBackRoute2Code'
                    },
                    {
                        title: this.$t('map.basicRoute2'),
                        prop: 'basicRoute2Code'
                    },
                    {
                        title: this.$t('map.reentrySection2'),
                        prop: 'reentryTrack2Code'
                    },
                    {
                        type: 'button',
                        title: this.$t('map.operation'),
                        width: '200',
                        buttons: [
                            {
                                name: this.$t('map.compile'),
                                handleClick: this.editObj
                            },
                            {
                                name: this.$t('map.deleteObj'),
                                handleClick: this.deleteObj,
                                type: 'danger'
                            }
                        ]
                    }
                ],
                actions: [
                    { text: this.$t('map.setPriority'), handler: this.setPriority }
                ]
            }
        };
    },
    computed: {
        ...mapGetters('map', [
            'sectionList',
            'stationList'
        ])
    },
    watch: {

    },
    mounted() {
    },
    methods: {
        doShow() {
            this.show = true;
            this.getRouteList();
            this.reloadTable();
        },
        doClose() {
            this.show = false;
        },
        queryFunction(params) {
            if (this.mapInfo && this.mapInfo.id) {
                return getAutoReentryList(this.mapInfo.id, params);
            }
        },
        afterQuery(data) {
            if (data && data.list) {
                const that = this;
                const list = data.list;
                if (list) {
                    list.map(elem => {
                        that.$convertSpecifiedField(elem, that.stationList, 'code', 'name', ['stationCode']);
                        that.$convertSpecifiedField(elem, that.sectionList, 'code', 'name', ['reentryTrackCode', 'reentryTrack2Code']);
                        that.$convertSpecifiedField(elem, that.routeList, 'code', 'name', ['turnBackRouteCode', 'basicRouteCode', 'turnBackRoute2Code', 'basicRoute2Code']);
                    });
                }
            }
            return data;
        },
        editObj(index, row) {
            getAutoReentryById(row.id).then(response => {
                const data = response.data;
                this.$emit('autoReentrySelected', data);
                this.doClose();
            });
        },
        deleteObj(index, row) {
            if (this.mapInfo && this.mapInfo.id && row) {
                // 删除
                delAutoReentry(row.id).then(response => {
                    this.$message.success(this.$t('map.successfullyDelete'));
                    this.reloadTable();
                }).catch(() => {
                    this.$messageBox(this.$t('map.failDelete'));
                });
            }
        },
        reloadTable() {
            if (this.queryList && this.queryList.reload) {
                this.queryList.reload();
            }
        },
        async getRouteList() {
            getRouteNewList(this.$route.params.mapId, {pageSize:9999, pageNum:1}).then((resp) => {
                this.routeList = resp.data.list;
            });
        },
        setPriority() {
            this.show = false;
            this.$emit('setPriority');
        }
    }
};
</script>
