<template>
    <div class="allAddSC" style="padding: 0;margin: 0;">
        <!-- 文本新增修改 -->
        <div v-if="type==1">
            <q-dialog v-model="Isadd" persistent>
                <q-card style="width: 520px; max-width: 80vw;">
                    <q-card-section>
                        <div class="text-h6">新建/修改文本素材</div>
                    </q-card-section>
                    <q-separator />
                    <q-card-section class="q-pt-none" style="margin-top: 15px;">
                        <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
                            @input="$forceUpdate()" ref="ID" :options="allclassifyList" label="分组" :dense="false"
                            emit-value map-options />
                        <q-input clearable standout="bg-primary text-white" v-model="addMsg.TextModel.Title"
                            @input="$forceUpdate()" label="文本标题" style="margin-top: 20px;" />
                        <q-input clearable standout="bg-primary text-white" v-model="addMsg.TextModel.Content"
                            @input="$forceUpdate()" type="textarea" label="文本内容" style="margin-top: 20px;" />
                    </q-card-section>
                    <q-separator />
                    <q-card-actions align="right" class="bg-white">
                        <q-btn class="q-mr-md" label="取消" @click="getcancel()" />
                        <q-btn color="accent" class="q-mr-md" label="确定" @click="savewb()" />
                    </q-card-actions>
                </q-card>
            </q-dialog>
        </div>
        <!-- 图片新增修改 -->
        <div v-if="type==2">
            <q-dialog v-model="Isadd" persistent>
                <q-card style="width: 520px; max-width: 80vw;">
                    <q-card-section>
                        <div class="text-h6">新建/修改图片素材</div>
                    </q-card-section>
                    <q-separator />
                    <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
                        <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
                            @input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false"
                            emit-value map-options />
                        <div style="margin-top: 15px;">
                            <div style="width:70px">上传图片:</div>
                            <div style="margin-top: 15px;">
                                <el-upload class="avatar-uploader materialupload" action="" :before-upload="uploadFile"
                                    accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp" :show-file-list="false">
                                    <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;"
                                        v-if=" addMsg.ImageModel.ImagePath==''"></i>
                                    <q-img v-else :src="addMsg.ImageModel.ImagePath"
                                        style="width: 110px;height: 110px;border-radius: 6px;display: flex;">
                                    </q-img>
                                </el-upload>
                                <div style="margin-top: 20px;">
                                    (图片大小不超过2M，图片名不能重复，支持JPG，JPEG及PNG格式)
                                </div>
                            </div>
                        </div>

                    </q-card-section>
                    <q-separator />
                    <q-card-actions align="right" class="bg-white">
                        <q-btn class="q-mr-md" label="取消" @click="getcancel" />
                        <q-btn color="accent" class="q-mr-md" label="确定" @click="saveImage()" />
                    </q-card-actions>
                </q-card>
            </q-dialog>
        </div>
        <!-- 图文 -->
        <div v-if="type==3">
            <q-dialog v-model="Isadd" persistent>
                <q-card style="width: 520px; max-width: 80vw;">
                    <q-card-section>
                        <div class="text-h6">新建/修改图文</div>
                    </q-card-section>
                    <q-separator />
                    <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
                        <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
                            @input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false"
                            emit-value map-options />
                        <div style="margin-top: 15px;">
                            <div style="width:70px">上传图片:</div>
                            <div style="margin-top: 15px;">
                                <el-upload class="avatar-uploader materialupload" action="" :before-upload="uploadFile"
                                    accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp" :show-file-list="false">
                                    <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;"
                                        v-if="addMsg.ImgTextModel.ImgPath==''"></i>
                                    <q-img v-else :src="addMsg.ImgTextModel.ImgPath"
                                        style="width: 110px;height: 110px;border-radius: 6px;display: flex;">
                                    </q-img>
                                </el-upload>
                                <div style="margin-top: 20px;">
                                    图片大小不超过2M，图片名不能重复，支持JPG，JPEG及PNG格式
                                </div>
                                <q-input filled clearable standout="bg-primary text-white"
                                    v-model="addMsg.ImgTextModel.Title" @input="$forceUpdate()" label="添加标题"
                                    :rules="[val => !!val || '请输入标题']" style="margin-top: 20px;" />
                                <q-input filled clearable standout="bg-primary text-white"
                                    v-model="addMsg.ImgTextModel.Description" type="textarea" @input="$forceUpdate()"
                                    label="添加描述" style="margin-top: 20px;" />
                                <q-input filled clearable standout="bg-primary text-white"
                                    v-model="addMsg.ImgTextModel.ImgLink" @input="$forceUpdate()"
                                    label="请输入跳转链接，且必须以http://或https://开头" style="margin-top: 20px;"
                                    :rules="[ val => !!val  || '请输入跳转链接']" />
                            </div>
                        </div>

                    </q-card-section>
                    <q-separator />
                    <q-card-actions align="right" class="bg-white">
                        <q-btn class="q-mr-md" label="取消" @click="getcancel" />
                        <q-btn color="accent" class="q-mr-md" label="确定" @click="saveImagetext()" />
                    </q-card-actions>
                </q-card>
            </q-dialog>
        </div>
        <!-- //音频 -->
        <div v-if="type==4">
            <q-dialog v-model="Isadd" persistent>
                <q-card style="width: 520px; max-width: 80vw;">
                    <q-card-section>
                        <div class="text-h6">新建/修改音频</div>
                    </q-card-section>
                    <q-separator />
                    <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
                        <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
                            @input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false"
                            emit-value map-options />
                        <div style="margin-top: 15px;">
                            <div style="width:70px">上传音频:</div>
                            <!-- <audio controls="controls"  style="margin-top: 10px;">
                                <source :src="addMsg.AudioModel.AudioPath" > -->
                                
                            <!-- </audio> -->
                            <q-circular-progress
                                v-if='addMsg.AudioModel.AudioPath'
                                show-value
                                class="text-red q-ma-md"
                                :max='duration'
                                :value="timevalue"
                                size="70px"
                                :thickness="0.2"
                                color="light-blue"
                                track-color="grey-3"
                                @click.stop="playVoice(addMsg.AudioModel.AudioPath)"
                            >
                                <q-icon name="volume_up" class="q-mr-xs" />
                                <span style="font-size: 11px;">
                                    {{timevalue?timevalue.toFixed(1):0}}
                                </span>
                                
                            </q-circular-progress>
                            <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="上传" @click='stopPlayVoice()'>
                                    </q-btn>
                                </el-upload>
                                <div style="margin-top: 20px;">
                                    (音频上传大小不超过2MB，播放长度不超过60s,支持AMR格式。)
                                </div>

                            </div>
                        </div>

                    </q-card-section>
                    <q-separator />
                    <q-card-actions align="right" class="bg-white">
                        <q-btn class="q-mr-md" label="取消" @click="getcancel(),stopPlayVoice()" />
                        <q-btn color="accent" class="q-mr-md" label="确定" @click="saveaudio(),stopPlayVoice()" />
                    </q-card-actions>
                </q-card>
            </q-dialog>
        </div>
        <!-- 视频 -->
        <div v-if="type==5">
            <q-dialog v-model="Isadd" persistent>
                <q-card style="width: 520px; max-width: 80vw;">
                    <q-card-section>
                        <div class="text-h6">新增视频</div>
                    </q-card-section>
                    <q-separator />
                    <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
                        <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
                            @input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false"
                            emit-value map-options />
                        <div style="margin-top: 15px;">
                            <div style="width:70px">上传视频:</div>

                            <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>
                        </div>

                    </q-card-section>
                    <q-separator />
                    <q-card-actions align="right" class="bg-white">
                        <q-btn class="q-mr-md" label="取消" @click="getcancel" />
                        <q-btn color="accent" class="q-mr-md" label="确定" @click="savevideo()" />
                    </q-card-actions>
                </q-card>
            </q-dialog>
        </div>
        <!-- 小程序 -->
        <div v-if="type==6">
            <q-dialog v-model="Isadd" persistent>
                <q-card style="width: 850px; max-width: 80vw;">
                    <q-card-section>
                        <div class="text-h6">新建/修改小程序</div>
                    </q-card-section>
                    <q-separator />
                    <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
                        <div class="col row wrap q-mr-lg q-col-gutter-md">
                            <div class="col-8">
                                <div style="width: 100%;border: 1px solid #ffe1b6;
                                background: #fff1de;
                                padding: 10px;
                                margin-bottom: 20px;">
                                    在企业微信里发送小程序（必须在微信公众平台通过审核和发布的），请先将其关联到企业微信，再到本系统添加该小程序，否则发送失败，客户接收不到。如果没有微信小程序，请前往微信小程序进行注册。
                                    <a href="https://mp.weixin.qq.com/cgi-bin/wx" target="_blank"
                                        style="color: #1890ff;">
                                        立即前往
                                    </a>

                                </div>
                                <q-select filled stack-label option-value="Id" option-label="Name"
                                    v-model="addMsg.MediaGroupId" @input="$forceUpdate()" ref="Id"
                                    :options="allclassifyList" label="分组" :dense="false" emit-value map-options />
                                <q-input filled clearable standout="bg-primary text-white"
                                    v-model="addMsg.AppletModel.AppletId" @input="$forceUpdate()" label="小程序appID"
                                    :rules="[val => !!val || '请输入小程序appID']" style="margin-top: 20px;" />
                                <q-input filled clearable standout="bg-primary text-white"
                                    v-model="addMsg.AppletModel.Page" @input="$forceUpdate()" label="小程序路径"
                                    :rules="[val => !!val || '请输入小程序路径']" style="margin-top: 10px;" />
                                <q-input filled clearable standout="bg-primary text-white"
                                    v-model="addMsg.AppletModel.Title" @input="$forceUpdate()" label="添加标题"
                                    :rules="[val => !!val || '请输入标题']" style="margin-top: 10px;" />
                                <div style="margin-top: 15px;">
                                    <div style="width:70px">上传图片:</div>
                                    <div style="margin-top: 15px;">
                                        <el-upload class="avatar-uploader materialupload" action=""
                                            :before-upload="uploadFile"
                                            accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                                            :show-file-list="false">
                                            <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;"
                                                v-if=" addMsg.AppletModel.ImagePath==''"></i>
                                            <q-img v-else :src="addMsg.AppletModel.ImagePath"
                                                style="width: 110px;height: 110px;border-radius: 6px;display: flex;">
                                            </q-img>
                                        </el-upload>
                                        <div style="margin-top: 20px;">
                                            (图片大小不超过1M，图片名不能重复，支持JPG，JPEG及PNG格式)
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <q-img src="../../../assets/images/example.png"
                                    style="width: 244px;height: 287px;display: flex;"></q-img>
                                <div style="width: 244px;text-align: center;margin-top: 15px;">示例</div>
                            </div>
                        </div>



                    </q-card-section>
                    <q-separator />
                    <q-card-actions align="right" class="bg-white">
                        <q-btn class="q-mr-md" label="取消" @click="getcancel" />
                        <q-btn color="accent" class="q-mr-md" label="确定" @click="saveapplet()" />
                    </q-card-actions>
                </q-card>
            </q-dialog>

        </div>
        <!-- 文件素材 -->
        <div v-if="type==7">
            <q-dialog v-model="Isadd" persistent>
                <q-card style="width: 520px; max-width: 80vw;" class="addscfile">
                    <q-card-section>
                        <div class="text-h6">新建/修改文件素材</div>
                    </q-card-section>
                    <q-separator />
                    <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
                        <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
                            @input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false"
                            emit-value map-options />
                        <div style="margin-top: 15px;">
                            <div style="width:70px">上传文件:</div>

                            <div class="iconfontfile " v-if="addMsg.FileModel && addMsg.FileModel.FilePath!=''"
                                @click="showUpLoadFile(addMsg.FileModel)">
                                <i  v-if="addMsg.FileModel.FilePath.substring(addMsg.FileModel.FilePath.lastIndexOf('.')+1,addMsg.FileModel.FilePath.length).toUpperCase()=='PDF'" class="iconfont icon-pdf"></i>
                                <i  v-else-if="addMsg.FileModel.FilePath.substring(addMsg.FileModel.FilePath.lastIndexOf('.')+1,addMsg.FileModel.FilePath.length).toUpperCase()=='TXT'" class="iconfont icon-txt"></i>
                                <i  v-else-if="addMsg.FileModel.FilePath.substring(addMsg.FileModel.FilePath.lastIndexOf('.')+1,addMsg.FileModel.FilePath.length).toUpperCase()=='DOCX' || 
                                addMsg.FileModel.FilePath.substring(addMsg.FileModel.FilePath.lastIndexOf('.')+1,addMsg.FileModel.FilePath.length).toUpperCase()=='DOC'
                                " class="iconfont icon-word"></i>
                                <i  v-else class="iconfont icon-excel"></i>
                            </div>
                            <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;">
                                    (上传文件大小不超过20MB，支持DOC、DOCX、XLS、XLSX、CSV、PPT、PPTX、TXT、PDF及Xmind格式。)
                                </div>
                            </div>
                        </div>

                    </q-card-section>
                    <q-separator />
                    <q-card-actions align="right" class="bg-white">
                        <q-btn class="q-mr-md" label="取消" @click="getcancel" />
                        <q-btn color="accent" class="q-mr-md" label="确定" @click="savefile()" />
                    </q-card-actions>
                </q-card>
            </q-dialog>
        </div>


    </div>
