<template>
  <el-upload
    class="avatar-uploader"
    v-model="url"
    action=""
    :auto-upload="false"
    :http-request="onFileSubmit"
    :onChange="onFileChange"
    :show-file-list="false"
  >
    <video
      v-if="url"
      :src="url"
      class="avatar"
      controls="controls"
      style="width: 200px; height: 148px"
    >
      您的浏览器不支持视频播放
    </video>
    <i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
    <el-progress
      type="circle"
      v-if="percentage > 0 && percentage <= 100"
      :percentage="percentage"
      color="#efefef"
    ></el-progress>
  </el-upload>
</template>
<script>
import OSS from "@/utils/oss-upload.js";
import { $getCredentials } from "@/api/oss.js";
export default {
  data() {
    return {
      url: "",
      ossClient: undefined,
      percentage: 0,
    };
  },
  mounted() {
    this.initOssClient();
  },
  methods: {
    async onFileChange(data) {
      console.log(data);
      const date = new Date();
      const start =
        date.getFullYear() +
        "" +
        (date.getMonth() * 1 + 1) +
        "" +
        date.getDate();
      const houzhui = "." + data.name.substr(data.name.lastIndexOf(".") + 1);
      const name = start + "/" + getUUID() + houzhui;
      const fileRes = await this.ossClient.partUpload(name, data.raw, (p) => {
        this.percentage = Math.floor(p * 100);
        // 这里可以根据进度做相应的处理，例如更新UI等
      });
      console.log(fileRes);
      if (!fileRes) {
        this.percentage = 0;
        this.$notify({
          title: "失败",
          message: `上传阿里云失败`,
          type: "error",
        });
        return;
      }
      if (fileRes.name == "cancel") {
        return;
      }
      this.url = fileRes.replace(
        "https://sy-duanju.oss-cn-chengdu.aliyuncs.com/",
        "https://short-video.hnsiyao.cn/"
      );
    },
    onFileSubmit(data) {
      console.log("data");
      console.log(data);
    },
    async initOssClient() {
      console.log("initOssClient");
      const { data } = await $getCredentials();
      if (data.code == 0) {
        const res = data.data;
        console.log(res);
        this.ossClient = new OSS({ ...res, stsToken: res.securityToken });
      }
    },
  },
};
</script>
