<template>
  <el-form ref="form" label-width="120px" style="max-width:600px">
    <el-form-item label="">
      <el-switch
        v-model="formData.type"
        active-text="纯音频模块"
        inactive-text="视频模块">
      </el-switch>
    </el-form-item>
    <div v-if="!formData.type">

      <el-form-item label="视频">
        <div style="margin: 10px">
          <el-button @click="uploadType = true" v-if="!uploadType">地址上传</el-button>
          <el-button @click="uploadType = false" v-if="uploadType">文件上传</el-button>
        </div>
        <el-upload
          class="upload-demo"
          drag
          v-if="!uploadType"
          :http-request="uploadFileVideo"
          :file-list="formData.video"
          :before-upload="beforeAvatarVideo"
          :on-exceed="handleExceed"
          :on-remove="removeFileVideo"
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
            <br>
            <span style="color: #888888;font-size: 12px">只能上传MP4文件</span>
          </div>
          <div class="el-upload__tip" slot="tip"></div>
        </el-upload>
        <el-input v-if="uploadType" v-for="(data,index) in formData.video" :key="index" style="margin-bottom: 10px" v-model="data.url">
          <i slot="suffix" class="el-input__icon el-icon-delete" @click="delVideo(data)"></i>
        </el-input>
        <div v-if="uploadType" style="text-align: center">
          <el-button @click="pushNewVideo">添加视频</el-button>
        </div>
      </el-form-item>
      <el-form-item label="是否切换">
        <el-switch
          v-model="formData.change"
          active-text="开"
          inactive-text="关">
        </el-switch>
      </el-form-item>
      <el-form-item label="切换音频" v-if="formData.change">
        <div style="margin: 10px">
          <el-button @click="uploadType = true" v-if="!uploadType">地址上传</el-button>
          <el-button @click="uploadType = false" v-if="uploadType">文件上传</el-button>
        </div>
        <el-upload
          v-if="!uploadType"
          class="upload-demo"
          :before-upload="beforeAvatarAudio"
          :http-request="uploadFileAudio"
          :file-list="formData.audio"
          :on-exceed="handleExceed"
          :on-remove="removeFileAudio"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
            <br>
            <span style="color: #888888;font-size: 12px">只能上传MP3文件</span>
          </div>
        </el-upload>
        <el-input v-if="uploadType" v-for="(data,index) in formData.audio" :key="index" style="margin-bottom: 10px" v-model="data.url">
          <i slot="suffix" class="el-input__icon el-icon-delete" @click="delAudio(data)"></i>
        </el-input>
        <div v-if="uploadType" style="text-align: center">
          <el-button @click="pushNewAudio">添加音频</el-button>
        </div>
      </el-form-item>
      <div v-if="formData.change" v-for="(data,index) in formData.audio" :key="index" class="mp3-block">
        <h3>
          {{data.name}}
        </h3>
        <el-form-item :label="`音频${index + 1}图片`">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadFileImage"
            :before-upload="beforeAvatarImage"
            :data="data"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-success="uploadImgSuccess"
            :show-file-list="false">
            <img v-if="data.image" :src="data.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item :label="`音频${index + 1}标题`">
          <el-input v-model="data.title"></el-input>
        </el-form-item>
        <el-form-item :label="`音频${index + 1}说明`">
          <el-input v-model="data.tips"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="是否分龄">
        <el-switch
          v-model="formData.age"
          active-text="是"
          inactive-text="否">
        </el-switch>
      </el-form-item>
      <!--分龄-->
      <el-form-item label="视频" v-if="formData.age">
        <div style="margin: 10px">
          <el-button @click="uploadType = true" v-if="!uploadType">地址上传</el-button>
          <el-button @click="uploadType = false" v-if="uploadType">文件上传</el-button>
        </div>
        <el-upload
          class="upload-demo"
          drag
          v-if="!uploadType"
          :http-request="uploadFileVideo2"
          :before-upload="beforeAvatarVideo"
          :file-list="formData.video2"
          :on-exceed="handleExceed"
          :on-remove="removeFileVideo2"
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
            <br>
            <span style="color: #888888;font-size: 12px">只能上传MP4或AVI文件</span>
          </div>
          <div class="el-upload__tip" slot="tip"></div>
        </el-upload>
        <el-input v-if="uploadType" v-for="(data,index) in formData.video2" :key="index" style="margin-bottom: 10px" v-model="data.url">
          <i slot="suffix" class="el-input__icon el-icon-delete" @click="delVideo2(data)"></i>
        </el-input>
        <div v-if="uploadType" style="text-align: center">
          <el-button @click="pushNewVideo2">添加视频</el-button>
        </div>
      </el-form-item>
      <el-form-item label="是否切换" v-if="formData.age">
        <el-switch
          v-model="formData.change2"
          active-text="开"
          inactive-text="关">
        </el-switch>
      </el-form-item>
      <el-form-item label="切换音频" v-if="formData.age && formData.change2">
        <div style="margin: 10px">
          <el-button @click="uploadType = true" v-if="!uploadType">地址上传</el-button>
          <el-button @click="uploadType = false" v-if="uploadType">文件上传</el-button>
        </div>
        <el-upload
          v-if="!uploadType"
          class="upload-demo"
          :http-request="uploadFileAudio2"
          :before-upload="beforeAvatarAudio"
          :file-list="formData.audio2"
          :on-exceed="handleExceed"
          :on-remove="removeFileAudio2"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
            <br>
            <span style="color: #888888;font-size: 12px">只能上传MP3文件</span>
          </div>
        </el-upload>
        <el-input v-if="uploadType" v-for="(data,index) in formData.audio2" :key="index" style="margin-bottom: 10px" v-model="data.url">
          <i slot="suffix" class="el-input__icon el-icon-delete" @click="delAudio2(data)"></i>
        </el-input>
        <div v-if="uploadType" style="text-align: center">
          <el-button @click="pushNewAudio2">添加音频</el-button>
        </div>
      </el-form-item>
      <div v-if="formData.change2 && formData.age" v-for="(data,index) in formData.audio2" :key="index" class="mp3-block">
        <h3>
          {{data.name}}
        </h3>
        <el-form-item :label="`音频${index + 1}图片`">
          <el-upload
            class="avatar-uploader"
            :before-upload="beforeAvatarImage"
            :http-request="uploadFileImage"
            :data="data"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-success="uploadImgSuccess"
            :show-file-list="false">
            <img v-if="data.image" :src="data.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item :label="`音频${index + 1}标题`">
          <el-input v-model="data.title"></el-input>
        </el-form-item>
        <el-form-item :label="`音频${index + 1}说明`">
          <el-input v-model="data.tips"></el-input>
        </el-form-item>
      </div>
    </div>
    <div v-if="formData.type">
      <el-form-item label="切换音频">
        <el-upload
          class="upload-demo"
          :http-request="uploadFileAudio"
          :before-upload="beforeAvatarAudio"
          :file-list="formData.audio"
          :on-exceed="handleExceed"
          :on-remove="removeFileAudio"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
            <br>
            <span style="color: #888888;font-size: 12px">只能上传MP3文件</span>
          </div>
        </el-upload>
      </el-form-item>
      <div v-for="(data,index) in formData.audio" :key="index" class="mp3-block">
        <h3>
          {{data.name}}
        </h3>
        <el-form-item :label="`音频${index + 1}图片`">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadFileImage"
            :before-upload="beforeAvatarImage"
            :data="data"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-success="uploadImgSuccess"
            :show-file-list="false">
            <img v-if="data.image" :src="data.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item :label="`音频${index + 1}标题`">
          <el-input v-model="data.title"></el-input>
        </el-form-item>
        <el-form-item :label="`音频${index + 1}说明`">
          <el-input v-model="data.tips"></el-input>
        </el-form-item>
      </div>
    </div>
    </el-form>
