<template>
  <el-dialog v-dialogDrag title="切换地图" :visible.sync="dialogVisible" width="20%" center>
    <el-select v-model="selectMapId" placeholder="请选择地图" style="width: 60%; position: relative; left: 20%;" @change="changeMap">
      <el-option
        v-for="item in projectMapList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
      <el-button @click="dialogVisible = false">{{ $t('global.cancel') }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getMapListByProjectCode } from '@/api/jmap/map';
export default {
    name:'ChangeMap',
    data() {
        return {
            projectMapList:[],
            dialogVisible: false,
            selectMapId:'',
            selectMapLineCode:''
        };
    },
    mounted() {
        const projectCode = 'DRTS';
        getMapListByProjectCode(projectCode).then(res =>{
            if (res.code === 200) {
                const projectMapList = res.data;
                projectMapList.forEach(element => {
                    this.projectMapList.push({id:element.id, lineCode:element.lineCode, name:element.name});
                });
                this.selectMapId = this.$route.query.mapId;
                this.selectMapLineCode = this.$route.query.lineCode;
            }
        }).catch(error => { this.$message.error(error.msg); });
    },
    methods:{
        doShow(row) {
            this.dialogVisible = true;
        },
        confirm() {
            this.dialogVisible = false;
            const query = Object.assign({}, this.$route.query);
            query.lineCode = this.selectMapLineCode;
            query.mapId = this.selectMapId;
            this.$emit('changeMap', query);
        },
        changeMap(mapId) {
            const map = this.projectMapList.find(map=>{ return map.id == mapId; });
            if (map) {
                this.selectMapId = map.id;
                this.selectMapLineCode = map.lineCode;
            }
        }
    }
};
</script>
