<template>
  <div class="layout-no-col">
    <h1 class="title">ZCMS3.X公共组件使用示例</h1>
    <el-row :gutter="20" style="width:100%">
      <el-col :span=12>
        <el-card >
           <div slot="header" class="clearfix">
            <span>上传图片功能示例(基于回调)</span>
          </div>
          <div>
            <el-button @click="uploadImage">上传图片</el-button>
            <img class="demo-preview" v-if="imgInfo.previewPath !== null" :src="imgInfo.previewPath" alt="">
          </div>
        </el-card>
      </el-col>
      <el-col :span=12>
        <el-card >
           <div slot="header" class="clearfix">
            <span>上传图片功能示例(基于事件)</span>
          </div>
          <div>
            <el-button @click="uploadImageWithEvent">上传图片</el-button>
            <img class="demo-preview" v-if="imgInfo2.previewPath !== null" :src="imgInfo2.previewPath" alt="">
          </div>
        </el-card>
      </el-col>
      <el-col :span=12>
        <el-card >
           <div slot="header" class="clearfix">
            <span>上传视频功能示例</span>
          </div>
          <div>
            <el-button @click="uploadVideo">上传视频</el-button>
             <video class="demo-preview" v-if="videoInfo.previewPath !== null" controls autoplay :src="videoInfo.previewPath" />
          </div>
        </el-card>
      </el-col>
      <el-col :span=12>
        <el-card >
           <div slot="header" class="clearfix">
            <span>上传音频功能示例</span>
          </div>
          <div>
            <el-button @click="uploadAudio">上传音频</el-button>
             <audio class="demo-preview" v-if="audioInfo.previewPath !== null" controls autoplay :src="audioInfo.previewPath" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <h2>使用注意事项</h2>
    <ul class="ul-tips">
      <li>需在 html 页面中引入 zcms.dll.js 和 zcmsCommon.js</li>
      <li>引入文件后会注入 zcmsCommon 全局对象, 可通过该全局对象调用相关公共组件方法</li>
      <li>上传组件提供 resourceUploaded 事件方式获取返回上传的资源，具体可参考 uploadImageWithEvent 方法</li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imgInfo: {
        previewPath: null
      },
      imgInfo2: {
        previewPath: null
      },
      videoInfo: {
        previewPath: null
      },
      audioInfo: {
        previewPath: null
      }
    }
  },
  methods: {
    uploadImage () {
      window.zcmsCommon.uploadImage('上传图片', {
        imageWidth: 650,
        imageHeight: 750
      }, (previewPath, filePath, resourceID) => {
        this.imgInfo.previewPath = previewPath
      })
    },
    uploadImageWithEvent () {
      // 空vue对象，用于跨组件通讯,名称必须为eventHub
      if (typeof window.eventHub === 'undefined') {
        window.eventHub = new Vue()
      }
      // 避免多次单击重复监听的情况，一般推荐讲监听方法定义在created或mounted生命周期
      window.eventHub.$off('resourceUploaded')
      // 定义事件监听
      window.eventHub.$on('resourceUploaded', (res) => {
        // res中包含previewPath, filePath, resourceID
        this.imgInfo2.previewPath = res.previewPath
      })
      // 调用上传方法
      window.zcmsCommon.uploadImage('上传图片', {
        imageWidth: 600,
        imageHeight: 700
      })
    },
    // 上传视频
    uploadVideo() {
      window.zcmsCommon.uploadVideo('上传视频', {
      }, (previewPath, filePath, resourceID) => {
        this.videoInfo.previewPath = previewPath
      })
    },
    // 上传音频
    uploadAudio() {
      window.zcmsCommon.uploadAudio('上传音频', {
      }, (previewPath, filePath, resourceID) => {
        this.audioInfo.previewPath = previewPath
      })
    }

  }
}
</script>
<style scoped>
  .layout-no-col {
    max-width: 1280px;
    margin: 0 auto
  }
  .title {
    width: 100%;
    padding-top: 100px;
    line-height: 100px;
    color: #aaa;
    text-align: center;
  }
  .demo-preview {
    display: block;
    max-width: 100%;
    margin-top: 20px
  }
  .ul-tips {
    padding: 10px 25px;
    font-size: 16px;
    line-height: 28px;
  }
</style>
