<template>
    <div>
        <div class="mt20 ml20">
            <Form>
                <FormItem label="视频类型：">
                    <RadioGroup v-model="seletVideo" @on-change="changeVideo">
                        <Radio :label="0" class="radio">本地视频</Radio>
                        <Radio :label="1">视频链接</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="视频链接"  v-if="seletVideo == 1">
                    <Input class="input-add mr14" v-model="videoLink" placeholder="请输入视频链接" />
                    <Button type="primary" @click="zh_uploadFile">确认添加</Button>
                </FormItem>
                <FormItem label="本地上传：" v-if="seletVideo == 0">
                    <input
                            type="file"
                            ref="refid"
                            class="display-add"
                            @change="zh_uploadFile_change"
                    />
                    <Button
                            v-if="upload_type !== '1' || videoLink"
                            type="primary"
                            icon="ios-cloud-upload-outline"
                            class="ml10"
                            @click="zh_uploadFile"
                    >上传视频</Button
                    >
                    <Upload
                            v-if="upload_type === '1' && !videoLink"
                            :show-upload-list="false"
                            :action="fileUrl2"
                            class="ml10"
                            :before-upload="beforeUpload"
                            :data="uploadData"
                            :headers="header"
                            :multiple="true"
                            :on-success="handleSuccess"
                            style="display: inline-block"
                    >
                        <Button type="primary" icon="ios-cloud-upload-outline">上传视频</Button>
                    </Upload>
                    <Progress :percent="progress" :stroke-width="5" v-if="upload.videoIng" />
                </FormItem>
            </Form>
            <div class="iview-video-style" v-if="formValidate.video_link">
                <video
                        class="video-style"
                        :src="formValidate.video_link"
                        controls="controls"
                >
                    您的浏览器不支持 video 标签。
                </video>
                <div class="mark"></div>
                <Icon type="ios-trash-outline" class="iconv" @click="delVideo" />
            </div>
        </div>
        <div class="mt50 ml20">
            <Button type="primary" @click="uploads">确认</Button>
        </div>
    </div>
</template>

