<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;
    }
    .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>

<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 " class="addscfile">
                            <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="文件上传：">
                                <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>{{addMsg.FileModel.FileName}}</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;line-height: 25px;">
                                        (上传文件大小不超过20MB，支持DOC、DOCX、XLS、XLSX、CSV、PPT、PPTX、TXT、PDF及Xmind格式。)
                                    </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(7)" />
                            </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: 7,
                    Is_Sync: 1,
                    MediaGroupId: '',
                    FileModel : {
                        FileName: '',
                        FilePath: '',
                    }
                },
                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 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();
                    }
                })
            },
            saveOrderInfo() {//文件
                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
                    );
                }
            },




        }
    }

</script>