</template>

<script>
  import {uploadFileApi} from "../../service/api";
  export default {
    props:[
      'formData'
    ],
    name: "videoUpload",
    data(){
      return {
        uploadType:false
      }
    },
    methods:{
      beforeAvatarImage(file){
        const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png' );
        const isLt2M = file.size / 1024  < 400;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 400KB!');
        }
        return isJPG && isLt2M;
      },
      // 添加视频按钮
      pushNewVideo(){
        this.formData.video.push({name:'地址输入文件',url:''})
      },
      // 视频文件限制
      beforeAvatarVideo(file){
        const isJPG = (file.type === 'video/mp4' );
        if (!isJPG) {
          this.$message.error('上传视频只能是MP4格式!');
        }
        return isJPG;
      },
      // 音频文件限制
      beforeAvatarAudio(file){
        const isJPG = (file.type === 'audio/mp3' );
        if (!isJPG) {
          this.$message.error('上传视频只能是MP4格式!');
        }
        return isJPG;
      },
      // 添加音频按钮
      pushNewAudio(){
        this.formData.audio.push({name:'地址录入文件',url:'',title:'',tips:'',image:''})
      },
      // 删除视频
      delVideo(data){
        let i = this.formData.video.indexOf(data);
        this.formData.video.splice(i,1)
      },
      // 删除音频
      delAudio(data){
        let i = this.formData.audio.indexOf(data);
        this.formData.audio.splice(i,1)
      },
      // 添加视频2
      pushNewVideo2(){
        this.formData.video2.push({name:'地址输入文件',url:''})
      },
      // 添加音频2
      pushNewAudio2(){
        this.formData.audio2.push({name:'地址录入文件',url:'',title:'',tips:'',image:''})
      },
      // 珊瑚视频2
      delVideo2(data){
        let i = this.formData.video2.indexOf(data);
        this.formData.video2.splice(i,1)
      },
      // 删除音频2
      delAudio2(data){
        let i = this.formData.audio2.indexOf(data);
        this.formData.audio2.splice(i,1)
      },
      // 上传视频
      uploadFileVideo(a){
          uploadFileApi({file:a.file,type:'local',obj:a}).then(res=>{
            this.$message({
              type: 'success',
              message: '上传成功!'
            });
            this.formData.video.push({name:res.name,url:process.env.IMAGE_URL_HEAD + res.url});
          })
      },
      // 上传视频2
      uploadFileVideo2(a){
          uploadFileApi({file:a.file,type:'local',obj:a}).then(res=>{
            this.$message({
              type: 'success',
              message: '上传成功!'
            });
            this.formData.video2.push({name:res.name,url:process.env.IMAGE_URL_HEAD + res.url});
          })
      },
      // 上传音频
      uploadFileAudio(a){
          uploadFileApi({file:a.file,type:'local',obj:a}).then(res=>{
            this.$message({
              type: 'success',
              message: '上传成功!'
            });
            a.onSuccess('上传成功')
            this.formData.audio.push({name:res.name,url:process.env.IMAGE_URL_HEAD + res.url,title:'',tips:'',image:''});
          })
      },
      // 上传音频2
      uploadFileAudio2(a){
          uploadFileApi({file:a.file,type:'local',obj:a}).then(res=>{
            this.$message({
              type: 'success',
              message: '上传成功!'
            });
            a.onSuccess('上传成功');
            this.formData.audio2.push({name:res.name,url:process.env.IMAGE_URL_HEAD + res.url,title:'',tips:'',image:''});
          })
      },
      // 移除
      removeFileVideo(file,fileList){
        this.formData.video = fileList
      },
      // 移除
      removeFileVideo2(file,fileList){
        this.formData.video2 = fileList
      },
      // 移除
      removeFileAudio(file,fileList){
        this.formData.audio = fileList
      },
      // 移除
      removeFileAudio2(file,fileList){
        this.formData.audio2 = fileList
      },
      handleExceed(){
      },
      uploadFileImage(a){
        uploadFileApi({file:a.file,type:'local',obj:a}).then(res=>{
          a.data.image = process.env.IMAGE_URL_HEAD + res.url;
          this.$message({
            type: 'success',
            message: '上传成功!'
          });
          a.onSuccess('上传成功')
        });
      },
      uploadImgSuccess(a,b,c){
      }
    }
  }

</script>
<style scoped lang="less">
  .mp3-block{
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 20px;
    margin: 10px;
    h3{
      text-align: center;
    }
  }
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>