<template>
  <Modal
    class="th-provider"
    v-model="assetDlg"
    :mask-closable="false"
    width="1000"
    height="600"
    :title="`选择`+assetTitle"
    :styles="{ top: '60px' }"
  >
    <div class="th-list-wrapper">
      <div class="groups inline" v-show="filters.length>1">
        <div
          class="menu"
          :class="{ active: selectedMenu === menu.type }"
          v-for="menu in showMenus"
          :key="menu.type"
          @click="menuChange(menu)"
        >
          <div :class="`th-icon inline th-${menu.icon}`"></div>
          {{ menu.name }}
        </div>
      </div>
      <div class="sources inline" :class="{fullModal:filters.length===1}">
        <AssetPanel
         :type="type"
         :hideChange="assetDlg"
         :showEmptyAsset="showEmptyAsset"
          @on-select="itemSelectChange"
          :selectedMenu="selectedMenu"
          :editByUrl="editUrl"
          :assetTitle="assetTitle"
        />
      </div>
    </div>
    <template #footer>
      <div class="btn-group">
        <Input
          class="url"
          v-model="finalUrl"
          @on-change="changeUrl"
          type="text"
        />
        <div class="btn inline" @click="hide">取消</div>
        <div class="btn inline" @click="onOk">确定</div>
      </div>
    </template>
  </Modal>
</template>

<script>
import util from '../../libs/util'
import AssetPanel from './AssetPanel.vue'
export default {
  props:{
    value:{
      type:String,
      default:''
    },
    type: {
      type: String,
      default: 'image',
      validator: value => {
        return ['image', 'json', 'video'].indexOf(value) !== -1
      }
    },
    filters: {
      type: Array,
      default: () => ['title', 'backgroundImage','icon','border','video','custom']
    },
    assetTitle:{
      type:String,
      default:'素材'
    },
    showEmptyAsset:{
      type:Boolean,
      default:false
    }
  },
  components: { AssetPanel },
  methods: {
    show(option) {
      this.assetDlg = true
      this.options = option
    },
    hide() {
      this.assetDlg = false
      this.$emit('on-close')
    },
    onOk() {
      this.$emit('input', this.finalUrl)
      this.$emit('on-change', this.finalUrl)
      if (this.options.onSelect) {
        this.options.onSelect(this.finalUrl)
      }
      this.hide()
    },
    menuChange(menu) {
      this.selectedItem = null
      this.selectedMenu = menu.type
    },
    itemSelectChange(item) {
      this.editUrl = false
      this.selectedItem = item
    },
    changeUrl() {
      this.editUrl = true
      this.selectedItem = null
    },
    getShowMenus(filters){
      let items = []
      filters.forEach(filter => {
        if (filter === 'title') {
          items.push({
            type: 'title',
            icon: 'icon-title',
            name: '标题栏'
          })
        } else if (filter === 'backgroundImage') {
          items.push({
            type: 'backgroundImage',
            icon: 'icon-backgroundImage',
            name: '背景图'
          })
        }else if (filter === 'icon') {
          items.push({
            type: 'icon',
            icon: 'icon-icon',
            name: '图标'
          })
        }else if (filter === 'border') {
          items.push({
            type: 'border',
            icon: 'icon_border',
            name: '边框'
          })
        }else if (filter === 'video') {
          items.push({
            type: 'video',
            icon: 'icon_video',
            name: '视频'
          })
        }else if (filter === 'custom') {
          items.push({
            type: 'custom',
            icon: 'icon_custom',
            name: '自定义'
          })
        }
      })
      this.showMenus= items
      if(this.showMenus.length===1){
        this.selectedMenu=this.showMenus[0].type
      }
    }
  },
  mounted(){
    this.getShowMenus(this.filters)
  },
  data() {
    return {
      assetDlg: false,
      selectedItem: null,
      selectedMenu: 'title',
      options: {},
      editUrl: false,
      finalUrl:'',
      showMenus:[]
    }
  },
  computed: {
    selectedUrl(){
      if (this.selectedItem) {
        if (this.selectedItem==='empty') {
          return ''
        } else {
          return this.selectedItem
          ? `${util.getAPI('assets')}/${this.selectedItem.owner}/${
              this.selectedItem.assetId
            }`
          : ''
        }
      }else{
        return ''
      }
    },
  },
  watch:{
    selectedUrl(newV){
      this.finalUrl = newV
    },
    value(newV){
      this.finalUrl=newV
    }
  }
}
</script>
