<template>
  <div class="app-container">
    <div v-if="videoData">
      <video width="500" controls autoplay name="media">
        <source :src="videoData" type="video/mp4">
      </video>
    </div>
    <div v-else>
      加载中...
    </div>
    <div class="upv">
      <el-upload
        ref="upload"
        :action="uploadUrl"
        :before-upload="handleBeforeUpload"
        :on-success="
          (res, file) => {
            handleUploadSuccess(res, file, 'video');
          }
        "
        :on-error="handleUploadError"
        name="file"
        :show-file-list="false"
        :headers="headers"
        accept=".mp4"
      >
        <el-button size="small">
          选择视频
          <i class="el-icon-upload el-icon--right"></i>
        </el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传.mp4文件
        </div>
      </el-upload>
      <!-- <el-upload
        ref="upload"
        :action="uploadUrl1"
        :before-upload="handleBeforeUpload"
        :on-success="
          (res, file) => {
            handleUploadSuccess(res, file, 'pic');
          }
        "
        :on-error="handleUploadError"
        name="file"
        :show-file-list="false"
        :headers="headers"
        accept=".jpg, .jpeg, .png"
      >
        <el-button size="small">
          选择视频封面
          <i class="el-icon-upload el-icon--right"></i>
        </el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png/jpeg文件
        </div>
      </el-upload> -->
    </div>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { listVideo, addVideo } from "@/api/tyler/mainVideo";
export default {
  name:"mainVideo",
  data() {
    return {
      previewUrl: process.env.VUE_APP_API_TARGET,
      uploadUrl: process.env.VUE_APP_API_TARGET + "/business/screen/homePage",
      uploadUrl1: process.env.VUE_APP_API_TARGET + "/common/upload",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      baseURL: process.env.VUE_APP_API_TARGET,
      // 表单参数
      form: {
        id:null,
        name:null,
        videoPath:null
      },
      videoData:null,
      fileSize:1024,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      this.videoData = null;
      listVideo().then(res => {
        this.videoData = this.previewUrl + res.data;
        this.$nextTick(() => {
          this.$forceUpdate();
        });
      })
    },
    //上传图片
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    handleUploadSuccess(response, file, type) {
      let that = this;

      // 如果上传成功
      if (response.code === 200) {
        if (type === "pic") {
          that.form.image = response.fileName;
          addVideo(that.form).then(res => {
            this.$modal.msgSuccess("成功");
            this.getList();
          })
        }
       
        if (type === "video") {
          this.$modal.msgSuccess("成功");
            this.getList();
          // that.form.videoPath = response.fileName;
          // that.form.name = response.newFileName;
          // addVideo(that.form).then(res => {
          //   this.$modal.msgSuccess("成功");
          //   this.getList();
          // })
        }
        // 获取光标所在位置
      } else {
        this.$message.error("上传失败");
      }
    },
    handleUploadError() {
      this.$message.error("上传失败");
    },
    removeElementAtIndex(arr, index) {
      arr.splice(index, 1);
      return arr;
    },
    moveElementToStart(arr, index) {
      let element = arr.splice(index, 1)[0];
      arr.unshift(element);
      return arr;
    },
    // 删除图片
    delPic(index) {
      let that = this;
      this.removeElementAtIndex(that.form.websiteMiningImage, index);
    },
    asIndex(index) {
      let that = this;
      this.moveElementToStart(that.form.websiteMiningImage, index);
    },

  },
}
</script>
<style scoped lang="scss">
.upv{
  display: flex;
  gap: 20px;
}
</style>