<template>
  <Modal
    class="th-provider"
    v-model="dlg"
    :mask-closable="false"
    width="1000"
    title="选择地图"
    :styles="{ top: '60px' }"
  >
    <div class="th-list-wrapper">
      <div class="groups inline">
        <div
          class="menu"
          :class="{ active: selectedMenu === menu.type }"
          v-for="menu in menus"
          :key="menu.type"
          @click="menuChange(menu)"
        >
          <Icon
            :type="menu.icon"
            color="#2d8cf0"
            size="20"
            style="margin-right: 5px"
          />
          {{ menu.name }}
        </div>
      </div>
      <div class="sources inline">
        <StylePanel
          @on-select="itemSelectChange"
          v-if="selectedMenu === 'basemap'"
        />
        <MapPanel @on-select="itemSelectChange" v-if="selectedMenu === 'vmap'" />
        <ServicePanel
          :url="url"
          :type="type"
          @on-change="urlChange"
          v-if="selectedMenu === 'service'"
        />
      </div>
    </div>
    <template #footer>
      <Button @click="hide">取消</Button>
      <Button type="primary" @click="onOk">确定</Button>
    </template>
  </Modal>
</template>

<script>
import MapPanel from './MapPanel.vue'
import StylePanel from './StylePanel.vue'
import ServicePanel from './ServicePanel.vue'
import util from '../../libs/util'
export default {
  components: { MapPanel, StylePanel, ServicePanel },
  props: [],
  methods: {
    show(options) {
      this.dlg = true
      this.selectedMenu = 'basemap'
      this.type = options.map.type
      this.url = options.map.style
    },
    hide() {
      this.keyword = ''
      this.selectedMenu = ''
      this.dlg = false
    },
    async onOk() {
      if (this.selectedUrl) {
        this.$emit('on-change', {
          type: this.selectedMenu,
          style: this.selectedUrl,
        })
        this.hide()
      } else {
        this.$Message.warning('未选中')
      }
    },
    menuChange(menu) {
      this.selectedMenu = menu.type
    },
    itemSelectChange(item) {
      if (this.selectedMenu === 'basemap') {
        if (item.hasPublished) {
          this.selectedUrl = item
            ? `${util.getAPI('styles')}/${item.owner}/${item.styleId}`
            : ''
        } else {
          this.selectedUrl = item
            ? `${util.getAPI('styles')}/${item.owner}/${item.styleId}.draft`
            : ''
        }
      } else {
        if (item.hasPublished) {
          this.selectedUrl = item
            ? `${util.getAPI('maps')}/${item.owner}/${item.mapId}`
            : ''
        } else {
          this.selectedUrl = item
            ? `${util.getAPI('maps')}/${item.owner}/${item.mapId}.draft`
            : ''
        }
      }
    },
    urlChange(url) {
      this.selectedUrl = url
    },
  },
  data() {
    return {
      dlg: false,
      selectedMenu: 'basemap',
      selectedUrl: '',
      menus: [
        {
          type: 'basemap',
          icon: 'md-map',
          name: '基础底图',
        },
        {
          type: 'vmap',
          icon: 'md-pricetag',
          name: '专题地图',
        },
        {
          type: 'service',
          icon: 'md-link',
          name: '外部服务',
        },
      ],
      url:'',
      type:''
    }
  },
  computed: {},
}
</script>
