<template>
  <div class="video-upload-box">
    <div class="select-title">
      <span class="isRedDot">*</span>上传视频
    </div>

    <div class="video-box-f">
      <video id="videoId" class="video-box" controls>
        <source src="" type="video/mp4">
      </video>
    </div>

    <div v-if="!url">
      <input type="file" @change="onVideoChange" accept="*" />
      <button v-if="video" @click="uploadVideo">上传视频</button>
    </div>



    <el-button v-else type="primary" @click = 'del'>删除视频</el-button>

  </div>
</template>

<script>
  import {
    Loading
  } from 'element-ui';

  import But from "@/components/Admin/button.vue";


  import {clientArr} from '@/assets/admin/js/createOss.js'

  export default {
    props:['value'],
    components:{But},
    data() {
      return {
        aliOss: '',
        video: '',
        url:'',
        // http://jhnewshop.oss-cn-chengdu.aliyuncs.com/%E6%B5%8B%E8%AF%95%E8%A7%86%E9%A2%91.mp4
      };
    },
    mounted() {
      clientArr().then(res=>{
        this.aliOss = res
      })
      if (this.value) {
        this.url = this.value;
        document.getElementById("videoId").src = this.url;
      }
    },
    watch:{
      value(val){
        if(val){
          this.url = val;
          document.getElementById("videoId").src = this.url;
        }
      },
    },
    methods:{
      del(){
        this.url = '';
        this.video = '';
        document.getElementById("videoId").src = this.url;
      },
      popFun(title, msg, type) {
        this.$notify({
          title: title,
          message: msg,
          type: type
        });
      },
      onVideoChange(e) {
        if(e.target.files[0].size > 5000000000){
          this.popFun('提示', '视频大小不能超过500M', 'error')
        }else{
          this.video = e.target.files[0];
        }
      },
      uploadVideo(){
        Loading.service({
          lock: true,
          text: '视频上传中',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.aliOss.put(this.video.name,this.video).then((res)=>{
        console.log(res.url);
          Loading.service().close()
          if (res.res && res.res.status == 200){
            this.popFun('成功', '上传成功', 'success')
            this.url = res.url;
            document.getElementById("videoId").src = this.url;
            this.$emit('input', this.url)
          }else{
            this.video = '';
            this.popFun('提示', '上传失败', 'error')
          }
        }).catch((err) => {
          this.video = '';
          Loading.service().close();
          this.popFun('提示', '上传失败', 'error');
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .video-upload-box{
    .select-title {
      font-size: 18px;
      margin-bottom: 3px;
      line-height: 32px;
      color: #778CA2;

      span {
        color: #E30C0C;
      }
    }

    .video-box-f{
      width: 600px;
      height: 100%;
      margin-bottom: 10px;
    }
    .video-box{
      width: 600px;
      height: 1005;
    }
  }
</style>