</template>

<script>
    import BenzAMRRecorder from 'benz-amr-recorder'

    import {
        wechatUploadSelfFile
    } from "../../../api/common/common"; //上传图片
    import {
        setWeChatMediumInfo,//新增修改素材
    } from '../../../api/system/wechat';
    export default {
        name: "allAddSC",
        props: {
            allclassifyList: {
                type: Array,
                default: [],
            },
            type: {
                type: String,
                default: 1,
            },
            editobj: {
                type: Object,
                default: null,
            }

        },
        data() {
            return {
                Isadd: true,
                addMsg: {
                    Id: 0,
                    Type: 1,
                    Is_Sync:1,//是否同步 暂时默认为1 同步
                    MediaGroupId: '',
                },
                duration:0,//音频中时长
                timevalue:0,//音频播放到时间点
                playRec:null
            }
        },
        created() {
            if (this.editobj != null) {
                this.addMsg = this.editobj
                this.addMsg.Is_Sync=1
            } else {
                this.gettype()
            }
        },
        methods: {
            gettype() {
                this.addMsg.Id = 0;
                this.addMsg.Type = this.type
                this.addMsg.Is_Sync = 1;
                this.addMsg.MediaGroupId = '';
                if (this.type == 1) {//文本
                    this.addMsg.TextModel = {
                        Title: '',
                        Content: ''
                    };
                } else if (this.type == 2) {//图片
                    this.addMsg.ImageModel = {
                        ImageName: '',
                        ImagePath: ''
                    };
                } else if (this.type == 3) {//图文
                    this.addMsg.ImgTextModel = {
                        ImgName: '',
                        ImgPath: '',
                        Title: '',
                        Description: '',
                        ImgLink: '',
                    };
                } else if (this.type == 4) {//音频
                    this.addMsg.AudioModel = {
                        AudioName: '',
                        AudioPath: '',
                    };
                } else if (this.type == 5) {//视频
                    this.addMsg.VideoModel = {
                        VideoName: '',
                        VideoPath: '',
                    };
                } else if (this.type == 6) {//小程序
                    this.addMsg.AppletModel = {
                        AppletId: '',
                        Page: '',
                        Title: '',
                        ImageName: '',
                        ImagePath: '',
                    };
                } else if (this.type == 7) {//文件
                    this.addMsg.FileModel = {
                        FileName: '',
                        FilePath: '',
                    };
                }



            },
            setWeChat() {
                setWeChatMediumInfo(this.addMsg).then(res => {
                    this.$q.notify({
                        icon: 'iconfont icon-chenggong',
                        color: 'accent',
                        timeout: 2000,
                        message: res.Message,
                        position: 'top'
                    })
                    this.gettype()
                    this.$emit('editsuccess')
                })
            },
            getcancel() {
                this.$emit('getcancel')
            },
            savewb() {//文本
                if (this.addMsg.MediaGroupId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请选择分组选择`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.TextModel.Title == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `文本标题`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.TextModel.Content == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `文本内容`,
                        position: 'top'
                    })
                    return
                };

                this.setWeChat()
            },
            uploadFile(files) {//图片上传
                if (this.type == 2 || this.type == 3 || this.type == 6) {//图文和图片、小程序的时候处理
                    let types = ['image/jpeg', 'image/jpg', 'image/png'];
                    const isImage = types.includes(files.type);
                    if (this.type == 2 || this.type == 3) {
                        const isLtSize = files.size / 1024 / 1024 < 2;
                        if (!isLtSize) {
                            this.$q.notify({
                                type: 'negative',
                                message: `上传图片大小不能超过 2MB!`,
                                position: 'top'
                            })
                            return false;
                        }
                    } else {
                        const isLtSize = files.size / 1024 / 1024 < 1;
                        if (!isLtSize) {
                            this.$q.notify({
                                type: 'negative',
                                message: `上传图片大小不能超过 1MB!`,
                                position: 'top'
                            })
                            return false;
                        }
                    }

                    if (!isImage) {
                        this.$q.notify({
                            type: 'negative',
                            message: `上传图片只能是 JPG、JPEG、PNG 格式!`,
                            position: 'top'
                        })
                    } else {
                        wechatUploadSelfFile('wechatcatalogue', files, res => {
                            if (res.Code == 1) {
                                if (this.type == 2) {
                                    this.addMsg.ImageModel.ImageName = res.FileName;
                                    this.addMsg.ImageModel.ImagePath = res.FileUrl;
                                } else if (this.type == 3) {
                                    this.addMsg.ImgTextModel.ImgName = res.FileName;
                                    this.addMsg.ImgTextModel.ImgPath = res.FileUrl;
                                } else {
                                    this.addMsg.AppletModel.ImageName = res.FileName;
                                    this.addMsg.AppletModel.ImagePath = res.FileUrl;
                                }

                                this.$forceUpdate();
                            }
                        })
                    }
                }
                if (this.type == 4) {//音频上传
                    // 文件类型进行判断
                    const isAudio = files.type === "audio/amr";
                    const isLt2M = files.size / 1024 / 1024 < 2;
                    let Times = this.getTimes(files)
                    const isTime60S = Times >= 60 ? true : false;

                    // 获取时长
                    ;
                    if (!isAudio) {
                        this.$q.notify({
                            type: 'negative',
                            message: `上传文件只能是AMR格式!`,
                            position: 'top'
                        })
                    } else {
                        if (!isLt2M) {
                            this.$q.notify({
                                type: 'negative',
                                message: `上传文件大小不能超过 2MB!!`,
                                position: 'top'
                            })
                        } else {
                            if (isTime60S) {
                                this.$q.notify({
                                    type: 'negative',
                                    message: `上传文件时长不能超过60秒!!`,
                                    position: 'top'
                                })
                            } else {
                              
                                wechatUploadSelfFile('wechatcatalogue', files, res => {
                                    if (res.Code == 1) {
                                        let  amr= new BenzAMRRecorder()
                                        let that = this
                                        amr.initWithUrl(res.FileUrl).then(function () {
                                            that.duration = amr.getDuration()   
                                            if(Number(that.duration) >=60){
                                                that.$q.notify({
                                                    type: 'negative',
                                                    message: `上传文件时长不能超过60秒!!`,
                                                    position: 'top'
                                                }) 
                                            }else{
                                                that.addMsg.AudioModel.AudioName = res.FileName;
                                                that.addMsg.AudioModel.AudioPath = res.FileUrl;
                                                that.$forceUpdate();
                                            }                                 
                                        }).catch((e) => {
                                           
                                        })
                                       
                                    }
                                })
                            }
                        }
                    }
                }
                if (this.type == 5) {//视频上传
                    // 文件类型进行判断
                    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();
                        }
                    })
                }
                if (this.type == 7) {//文件
                    const isLt20M = files.size / 1024 / 1024 < 20;
                    let ft = files.name.substring(files.name.lastIndexOf('.') + 1, files.name.length).toUpperCase();
                    let stringArr = 'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF'
                    if (stringArr.indexOf(ft) == '-1') {
                        this.$q.notify({
                            type: 'negative',
                            message: `请上传正确的文件格式!`,
                            position: 'top'
                        })
                        return false;
                    }
                    if (!isLt20M) {
                        this.$q.notify({
                            type: 'negative',
                            message: `文件大小不能超过20MB哦!`,
                            position: 'top'
                        })
                        return false;
                    }
                    wechatUploadSelfFile('wechatcatalogue', files, res => {
                        if (res.Code == 1) {
               
                            this.addMsg.FileModel.FileName = res.FileName;
                            this.addMsg.FileModel.FilePath = res.FileUrl;
                            this.$forceUpdate();
                        }
                    })
                }
            },
            getTimes(file) {//获取音频妙数
                var content = file;
                let audioDuration = 0
                //获取录音时长
                var url = URL.createObjectURL(content);
                //经测试，发现audio也可获取视频的时长
                var audioElement = new Audio(url);
                audioElement.addEventListener("loadedmetadata", (_event) => {
                    audioDuration = parseInt(audioElement.duration);
                });
                return audioDuration
            },

            saveImage() {//图片提交
                if (this.addMsg.MediaGroupId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请选择分组选择`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.ImageModel.ImagePath == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请上传图片`,
                        position: 'top'
                    })
                    return
                }
                this.setWeChat()

            },
            saveImagetext() {//图文提交
                if (this.addMsg.MediaGroupId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请选择分组选择`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.ImgTextModel.ImgPath == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请上传图片`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.ImgTextModel.Title == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写标题`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.ImgTextModel.ImgLink == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写跳转链接`,
                        position: 'top'
                    })
                    return
                }
                var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                var objExp = new RegExp(Expression);
                if (objExp.test(this.addMsg.ImgTextModel.ImgLink)) {
                    // plus.runtime.openWeb(this.link)
                } else {
                    this.$q.notify({
                        type: 'negative',
                        message: `上传的链接开头非http或https`,
                        position: 'top'
                    })
                    return
                }

                this.setWeChat()
            },
            saveaudio() {//音频
                if (this.addMsg.MediaGroupId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请选择分组选择`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.AudioModel.AudioPath == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请上传音频`,
                        position: 'top'
                    })
                    return
                }
                this.setWeChat()
            },
            savevideo() {//视频
                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()
            },
            saveapplet() {//小程序
                if (this.addMsg.MediaGroupId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请选择分组选择`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.AppletModel.AppletId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写小程序ID`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.AppletModel.Page == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写路径`,
                        position: 'top'
                    })
                    return
                }

                if (this.addMsg.AppletModel.Title == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写小程序标题`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.AppletModel.ImagePath == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写上传图片`,
                        position: 'top'
                    })
                    return
                }
                this.setWeChat()
            },
            savefile() {//文件
                if (this.addMsg.MediaGroupId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请选择分组选择`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.FileModel.FilePath == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请上传文件`,
                        position: 'top'
                    })
                    return
                }
                this.setWeChat()
            },
            showUpLoadFile(i) {
                // 文件类型进行判断

                if (
                    i.FileName.substring(
                        i.FileName.lastIndexOf(".") + 1,
                        i.FileName.length
                    ).toUpperCase() == "PDF" ||
                    i.FileName.substring(
                        i.FileName.lastIndexOf(".") + 1,
                        i.FileName.length
                    ).toUpperCase() == "TXT"
                ) {
                    this.previewPDF(i.Url);
                } else {
                    window.open(
                        "https://view.officeapps.live.com/op/view.aspx?src=" + i.FilePath
                    );
                }
            },
            
            playVoice(_url) {
                // TODO 这里暂时没处理 音频播放中暂停
                let vm = this
                if (vm.playRec !== null) {
                    vm.stopPlayVoice()
                }
                vm.playRec = new BenzAMRRecorder()
                //⚠️注意跨域问题
                vm.playRec.initWithUrl(_url).then(function () {
                    vm.playRec.play()
                    let timer = setInterval(() => {
                        vm.timevalue +=0.1 
                        vm.$forceUpdate();
                    }, 100);
                    
                    vm.playRec.onEnded(function () {
                        vm.timevalue = 0
                        clearInterval(timer);//停止
                        setTimeout(() => {
                            vm.$forceUpdate();
                        }, 1000);

                    })
                }).catch((e) => {
               
                    vm.$message.error('播放录音失败')
                })
            },
            //停止播放
            stopPlayVoice() {
                if(this.playRec){
                    if (this.playRec.isPlaying()) {
                        this.playRec.stop()
                    }
                }
            },

        }
    }

