<template>
  <div  class="">
    <content-info :content.sync='mContent'  @catalog-change="catalogChange" :site-config="siteConfig" :catalog-id="catalogId">
      <div slot="afterEditor">
        <div class="panel-fieldset">
          <el-form-item prop="isExternalURL" label="类型">
            <el-radio-group v-model="isExternalURL">
              <el-radio v-for="item in uploadType" :key="item.value" :value="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="panel-fieldset">
          <el-form-item prop="file" label="上传" v-if="isExternalURL=='N'">
            <upload-file ref="uploadFile" :allow-type="mContent.allowType" :file.sync="mContent.file" @set-title="setTitle"></upload-file>
          </el-form-item>
          <el-form-item prop="externalSource" label="远程地址" v-show="isExternalURL!='N'">
            <el-row>
              <el-col :span="20">
                <el-input v-model="mContent.externalSource"  type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="http://"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </div>

        <div class="panel-fieldset" v-if="content.ID">
          <el-form-item prop="audioPlayer" label="音频" >
            <el-row>
              <el-col :span="20">
                <audio-player :src="content.isExternalURL=='Y'?content.externalSource:prefix+content.path+content.fileName" :title="content.isExternalURL=='Y'?'网络音频':content.oldFileName"  :auto-play="true"></audio-player>
              </el-col>
            </el-row>
          </el-form-item>
        </div>
      </div>
      {{mContent.allowType}}
      <div slot="fileExif" v-show="mContent.ID">
        <el-collapse-item title="音频信息" name="3" class="sidebar-item-box">
          <el-form label-width="70px" >
            <el-form-item label="原名称">
              <span>{{mContent.oldFileName}}</span>
            </el-form-item>
            <el-form-item label="大小">
              <span>{{mContent.fileSize}}</span>
            </el-form-item>
            <el-form-item label="类型">
              <span>{{mContent.suffix}}</span>
            </el-form-item>
            <el-form-item label="时长">
              <span>{{mContent.duration}}</span>
            </el-form-item>
            <el-form-item label="专辑">
              <span>{{mContent.albumName}}</span>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </div>
    </content-info>
  </div>
</template>
<script>
import ContentInfo from '../../contentcore/components/ContentInfo.vue'
import UploadFileComponent from '../../contentcore/components/UploadFileComponent.vue'
import AudioPlayer from '@src/components/AudioPlayer.vue'
export default {
  components: {
    'content-info': ContentInfo,
    'upload-file': UploadFileComponent,
    'audio-player': AudioPlayer
  },
  props: {
    content: {
      type: Object,
      required: true
    },
    siteConfig: {
      type: Object
    },
    contentId: {
      type: [String, Number]
    },
    catalogId: {
      type: [String, Number]
    }
  },
  computed: {
    mContent: {
      set(val) {
        this.$emit('update:content', val)
      },
      get() {
        return this.content
      }
    },
    isExternalURL: {
      set(val) {
        this.content.isExternalURL = val
      },
      get() {
        return this.content.isExternalURL ? this.content.isExternalURL : 'N'
      }
    }
  },
  data() {
    return {
      prefix: window.app ? window.app.prefix : window.opener && window.opener.app ? window.opener.app.prefix : '',
      uploadType: [ //  {name:'本地上传'value:'N'},{name:'网络',value:'Y'},{name:'第三方云服务',value:'S'}
        { name: '本地上传', value: 'N' },
        { name: '网络', value: 'Y' }
      ]
    }
  },
  methods: {
    setTitle(val) {
      let roter = this.$router.currentRoute.path
      if (roter.endsWith('/new')) {
        if (val.lastIndexOf('.') !== -1) {
          this.mContent.title = val.substring(0, val.lastIndexOf('.'))
        } else {
          this.mContent.title = val
        }
      }
    },
    catalogChange(catalog) {
      this.$emit('catalog-change', catalog)
    }
  }
}
</script>
