<template>
    <div class="upload-video">
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
            <div class="title">{{ lan.$t("shangchuanshipin") }}</div>
            <a-form-item :label="lan.$t('shipinbiaoti')"  :rules="{ required: true, message: 'Please input Activity name', trigger: 'blur'}">
                <a-input
                    size="small"
                    v-model:value="form.title"
                    :placeholder="lan.$t('shurushipinbiaoti')"
                />
            </a-form-item>
            <a-form-item :label="lan.$t('shipinfengmian')" class="video-cover"  :rules="{ required: true, message: 'Please input Activity name', trigger: 'blur'}">
                <div style="display: flex">
                    <a-upload
                        list-type="picture"
                        :customRequest="uploadspic"
                        :beforeUpload="imgs"
                    >
                        <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>
                    <div class="demand">
                        <p>
                            {{ lan.$t("fengmianyaoqiu") }}
                        </p>
                        <p>
                            1.{{ lan.$t("fengmianyaoqiu1") }}
                        </p>
                        <p>
                            2.{{ lan.$t("fengmianyaoqiu2") }}
                        </p>
                    </div>
                </div>
            </a-form-item>
            <a-form-item
                :label="lan.$t('shipinjieshao')"
                class="video-introduction"
                 :rules="{ required: true, message: 'Please input Activity name', trigger: 'blur'}"
            >
                <a-upload
                    list-type="picture"
                    :customRequest="uploads"
                    :beforeUpload="video"
                >
                    <div class="upload-image" v-if="form.fileurl.length == 0">
                        <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="form.fileurl.length != 0"
                    >
                        <video
                            :src="form.fileurl"
                            :ref="
                                (el) => {
                                    videos[0] = el;
                                }
                            "
                            class="upload1"
                        ></video>
                        <!-- <a-progress type="circle" :percent="100" :width="80" style="position:absolute;right:35%"/> -->
                    </div>
                </a-upload>
                <div class="demand">
                    <p>
                        {{ lan.$t("shipinyaoqiu") }}
                    </p>
                    <p>1.{{ lan.$t("cshipinyaoqiu1") }}</p>
                    <p>2.{{ lan.$t("cshipinyaoqiu2") }}</p>
                    <p>3.{{ lan.$t("shipinyaoqiu3") }}</p>
                </div>
                <!-- <div class="demand">
                    <p class="one-line-hide">视频要求：</p>
                    <p class="one-line-hide">1.上传视频时间要求为30s之内</p>
                    <p class="one-line-hide">2.支持文件大小100M</p>
                    <p class="one-line-hide">
                        3.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…
                    </p>
                </div> -->
            </a-form-item>
            <a-form-item :label="lan.$t('shipinjianjie')" class="brief">
                <a-textarea
                    v-model:value="form.desc"
                    :autoSize="true"
                    class="brief-textarea"
                    :maxlength="200"
                    :placeholder="lan.$t('shurushipinjianjie')"
                />
                <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">{{
                    lan.$t("shangchuanshipin")
                }}</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, provenimg, provenvideo } from "@/utils/common";
import { FromSend, ImgInfo, VideoInfo } from "@/types";
import { uploadflie } from "@/utils/vod";
import { setvideo, videoadd, videodetail } from "@/api";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
import { useI18n } from "@/utils/i18n";

export default defineComponent({
    name: "ReleaseWebcast",
    components: {
        PlaySquareOutlined,
        PlusOutlined,
        NavBottom,
    },
    setup() {
        let issum= true;
        const lan: any = useI18n();
        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, "knijkdbj");
                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);
            const type = provenimg(file.name);
            if(!type){
                message.error("请重新选择")
            }
            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>>([]);
        const ifalowupload = ref<boolean>(false);
        interface AntUpload {
            action: string;
            data: unknown;
            file: File;
        }
        async function uploadspic(file: AntUpload) {
           
                const res = await uploadflie(file.file, (info: any) => {
                    console.log(info);
                    let jindu: number = info.percent.toFixed(2) * 100;
                    jindu = parseInt(jindu + "");
                    uploadpicprogress.value = jindu || 1;
                });
                console.log(res);
                form.value.img = res.video.url;
            
        }

        function beforeUploadpic(info?: any) {
            console.log(info);
            if (info.type.split("/")[0] != "image") {
                message.error(lan.$t("fengmiangeshi"));
                ifalowupload.value = false;
                return;
            } else {
                ifalowupload.value = true;
            }
        }

        /**
         * 上传视频
         */
        const uploadprogress: Ref<number> = ref(0);
        const ifallowvideo = ref<boolean>(false);
         async function uploads(file: AntUpload) {
                issum = false;
                console.log(file);
                videofile.value = file.file;
                uploadprogress.value = 1;
                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);
                    const jindu = info.percent.toFixed(2) * 100
                    uploadprogress.value = jindu > 0 ? jindu : 1;
                });
                console.log(res);

                form.value.fileid = res.fileId;
                form.value.fileurl = res.video.url;
                issum = true;
        } 

        function beforeVideoUpload(info?: any) {
            console.log(info);
            if (info.type.split("/")[0] != "video") {
                ifallowvideo.value;
                message.error(lan.$t("wenjiangeshi"));
            } else {
                ifallowvideo.value = true;
            }
        }

        /**
         * 表单提交
         */
        const routes = useRoute();
        const onSubmit = async (e: FromSend) => {
            if(!issum){
                message.error(lan.$t("shangchuanwancheng"))
                return; 
            }
            e.preventDefault();
            console.log(toRaw(form.value), 111);
            console.log(toRaw(form.value).video[0].length);

            console.log(routes.query, "adsadsa");
            const subdata = toRaw(form.value);
            if (subdata.title == "") {
                message.error(lan.$t("biaotiweikong"));
                return;
            } else if (subdata.img == "") {
                message.error(lan.$t("fengmianweikong"));
                return;
            } else if (subdata.fileurl == "") {
                message.error(lan.$t("wenjianweikong"));
            } else {
                if (routes.query.id) {
                    form.value.id = routes.query.id;
                    console.log("edi");
                    setvideo(form.value);
                } else {
                    videoadd(form, toRaw(form.value));
                }
                // videoadd(form, toRaw(form.value));
            }

            // videoadd(form, toRaw(form.value));
        };
        function beforeUpload(info?: any) {
            console.log(info);
            if (info.type.split("/")[0] != "video") {
                ifallowvideo.value = false;
                message.error(lan.$t("shipinjieshaoccuowu"));
                return;
            } else {
                ifallowvideo.value = true;
            }
        }
        function video(file: any){
            return provenvideo(file, true)
        }
         function imgs(file: any){
            return provenimg(file)
        }
       

        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            form,
            viewCover,
            previewImage,
            previewCover,
            coverChange,
            cancelCover,
            beforeCoverUpload,
            onSubmit,
            uploadpicprogress,
            uploadspic,
            uploadprogress,
            uploads,
            videofile,
            videos,
            removeFile,
            beforeUpload,
            ifalowupload,
            beforeVideoUpload,
            lan,
            beforeUploadpic,
            video,
            imgs
        };
    },
});
</script>
<style lang="scss" scoped>
.upload1{
  width: 171px;
  height: 96px;
}
.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: 130px;
                margin: 0 30px 0 17px;
                text-align: left;
                > 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;
                // &:hover {
                //     background: #08ae98;
                // }
            }
        }
        .video-cover {
            .preview-image {
                width: 171px;
                height: 96px;
            }
        }
        .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-introduction {
            .ant-form-item-control-wrapper {
                .ant-form-item-children {
                    display: flex;
                    // align-items: center;
                }
            }
            .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>