<template>
  <div class="upload-video">
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
      <div class="title">上传视频</div>
      <a-form-item label="视频标题">
        <a-input
          size="small"
          v-model:value="form.title"
          placeholder="请输入您的视频标题"
        />
      </a-form-item>
      <a-form-item label="视频封面" class="video-cover">
        <a-upload list-type="picture" :customRequest="uploadspic">
          <div class="upload-image" v-if="!viewCover && form.img.length == 0">
            <PlusOutlined
              style="fontsize: 22px"
              v-if="uploadpicprogress == 0"
            />
            <a-progress
              type="circle"
              :percent="uploadpicprogress"
              :width="80"
              v-else
            />
          </div>
          <div class="upload-image" v-else>
            <img style="width: 100%; height: 100%" :src="form.img" />
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item label="选择视频" class="video-introduction">
        <div class="upload-container">
          <a-upload list-type="picture" :customRequest="uploads"  :beforeUpload="beforeVideoUpload">
            <div class="upload-image">
              <PlaySquareOutlined
                style="fontsize: 22px"
                v-if="uploadprogress == 0"
              />
              <a-progress
                type="circle"
                :percent="uploadprogress"
                :width="80"
                v-else
              />
              <video style="display: none" :src="videofile"></video>
            </div>
            <div
              class="upload-image upload"
              style="position: relative"
              v-show="false"
            >
              <video
                :src="form.fileurl"
                :ref="
                  (el) => {
                    videos[0] = el;
                  }
                "
                class="upload"
              ></video>
              <!-- <a-progress type="circle" :percent="100" :width="80" style="position:absolute;right:35%"/> -->
            </div>
          </a-upload>
          <!-- 文件列表 -->
            <div v-if="form.video[0].length">
                  <div
                v-for="(item, index) in form.video"
                :key="index"
                class="video-list"
              >
                <img src="@/static/images/link.png" class="link" />
                <span class="one-line-hide">{{ item.split('/')[item.split('/').length-1] }}</span>
                <img
                  src="@/static/images/delete.png"
                  @click="removeFile(0)"
                  class="del"
                />
              </div>
            </div>
        </div>
        <div class="demand">
          <p class="one-line-hide">视频要求：</p>
          <p class="one-line-hide">
            1.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…
          </p>
        </div>
      </a-form-item>
      <a-form-item label="视频简介" class="brief">
        <a-textarea
          v-model:value="form.desc"
          :autoSize="true"
          class="brief-textarea"
          :maxlength="200"
          placeholder="请输入您的视频简介"
        />
        <span class="words-number">{{ form.desc.length }}/200</span>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 4, offset: 0 }">
        <a-button @click="onSubmit">上传视频</a-button>
      </a-form-item>
    </a-form>
    <nav-bottom></nav-bottom>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref, toRaw } from "vue";
import { PlaySquareOutlined, PlusOutlined } from "@ant-design/icons-vue";
import NavBottom from "@/components/NavBottom.vue";
import { previewCover } from "@/utils/common";
import { FromSend, ImgInfo, VideoInfo } from "@/types";
import { uploadflie } from "@/utils/vod";
import { videoadd, videodetail } from "@/api";
import { useRoute } from 'vue-router';