<script>
    import { productGetTempKeysApi, uploadType, videoAttachment } from "@/api/product";
    import { uploadByPieces } from "@/utils/upload"; //引入uploadByPieces方法
    import Setting from "@/setting";
    import util from "@/libs/util";
    export default {
        name: "vide11o",
        props:{
            pid:{
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                fileUrl: Setting.apiBaseURL + "/file/upload",
                fileUrl2: Setting.apiBaseURL + "/file/video_upload",
                upload: {
                    videoIng: false, // 是否显示进度条；
                },
                progress: 0, // 进度条默认0
                videoLink: "",
                formValidate: {
                    video_link: "",
                },
                upload_type: "",
                uploadData: {},
                header: {},
                seletVideo:0,
            };
        },
        watch: {
            seletVideo: {
                handler (nVal, oVal) {
                    this.videoLink=''
                    this.formValidate.video_link = ''
                },
            }
        },
        created() {
            this.uploadType();
            this.getToken();
        },
        methods: {
            // 删除视频；
            delVideo() {
                let that = this;
                that.$set(that.formValidate, "video_link", "");
                that.$refs.refid.value = '';
            },
            // 上传成功
            handleSuccess(res, file, fileList) {
                if (res.status === 200) {
                    this.formValidate.video_link = res.data.src;
                    this.$Message.success(res.msg);
                } else {
                    this.$Message.error(res.msg);
                }
            },
            getToken() {
                this.header["Authori-zation"] = "Bearer " + util.cookies.get("token");
            },
            //获取视频上传类型
            uploadType() {
                uploadType().then((res) => {
                    this.upload_type = res.data.upload_type;
                });
            },
            beforeUpload(file) {
                let imgTypeArr = ["video/mp4"];
                let imgType = imgTypeArr.indexOf(file.type) !== -1
                if (!imgType) {
                    return this.$Message.warning({
                        content:  '文件  ' + file.name + '  格式不正确, 请选择格式正确的视频',
                        duration: 5
                    });
                }
                uploadByPieces({
                    randoms: "", // 随机数，这里作为给后端处理分片的标识 根据项目看情况 是否要加
                    file: file, // 视频实体
                    pieceSize: 3, // 分片大小
                    pid:this.pid,
                    success: (data) => {
                        this.formValidate.video_link = data.file_path;
                        this.progress = 100;
                    },
                    error: (e) => {
                        this.$Message.error(e.msg);
                    },
                    uploading: (chunk, allChunk) => {
                        this.videoIng = true;
                        let st = Math.floor((chunk / allChunk) * 100);
                        this.progress = st;
                    },
                });
                return false;
            },
            zh_uploadFile() {
                if (this.videoLink && this.$getFileType(this.videoLink) == 'video') {
                    this.formValidate.video_link = this.videoLink;
                } else if(this.videoLink && this.$getFileType(this.videoLink) !== 'video' && this.seletVideo == 1){
                    return this.$Message.error("请输入正确的视频链接")
                } else{
                    this.$refs.refid.click();
                }
            },
            zh_uploadFile_change(evfile) {
                let that = this;
                if (evfile.target.files[0].type !== "video/mp4") {
                    return that.$Message.error("只能上传mp4文件");
                }
				let types = {
				  key: evfile.target.files[0].name,
				  contentType: evfile.target.files[0].type,
				};
                productGetTempKeysApi(types)
                    .then((res) => {
                        that.$videoCloud
                            .videoUpload({
                                type: res.data.type,
                                evfile: evfile,
                                res: res,
                                uploading(status, progress) {
                                    that.upload.videoIng = status;
                                    if (res.status == 200) {
                                        that.progress = 100;
                                    }
                                },
                            })
                            .then((res) => {
                                that.formValidate.video_link = res.url;
                                that.$Message.success("视频上传成功");
                                that.upload.videoIng = false;
                            })
                            .catch((res) => {
                                that.$Message.error(res);
                            });
                    })
                    .catch((res) => {
                        that.$Message.error(res.msg);
                    });
            },
            uploads() {
                if(this.seletVideo == 0 && this.formValidate.video_link) {

                }else if(this.seletVideo == 0 && this.formValidate.video_link == '') {
                    this.$Message.error("请上传视频");
                    nowEditor.dialog.close(true);
                }
                if(this.seletVideo == 1 && this.videoLink == ''){
                    this.$Message.error("请上传视频");
                    nowEditor.dialog.close(true);
                }
                if(this.videoLink && this.$getFileType(this.videoLink) !== 'video' && this.seletVideo == 1){
                    this.$Message.error("请输入正确的视频链接")
                }else {
                    if(this.seletVideo == 1 || (this.seletVideo == 0 && this.upload_type != 1)){
                        videoAttachment({
                            path:this.formValidate.video_link,
                            pid:this.pid,
                            upload_type: this.seletVideo == 1 ? 1 : this.upload_type
                        }).then(res=>{})
                    }
                    this.$emit('getVideo',this.formValidate.video_link);
                    this.formValidate.video_link = "";
                    this.$refs.refid.value = "";
                }
            },
            changeVideo(e){
                this.videoLink = "";
            }
        },
    };
</script>

<style scoped>
    .video-style {
        width: 100%;
        height: 100% !important;
        border-radius: 10px
    }
    .iview-video-style {
        width: 40%;
        height: 180px;
        border-radius: 10px;
        background-color: #707070;
        margin-top: 10px;
        position: relative;
        overflow: hidden;
    }
    .iview-video-style .iconv {
        color: #fff;
        line-height: 180px;
        width: 50px;
        height: 50px;
        display: inherit;
        font-size: 26px;
        position: absolute;
        top: -74px;
        left: 50%;
        margin-left: -25px;
    }
    .iview-video-style .mark {
        position: absolute;
        width: 100%;
        height: 30px;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
    }
</style>