<style>
    .editOrderDrawerTop {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        background-color: #f0f5fb;
        padding: 5px 10px;
        align-items: center;
    }

    .disableStatus {
        opacity: 0.3 !important;
        cursor: auto;
    }

    .imgstyle {
        width: 100%;
        height: 126px;
        border-radius: 4px;
    }

    /* .avatar-uploader .el-upload {
        border-radius: 6px;
        cursor: pointer;
        width: 100%;
        height: 100%;
        color: #8c939d;
        position: relative;
        overflow: hidden;
    } */

    .addDutyMain {
        display: inline-block;
        width: 118px;
        height: 118px;
        font-size: 40px;
        border: 1px dashed #d9d9d9;
        line-height: 118px;
    }

    .up-box {
        width: 90px;
        height: 90px;
        border: 1px dashed #ccc;
        text-align: center;
        line-height: 80px;
        font-size: 50px;
        cursor: pointer;
    }
</style>

<template>
    <div>
        <q-dialog v-model="IsShow" persistent>
            <q-card style="width: 800px; max-width: 80vw;">
                <q-card-section class="row items-center q-pb-none">
                    <div class="text-h6">视频</div>
                    <q-space />
                    <q-btn icon="close" flat round dense v-close-popup />
                </q-card-section>
                <q-separator />
                <q-card-section class="q-pt-none">
                    <el-form ref="addMsg" :model="addMsg" label-width="120px">
                        <el-form-item label="添加方式：">
                            <q-radio v-model="Addtype" val="1" label="新建" />
                            <q-radio v-model="Addtype" val="2" label="导入" />
                        </el-form-item>
                        <div v-if="Addtype ==1 ">
                            <el-form-item label="素材分组：">
                                <q-select filled stack-label   option-value="Id" option-label="Name" style="width: 80%;"
                                v-model="addMsg.MediaGroupId" ref="Id" :options="classifyList" label="分组" :dense="false" emit-value map-options />
                            </el-form-item>
                            <el-form-item label="视频上传：">
                                <video width="320" height="240" controls="controls" v-if="addMsg.VideoModel.VideoPath!=''">
                                    <source :src="addMsg.VideoModel.VideoPath" type="video/mp4" />
                                </video>
                                <div style="margin-top: 15px;">
                                    <el-upload class="avatar-uploader " action="" :before-upload="uploadFile"
                                        :show-file-list="false">
                                        <q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传">
                                        </q-btn>
                                    </el-upload>
                                    <div style="margin-top: 20px;">
                                        (视频上传大小不超过10M，支持MP4格式)
                                    </div>
    
                                </div>
                            </el-form-item>
                            
                       
                          
                            
                        </div>
                        <div v-if="Addtype ==2 ">
                            <el-form-item label="视频：" required>
                                <q-btn color="accent" class="q-mr-md" label="选择视频" @click="selectimg(5)" />
                            </el-form-item>
                        </div>
                        
                    </el-form>
                </q-card-section>

                <q-separator />
                <q-card-actions align="right" class="bg-white">
                    <q-btn class="q-mr-md" label="取消" @click="closeEditOrder" />
                    <q-btn color="accent" class="q-mr-md" label="确定" @click="saveOrderInfo()" />
                </q-card-actions>
            </q-card>
        </q-dialog>
        <!-- 图片 -->
        <selectMaterial v-if="isshowselectMaterial" :materialType="materialType" :saveobj='Selectobj' :classifyList='classifyList'
            @close="getclose()" @success='getsuccess'>
        </selectMaterial>
    </div>

</template>
<script>
     import {
        wechatUploadSelfFile
    } from "../../api/common/common"; //上传图片
    import {
        UploadSelfFile
    } from "../../api/common/common"; //上传图片
    import {
        setWeChatMediumInfo,//新增素材
    } from '../../api/system/wechat';
    import selectMaterial from "./selectMaterial"

    export default {
        props: {
            saveobj: {
                type: Object,
                default: null,
            },
            classifyList: {
                type: Array,
                default: [],
            },
        },
        components: {
            selectMaterial,
        },
        data() {
            return {
                IsShow: true,
                Addtype: "1",//添加方式 1为新建
                addMsg: {
                    Id: 0,
                    Type: 5,
                    Is_Sync: 1,
                    MediaGroupId: '',
                    VideoModel:{
                        VideoName: '',
                        VideoPath: '',
                    }
                },
                materialType: 2,
                Selectobj: {},
                isshowselectMaterial: false,
             
            }
        },
        created() {
            
        },
        mounted() {

        },
        watch: {

        },
        methods: {
            //关闭弹窗
            closeEditOrder() {
                this.$emit('close')
            },
            selectimg(type) {//素材选择 图片模式
                this.materialType = type;
                this.isshowselectMaterial = true;
            },
            getclose() {//素材关闭
                this.isshowselectMaterial = false
            },
            getsuccess(data) {//选择数据回来
                if(this.materialType==2){
                    this.addMsg.AppletModel.ImageName = data.ImageModel.ImageName
                    this.addMsg.AppletModel.ImagePath = data.ImageModel.ImagePath
                }else{
                    this.$emit('success', data)
                }
                this.addMsg.CoverImage = data.img
                this.isshowselectMaterial = false
            },
            setWeChat(){
                setWeChatMediumInfo(this.addMsg).then(res => {
                    this.$q.notify({
                        icon: 'iconfont icon-chenggong',
                        color: 'accent',
                        timeout: 2000,
                        message: '操作成功',
                        position: 'top'
                    })
                    this.Selectobj = JSON.parse(JSON.stringify(this.addMsg))
                    this.Selectobj.Id = res.Data
                    this.$emit('success', this.Selectobj)
                })
                
            },
            uploadFile(files) {//图片上传
                 // 文件类型进行判断
                 const isLt10M = files.size / 1024 / 1024 < 10;
             
                if (['video/mp4'].indexOf(files.type) == -1) {
                    this.$q.notify({
                        type: 'negative',
                        message: `请上传正确的视频格式!`,
                        position: 'top'
                    })
                    return false;
                }
                if (!isLt10M) {
                    this.$q.notify({
                        type: 'negative',
                        message: `上传视频大小不能超过10MB哦!`,
                        position: 'top'
                    })
                    return false;
                }
                wechatUploadSelfFile('wechatcatalogue', files, res => {
                    if (res.Code == 1) {
                        this.addMsg.VideoModel.VideoName = res.FileName;
                        this.addMsg.VideoModel.VideoPath = res.FileUrl;
                        this.$forceUpdate();
                    }
                })
            },
            saveOrderInfo() {
                if (this.addMsg.MediaGroupId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请选择分组选择`,
                        position: 'top'
                    })
                    return
                }
                if(this.addMsg.VideoModel.VideoPath==''){
                    this.$q.notify({
                        type: 'negative',
                        message: `请上传视频`,
                        position: 'top'
                    })
                    return
                }
               
                this.setWeChat()
            },




        }
    }

</script>