export default defineComponent({
  name: "ReleaseWebcast",
  components: {
    PlaySquareOutlined,
    PlusOutlined,
    NavBottom,
  },
  setup() {
    interface FileItem {
      video: Array<string>;
    }
    const fileList: Array<FileItem> = [];

    // 表单数据
    const form = ref<any>({
      title: "",
      img: "",
      fileid: "",
      fileurl: "",
      fileduration: "",
      desc: "",
      video:[""],
    });
    onMounted(async () => {
      if(useRoute().query.id){
        console.log(useRoute().query.id)
        form.value = await videodetail(useRoute().query.id,1)
        console.log(form.value,"fornm")
      }
    })
    
    // 是否显示封面预览 封面的路径
    const viewCover: Ref<boolean> = ref(false),
      previewImage: Ref<string> = ref("");
    /**
     * 封面改变触发事件
     */
    function coverChange(info: ImgInfo): void {
      // console.log(info);
      // 获取预览图片
      previewCover(info.file).then((url) => (previewImage.value = url));
      viewCover.value = true;
      // form.cover = fileList;
    }

    /**
     * 上传封面之前的钩子
     * @param file 上传的文件
     */
    const beforeCoverUpload = (file: File): boolean => {
      console.log(file);
      return false;
    };


    /**
     * 删除封面
     */
    function cancelCover(file: number): void {
      console.log(file);
    }
    /**
     * 删除视频列表
     * @param index 删除文件的索引
     */
    function removeFile(index: number): void {
      const newFileList = form.value.video.slice();
      newFileList.splice(index, 1);
      form.value.video = newFileList;
    }

    /**
     * 上传图片
     */
    const uploadpicprogress: Ref<number> = ref(0);
    const videofile = ref<File>();
    const videos = ref<Array<any>>([]);
    interface AntUpload {
      action: string;
      data: unknown;
      file: File;
    }
    async function uploadspic(file: AntUpload) {
      const res = await uploadflie(file.file, (info: any) => {
        console.log(info);
        uploadpicprogress.value = info.percent.toFixed(2) * 100;
      });
      console.log(res);
      form.value.img = res.video.url;
    }

    /**
     * 上传视频
     */
    const uploadprogress: Ref<number> = ref(0);
    async function uploads(file: AntUpload) {
        uploadprogress.value=0
        form.value.video=[""]
        console.log(file);
        videofile.value = file.file;
        videos.value[0].addEventListener("durationchange", () => {
        console.log(videos.value[0].duration);
        form.value.fileduration = videos.value[0].duration;
      });
      const res = await uploadflie(file.file, (info: any) => {
        console.log(info);
        uploadprogress.value = info.percent.toFixed(2) * 100;
      });
      console.log(res);

      form.value.fileid = res.fileId;
      form.value.fileurl = res.video.url;
      form.value.video[0]=res.video.url
    }

    /**
     * 表单提交
     */
    const onSubmit = async (e: FromSend) => {
      e.preventDefault();
      console.log(toRaw(form.value), 111);
      videoadd(form, toRaw(form.value));
    };

    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form,
      viewCover,
      previewImage,
      previewCover,
      coverChange,
      cancelCover,
      beforeCoverUpload,
      onSubmit,
      uploadpicprogress,
      uploadspic,
      uploadprogress,
      uploads,
      videofile,
      videos,
      removeFile
    };
  },
});
</script>
<style lang="scss" scoped>
.upload {
  width: 171px;
  height: 96px;
  display:none
}
.upload-video {
  width: 100%;
  min-width: 700px;
  background-color: #ffffff;
  padding: 46px;
  border-radius: 17px;
  position: relative;
  ::v-deep(.ant-form) {
    .title {
      font-size: 12px;
      font-weight: bold;
      color: #111111;
      margin-bottom: 28px;
    }
    .ant-row {
      .ant-form-item-label {
        width: 60px;
        margin: 0 30px 0 17px;
        > label {
          font-size: 12px;
          font-weight: 500;
          color: #808080;
          &::after {
            content: "";
          }
        }
      }
      .upload-image {
        width: 171px;
        height: 96px;
        border: 1px solid #dcdfe0;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 17px;
      }
      .ant-input {
        width: 171px;
        padding: 6px 11px;
        border-radius: 3px;
        border: 1px solid #dcdfe0;
        font-size: 11px;
        color: #3f3f3f;
        &::-webkit-input-placeholder {
          font-size: 12px;
          color: #808080;
        }
      }
      .ant-select {
        font-size: 12px;
        color: #3f3f3f;
      }
      .ant-select-dropdown {
        font-size: 12px;
      }
      .ant-upload-list {
        display: none;
      }
      .ant-btn {
        padding: 0;
        width: 63px;
        height: 23px;
        background: #08ae98;
        border-radius: 3px;
        font-size: 10px;
        font-weight: 500;
        color: #ffffff;
      }
    }
    .video-cover {
      .preview-image {
        width: 171px;
        height: 96px;
      }
    }
    .video-introduction {
      .ant-form-item-control-wrapper {
        .ant-form-item-children {
          display: flex;
          // align-items: center;
          .demand {
            height: 94px;
            font-size: 10px;
            font-weight: 500;
            color: #808080;
            width: 134px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            > p {
              line-height: 17px;
              margin: 0;
            }
          }
        }
      }
      .video-list {
        display: flex;
        align-items: center;
        .link {
          width: 11px;
          height: 11px;
          margin-right: 4px;
        }
        > span {
          font-size: 9px;
          font-weight: 500;
          color: #07ad97;
          max-width: 150px;
        }
        .del {
          width: 11px;
          height: 11px;
          margin-left: auto;
          cursor: pointer;
        }
      }
    }
    .duration {
      .unit {
        margin-left: 18px;
        font-size: 12px;
        font-weight: 500;
        color: #808080;
      }
    }
    .brief {
      position: relative;
      .ant-input {
        width: 359px;
      }
      .brief-textarea {
        min-height: 85px;
        padding-bottom: 30px;
      }
      .words-number {
        position: absolute;
        right: 11px;
        bottom: -11px;
        font-size: 11px;
        font-weight: 500;
        color: #7f7f7f;
        user-select: none;
      }
    }
  }
}
</style>