<template>
  <div>
    <el-upload
      :headers="headers"
      :action="videoUploadUrl"
      list-type="picture-card"
      :on-success="handleSuccess"
      :on-error="handleUploadError"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
      :on-progress="handleProgress"
      :data="data"
      accept="video/mp4"
      :class="{ hide: fileList.length >= limit }"
    >
      <!-- accept="video/mp4, video/ogg, video/flv,video/avi,video/wmv,video/rmvb" -->
      <!-- :disabled="fileList.length >= limit || uploadBtn" -->
      <template #default>
        <el-icon><Plus /></el-icon>
      </template>
      <template #file="{ file }">
        <div style="height: 100%">
          <video
            class="el-upload-list__item-thumbnail"
            :src="file.url"
            alt=""
          ></video>
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handleShowVideo(file)"
            >
              <el-icon><video-play /></el-icon>
            </span>
            <!-- <span
              class="el-upload-list__item-edit"
              @click="handleEditVideo(file)"
            >
              <el-icon><Edit /></el-icon>
            </span> -->
            <span
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <el-icon><delete /></el-icon>
            </span>
          </span>
          <el-progress
            type="circle"
            class="progressModule"
            :color="colors"
            :percentage="Number(uploadPercentage)"
            v-if="showProgress && file.url == uploadUrl"
          ></el-progress>
        </div>
      </template>
    </el-upload>
    <!-- 上传提示 -->
    <div class="el-upload__tip" v-if="showTip">
      请上传
      <template v-if="fileSize">
        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
      </template>
      <template v-if="fileType">
        格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
      </template>
      的文件
    </div>

    <el-dialog v-model="dialogVisible" title="预览" append-to-body width="40%">
      <video
        :src="dialogVideoUrl"
        alt=""
        autoplay
        class="video"
        controls="controls"
      ></video>
    </el-dialog>
    <!-- <el-dialog v-model="editView" width="40%" append-to-body>
      <el-input
        type="textarea"
        :rows="4"
        v-model="editForm.url"
        @input="editVideo"
      ></el-input>
    </el-dialog> -->
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  ElMessage,
  ElMessageBox,
  ElNotification,
  ElLoading,
} from "element-plus";
export default {
  props: {
    modelValue: [String, Object, Array],
    // 数量限制
    limit: {
      type: Number,
      default: 1,
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
  },
  watch: {
    modelValue: {
      handler(val) {
        if (val) {
          // 首先将值转为数组
          const list = Array.isArray(val) ? val : this.modelValue.split(",");
          // 然后将数组转为对象数组
          this.fileList = list.map((item) => {
            if (typeof item === "string") {
              item = { name: item, url: item };
              // if (item.indexOf(this.baseUrl) === -1) {
              //   item = { name: this.baseUrl + item, url: this.baseUrl + item };
              // } else {
              //   item = { name: item, url: item };
              // }
            }
            return item;
          });
        } else {
          this.fileList = [];
          return [];
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      // 设置上传的请求头部
      headers: { "x-token": getToken() },
      baseUrl: import.meta.env.VITE_APP_BASE_API,
      videoUploadUrl:
        import.meta.env.VITE_APP_BASE_API + "/enterprise/v1/upload",
      dialogVideoUrl: "",
      dialogVisible: false,
      fileList: [],
      editForm: {
        url: "",
        uid: null,
      },
      editView: false,
      uploadPercentage: 0,
      showProgress: false,
      uploadUrl: "",
      colors: [
        { color: "#ADD8E6", percentage: 20 },
        { color: "#87CEEB", percentage: 40 },
        { color: "#87CEFA", percentage: 60 },
        { color: "#00BFFF", percentage: 80 },
        { color: "#1296DB", percentage: 100 },
      ],
      uploadBtn: false,
      loading: null,
    };
  },
  methods: {
    // 移除视频
    handleRemove(file) {
      const findex = this.fileList.map((f) => f.url).indexOf(file.url);
      if (findex > -1) {
        this.fileList.splice(findex, 1);
        this.submitFile();
      }
    },
    handleShowVideo(file) {
      this.dialogVideoUrl = file.url;
      this.dialogVisible = true;
    },
    handleBeforeUpload(file) {
      if (this.fileType.length) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          ElMessage.error(
            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
          );
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          ElMessage.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      this.loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError() {
      if (this.loading) {
        this.loading.close();
      }
    },
    // 上传完成
    handleSuccess(response, file, fileList) {
      this.showProgress = false;
      this.uploadBtn = false;
      if (response.code != "200") {
        for (var i = 0; i < fileList.length; i++) {
          if (i + 1 == fileList.length) {
            fileList.splice(i, 1);
          }
        }
        ElMessage.error(response.message);
        this.loading.close();
        return;
      } else {
        ElMessage.success(response.message);
        let obj = {
          name: response.data.filename,
          status: "success",
          uid: file.uid,
          url: response.data.url,
        };
        this.fileList.push(obj);
        this.loading.close();
        this.submitFile();
      }
    },
    // 播放视频
    handleEditVideo(file) {
      this.editForm.url = file.url;
      this.editForm.uid = file.uid;
      this.editView = true;
    },
    // 编辑视频
    editVideo() {
      for (let i in this.fileList) {
        if (this.fileList[i].uid == this.editForm.uid) {
          this.fileList[i].url = this.editForm.url;
        }
      }
      this.submitFile();
    },
    submitFile() {
      // this.$emit("submitImg", this.fileList);
      this.$emit("update:modelValue", this.listToString(this.fileList));
    },
    // 对象转成指定字符串分隔
    listToString(list, separator) {
      let strs = "";
      separator = separator || ",";
      for (let i in list) {
        strs += list[i].url.replace(this.baseUrl, "") + separator;
      }
      return strs != "" ? strs.substr(0, strs.length - 1) : "";
    },
    // 上传进度
    handleProgress(response, file, fileList) {
      this.uploadBtn = true;
      this.uploadUrl = file.url;
      this.showProgress = true;
      this.uploadPercentage = file.percentage.toFixed(0);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-icon-plus {
  font-size: 30px !important;
}
.el-icon-edit {
  font-size: 18px !important;
}
.el-icon-video-play {
  font-size: 18px !important;
}
.el-icon-delete {
  font-size: 18px !important;
  color: rgb(243, 143, 130);
}
.el-input > .el-textarea__inner {
  font-size: 18px !important;
}
.video {
  display: block;
  margin: auto;
  min-height: 200px;
  max-height: 600px;
  min-width: 200px;
  max-width: 100%;
}
.progressModule > .el-progress__text {
  color: #1296db;
  font-size: 15px !important;
}
:deep(.hide .el-upload--picture-card) {
  display: none;
}
// 去掉动画效果
:deep(.el-list-enter-active),
:deep(.el-list-leave-active) {
  transition: all 0s;
}
:deep(.el-list-enter, .el-list-leave-active) {
  opacity: 0;
  transform: translateY(0);
}
</style>
