<template>
  <div>
    <component :is="myResourceType" :catalogID="catalogID" :content-type="contentType" :resource-dialog-props.sync="resourceDialogProps" :ID="ID" select-type="selection" content-height="calc(100vh - 10px)" @callback="changeData" ref="component"></component>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import ResourceDialogBody from '../contentcore/components/ResourceDialogBody.vue'
import contentSelect from '@src/components/contentComponent/CommonContent.vue'
import catalogSelect from '../contentcore/components/CatalogSelectorBody.vue'
import voteSelect from '../media/templateeditor/voteSelect.vue'
import adtSelect from '../media/templateeditor/zatverdiseSelect.vue'
import sinaWeibo from './components/sinaWeibo.vue'
import imagePlayer from '../article/components/imagePlayer.vue'
import imgcutting from '../article/components/imgcutting.vue'
export default {
  data() {
    return {
      myResourceType: '',
      catalogID: 0,
      contentType: '',
      ID: '',
      resourceDialogProps: {},
      datas: {},
      hasInsertFlag: false
    }
  },
  methods: {
    changeData(infos) {
      let html = ''
      if (_.isArray(infos)) {
        for (var i = 0; i < infos.length; i++) {
          let resourceData = this.formatData(infos[i])
          html += this.createTemplateData(resourceData)
        }
      } else {
        html = this.createTemplateData(this.formatData(infos))
      }
      window.editor.execCommand('insertHTML', html)
      window.dialog.close(false)
    },

    formatData(resouce) {
      let data = {}
      data.type = resouce.type || 'normal'
      data.relaID = resouce.resourceID
      data.name = resouce.oldName
      data.alt = resouce.oldName
      data.suffix = resouce.suffix
      data.prefix = resouce.previewPrefix
      data.width = resouce.width || '320'
      data.height = resouce.height || '240'
      let url = resouce.path
      data.url = (_.startsWith(url, 'http') ? '' : resouce.previewPrefix) + url
      // let path = resouce.resourcePath || resouce.path
      data.path = (_.startsWith(resouce.path, 'http') ? '' : resouce.previewPrefix) + resouce.path
      data.resourcePath = (_.startsWith(resouce.path, 'http') ? '' : resouce.previewPrefix) + (resouce.resourcePath || resouce.path)
      data.filedownURL = resouce.filedownURL
      data.videoPoster = resouce.poster ? resouce.poster : resouce.logoFile && resouce.logoFile.length ? resouce.previewPrefix + resouce.logoFile : ''
      data.display = resouce.displayStyle || ''
      return data
    },

    createTemplateData(resourceData) {
      let html = ''
      if (this.saveType === 'image') {
        let userPreferences = JSON.parse(localStorage.userPreferences)
        let showImageName = userPreferences.showImageName === 'Y'
        if (resourceData.type === 'net') {
          html = `<p style="text-align:center"><img src="${resourceData.resourcePath}" title="${resourceData.name}"/`
          if (showImageName) {
            html += `<p style="text-align:center">${resourceData.name}</p>`
          }
          html += '</p>'
        } else if (this.contentType === 'change') {
          html = `<img imagerela="${resourceData.relaID}" src="${resourceData.resourcePath}?${new Date().getTime()}" title="${resourceData.name}"  alt="${resourceData.alt}"/>`
        } else {
          var siteConfig = JSON.parse(localStorage.ContentQuickEditor_siteConfig)
          var articleImageWhetherOriginal = siteConfig && siteConfig.articleImageWhetherOriginal ? siteConfig.articleImageWhetherOriginal : 'N'
          if (articleImageWhetherOriginal === 'Y') {
            html = `<p style="text-align:center"><a href="${resourceData.path}" target="_blank"><img imagerela="${resourceData.relaID}" src="${resourceData.resourcePath}?${new Date().getTime()}" title="${resourceData.name}"  alt="${resourceData.alt}"/></a>`
          } else {
            html = `<p style="text-align:center"><img imagerela="${resourceData.relaID}" src="${resourceData.resourcePath}?${new Date().getTime()}" title="${resourceData.name}"  alt="${resourceData.alt}"/>`
          }
          if (showImageName) {
            html += `<p style="text-align:center">${resourceData.name}</p>`
          }
          html += '</p>'
        }
      } else if (this.saveType === 'audio') {
        html = '<audio src="' + resourceData.path + '" controls="controls" loop="loop" preload="load"></audio>'
      } else if (this.saveType === 'video') {
        html = `<video controls="controls" width="${resourceData.width}" height="${resourceData.height}" loop="loop" preload="auto" src="${
          resourceData.path
        }" poster="${resourceData.videoPoster}" display="${resourceData.display}"></video>`
      } else if (this.saveType === 'file') {
        let fileExt = resourceData.path.match(/.+\.([^.]+)$/) && resourceData.path.match(/.+\.([^.]+)$/)[1]
        let downloadUrl = resourceData.path
        if (this.resourceDialogProps.articleFileDownloadPath !== 'url') {
          if (resourceData.filedownURL) {
            downloadUrl = resourceData.filedownURL
          } else {
            downloadUrl = '{ContextPath}ui/contentcore/resource/download?ID=' + resourceData.relaID
          }
        }
        html = `<p><a href="${downloadUrl}" target="_blank" filerela="${resourceData.relaID}" title="${resourceData.name}"><img class="fileExt" src="${resourceData.prefix}images/filetype/${fileExt}.gif" />${resourceData.name}</a></p>`
      } else {
      }
      return html
    },
    async save() {
      await this.$children[0].confirm()
    }
  },
  components: {
    ResourceDialogBody,
    contentSelect,
    catalogSelect,
    voteSelect,
    adtSelect,
    sinaWeibo,
    imagePlayer,
    imgcutting
  },
  created() {
    this.myResourceType = util.url.getQueryValue(location.href, 'resourceType')
    this.saveType = this.myResourceType
    console.log(this.myResourceType)
    this.catalogID = util.url.getQueryValue(location.href, 'catalogID') || 0
    // let node = util.url.getQueryValue(location.href, 'node')
    this.contentType = util.url.getQueryValue(location.href, 'contentType')
    this.ID = util.url.getQueryValue(location.href, 'ID')
    let imageWidth = util.url.getQueryValue(location.href, 'imageWidth')
    let imageHeight = util.url.getQueryValue(location.href, 'imageHeight')
    let multiUpload = util.url.getQueryValue(location.href, 'multiUpload')
    let articleFileDownloadPath = util.url.getQueryValue(location.href, 'articleFileDownloadPath')
    let videoEdit = util.url.getQueryValue(location.href, 'edit')

    if (this.myResourceType === 'file') {
      this.resourceDialogProps = {
        selectorURL: 'fileResources',
        sourceType: 'upload',
        allowType:
          '.txt,doc,docx,xls,xlsx,ppt,pptx,swf,pdf,mp3,wma,wav,jpg,jpeg,gif,png,bmp,tiff,tif,ai,psd,mpg,mp4,rmvb,rm,mpeg,avi,wmv,mov,flv,fla,wmp,zip,rar,tar,gz,z,iso,cab,jar,ceb,wps',
        resourceType: 'file',
        catalogID: this.catalogID,
        url: '',
        imageWidth: imageWidth,
        imageHeight: imageHeight,
        articleFileDownloadPath: articleFileDownloadPath
      }
      this.myResourceType = 'ResourceDialogBody'
    } else if (this.myResourceType === 'image') {
      this.resourceDialogProps = {
        selectorURL: 'imageResources',
        sourceType: 'upload',
        allowType: '.jpg,jpeg,gif,png,bmp',
        resourceType: 'image',
        catalogID: this.catalogID,
        url: '',
        imageWidth: imageWidth,
        imageHeight: imageHeight,
        multiUpload: multiUpload
      }
      this.myResourceType = 'ResourceDialogBody'
    } else if (this.myResourceType === 'audio') {
      this.resourceDialogProps = {
        selectorURL: 'audioResources',
        sourceType: 'upload',
        allowType: '.mp3',
        resourceType: 'audio',
        catalogID: this.catalogID,
        url: '',
        imageWidth: imageWidth,
        imageHeight: imageHeight
      }
      this.myResourceType = 'ResourceDialogBody'
    } else if (this.myResourceType === 'video') {
      this.resourceDialogProps = {
        selectorURL: 'videoResources',
        sourceType: 'upload',
        allowType: '.avi,.wmv,.mov,.mpg,.mpeg,.flv,.rm,.rmvb,.mp4',
        resourceType: 'video',
        catalogID: this.catalogID,
        isEdit: videoEdit === 'yes',
        url: '',
        imageWidth: imageWidth,
        imageHeight: imageHeight
      }
      this.myResourceType = 'ResourceDialogBody'
    } else if (this.myResourceType === 'imageGroup') {
      this.myResourceType = 'contentSelect'
    } else if (this.myResourceType === 'imagePlayer') {
    } else if (this.myResourceType === 'catalogSelect') {
      this.resourceDialogProps = {
        insertEditor: true
      }
    }
    this.$nextTick(() => {
      this.$children[0].init()
    })
  }
}
</script>
