<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" @on-click="refreshStyleList"/>
          <IconButton name="md-add" :size="22" @on-click="createStyle" v-if="styleScope==='private'"/>
        </div>
      </div>
      <ThRadioGroup
        v-model="styleScope"
        :btns="[
          { name: '我的地图', value: 'private' },
          { name: '公共地图', value: 'public' },
        ]"
        @on-change="styleScopeChange"
        style="width: 150px;float: right;" 
      />
    </div>
    <div class="bottom">
      <BmapList :styleList="filteredList" :styleScope="styleScope" :withCreate="false" size="small" @on-selected="styleSelect" @on-refersh="refreshStyleList"/>
      <NewMapModal type="bmap" ref="newStyleModal" @on-refersh="refreshStyleList"/>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import config from '../../constants/config'
import NewMapModal from '../new-map-modal'
import BmapList from '../bmap-list'
import comparators from '../../libs/comparators'
import IconButton from '../icon-button'
import {getStyleList} from '../../libs/request'
import ThRadioGroup from '../th-radio-group'
export default {
  components: {BmapList,NewMapModal,IconButton,ThRadioGroup},
  methods: {
    getStyles(ownerId){
      getStyleList(ownerId).then(res=>{
        let newList = []
        res.data.forEach(lt => {
          let id = lt.styleId.replace('.draft', '')
          let index = newList.findIndex(nl => nl.styleId === id)
          if (index === -1) {
            lt.locked = lt.metadata ? lt.metadata.locked : false
            if (lt.styleId.endsWith('.draft')) {
              // draft版本
              lt.styleId = 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.styleId.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.styleList= newList
        this.styleLoaded=true
      })
    },
    styleScopeChange(value){
      this.styleScope=value
      this.refreshStyleList()
    },
    refreshStyleList() {
      this.styleList=[]
       let ownerId=null
      if(this.styleScope==="private"){
        ownerId = config.USER
      }else{
        ownerId = config.PUBLIC_USER
      }
      this.getStyles(ownerId)
    },
    createStyle() {
      this.$refs.newStyleModal.show()
    },
    styleSelect(item) {
      this.$emit('on-select', item)
    },
  },
  mounted() {
    if (!this.styleLoaded) {
      this.refreshStyleList()
    }
  },
  data() {
    return {
      sortBy: 'updatedAt',
      keyword: '',
      styleList:[],
      styleLoaded:false,
      styleScope:'private'
    }
  },
  computed: {
    filteredList() {
      let keyword = this.keyword.trim()
      let filteredList = []
      if (keyword) {
        filteredList = this.styleList.filter(styleSheet => styleSheet.name.indexOf(keyword) !== -1)
      } else {
        filteredList = _.cloneDeep(this.styleList)
      }
      return filteredList.sort(comparators[this.sortBy])
    }
  }
}
</script>
