<template>
  <div class="th-provider-panel">
    <div class="top">
      <div class="top-left">
        <Input search clearable class="search inline" placeholder="请输入关键词筛选" v-model="keyword"/>
        <div class="tools inline">
          <IconButton name="md-refresh" :size="22" title="刷新" @on-click="refreshMapList"/>
          <IconButton name="md-add" :size="22" title="添加数据" @on-click="showNewMapDlg"  v-if="mapScope==='private'"/>
        </div>
      </div>
      <ThRadioGroup
        v-model="mapScope"
        :btns="[
          { name: '我的地图', value: 'private' },
          { name: '公共地图', value: 'public' },
        ]"
        @on-change="mapScopeChange"
        style="width: 150px;float: right;" 
      />
    </div>
    <div class="bottom">
      <VmapList :mapList="filteredList" :mapScope="mapScope" :withCreate="false" size="small" @on-selected="mapSelect" @on-refersh="refreshMapList"/>
      <NewMapModal type="vmap" ref="NewMapModal" @on-refersh="refreshMapList"/>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import config from '../../constants/config'
import {getMapList} from '../../libs/request'
import VmapList from '../vmap-list'
import NewMapModal from '../new-map-modal'
import comparators from '../../libs/comparators'
import IconButton from '../icon-button'
import ThRadioGroup from '../th-radio-group'
export default {
  components: {VmapList,NewMapModal,IconButton,ThRadioGroup},
  methods: {
    getMaps(ownerId){
      getMapList(ownerId).then(res=>{
        let newList = []
        res.data.forEach(lt => {
          let id = lt.mapId.replace('.draft', '')
          let index = newList.findIndex(nl => nl.mapId === id)
          if (index === -1) {
            lt.locked = lt.metadata ? lt.metadata.locked : false
            if (lt.mapId.endsWith('.draft')) {
              // draft版本
              lt.mapId = id
              lt.hasDrafted = true
              lt.hasPublished = false
            } else {
              // publish版本
              lt.hasDrafted = false
              lt.hasPublished = true
              lt.publishedAt = lt.updatedAt
            }
            newList.push(lt)
          } else {
            if (lt.mapId.endsWith('.draft')) {
              newList[index].hasDrafted = true
              newList[index].updatedAt = lt.updatedAt // 修改时间和创建时间始终以draft版本为准
              newList[index].createdAt = lt.createdAt
              if (lt.thumbnail) {
                newList[index].thumbnail = lt.thumbnail
              }
            } else {
              newList[index].hasPublished = true
              newList[index].publishedAt = lt.updatedAt
            }
          }
        })
        this.mapList= newList
        this.mapLoaded=true
      })
    },
    mapScopeChange(value){
      this.mapScope=value
      this.refreshMapList()
    },
    refreshMapList() {
      this.mapList=[]
      let ownerId=null
      if(this.mapScope==="private"){
        ownerId = config.USER
      }else{
        ownerId = config.PUBLIC_USER
      }
      this.getMaps(ownerId)
    },
    mapSelect(item) {
      this.$emit('on-select', item)
    },
    showNewMapDlg() {
      this.$refs.NewMapModal.show()
    },
  },
  mounted() {
    if (!this.mapLoaded) {
      this.refreshMapList()
    }
  },
  data() {
    return {
      sortBy: 'updatedAt',
      keyword: '',
      mapList:[],
      mapLoaded:false,
      mapScope:'private'
    }
  },
  computed: {
    filteredList() {
      let keyword = this.keyword.trim()
      let filteredList = []
      if (keyword) {
        filteredList = this.mapList.filter(tileset => tileset.name.indexOf(keyword) !== -1)
      } else {
        filteredList = _.cloneDeep(this.mapList)
      }
      return filteredList.sort(comparators[this.sortBy])
    }
  }
}
</script>