</script>

<style>
    .allAddSC .Sysuser_Date .el-input--prefix .el-input__inner {
        background-color: red;
        border: 0;
    }

    .allAddSC .state-item {
        padding: 2px 5px;
        border-radius: 3px;
        text-align: center;
        font-size: 10px;
    }

    .allAddSC .frIdlist {
        padding: 3px 10px;
        border-radius: 3px;
        background: #EEEEEF;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        margin-bottom: 5px;
        cursor: pointer;
    }

    .class-popover .q-pr-lg {
        padding-right: 0;
        margin-top: 20px;
    }

    .allAddSC .el-date-editor.el-input {
        width: 100%;
    }

    .allAddSC .el-date-editor.el-input input {
        background-color: transparent !important;
    }

    .allAddSC .el-range-editor .el-range-input {
        background: none;
    }

    .Sysuser_Date .el-input__inner {
        background: transparent !important;
        border: 0 !important;
    }

    .allAddSC .el-drawer.rtl {
        overflow: inherit;
    }

    .allAddSC .el-date-editor.el-input {
        width: 100%;
    }

    .allAddSC .el-date-editor.el-input input {
        background-color: transparent !important;
    }

    .allAddSC .el-range-editor .el-range-input {
        background: none;
    }

    .Sysuser_Date .el-input__inner {
        background: transparent !important;
        border: 0 !important;
    }

    .allAddSC .el-drawer.rtl {
        overflow: inherit;
    }

    .allAddSC .imgcard {
        width: 240px;
        margin: 0 15px 15px 0
    }

    .allAddSC .imgstyle {
        width: 100%;
        height: 120px;
        border-radius: 0;
    }

    .allAddSC .onetext {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 208px;
    }
    .addscfile .icon-excel,
    .addscfile .icon-pdf,
    .addscfile .icon-txt,
    .addscfile .icon-wenjian,
    .addscfile .icon-yasuobao,
    .addscfile .icon-shipin,
    .addscfile .icon-word {
  font-size: 38px;
  color: green;
  line-height: 75px;
}
</style>