<style>

    .addwelcome {
        justify-content: space-between;
    }

    .addwelcome .box_l {
        width: 400px;
        border-radius: 6px;
        margin-right: 15px;
        background: #fff;
        box-shadow: 0 0 13px 0 rgb(47 83 151 / 10%);
    }

    .addwelcome .boxl_title {
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e8e8e8;
    }

    .addwelcome .box_r {
        width: 1px;
        flex: 1;
        border-radius: 6px;
        background: #fff;
        padding: 20px;
    }

    .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
        border-top-color: #FFF;
    }

    .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
        border-top-color: #FFF;
    }

    .atooltip {
        background: #FFF !important;
        box-shadow: 0px 5px 25px 0px rgba(218, 220, 230, 0.85);
    }
    .addwelcome .icon-excel,
    .addwelcome .icon-pdf,
    .addwelcome .icon-txt,
    .addwelcome .icon-wenjian,
    .addwelcome .icon-yasuobao,
    .addwelcome .icon-shipin,
    .addwelcome .icon-word {
  font-size: 38px;
  color: green;
  line-height: 75px;
}
</style>

<template>
    <div class="addwelcome row" style="background: transparent;">
        <div class="box_l">
            <div class="boxl_title">
                <span style="margin-left:24px ;color: rgba(0,0,0,.85); font-weight: 500; font-size: 16px;">客户账号</span>
            </div>
            <div style="padding: 20px;">
                <div style="display: flex;align-items: flex-start;">
                    <i class="el-icon-user" style="margin-right:20px;font-size: 40px;color: #1890ff;"></i>
                    <div
                        style="width: 1px; flex:1;background: #f3f6fb;word-wrap: break-word;padding: 10px;border-radius: 4px;min-height: 40px;">
                        {{addMsg.Content}}
                    </div>
                </div>
                <div style="display: flex;align-items: flex-start;margin-top: 15px;" v-for="(item,index) in addMsg.MediumModel" :key="index">
                    <i class="el-icon-user" style="margin-right:20px;font-size: 40px;color: #1890ff;"></i>
                    <div v-if="item.Type==2" style="width: 1px; flex:1;">
                        <q-img  :src="item.ImageModel.ImagePath"
                            style="width: 70%;">
                        </q-img>
                        
                    </div>
                    <div v-if="item.Type==3" style="width: 1px; flex:1;padding: 10px 15px;  border: 1px solid #eee;  border-radius: 4px;  background: #fff;">
                        <div>{{item.ImgTextModel.Title}}</div>
                        <div style="display: flex;align-items: flex-start;justify-content: space-between;">
                            <div style="width: 1px;flex:1">
                                {{item.ImgTextModel.Description}}
                            </div>
                            <q-img  :src="item.ImgTextModel.ImgPath"
                                style="width: 80px;height: 80px;margin-left: 10px;">
                            </q-img>
                        </div>
                        
                    
                    </div>
                    <div v-if="item.Type==5" style="width: 1px; flex:1">
                        <video width="300" height="200" controls="controls" v-if="item.VideoModel && item.VideoModel.VideoPath">
                            <source :src="item.VideoModel.VideoPath" type="video/ogg" />
                            <source :src="item.VideoModel.VideoPath" type="video/mp4" />
                            <source :src="item.VideoModel.VideoPath" type="video/webm" />
                          </video>
                        
                    
                    </div>
                    <div v-if="item.Type==6" style="width: 70%;padding: 10px 15px;  border: 1px solid #eee;  border-radius: 4px;  background: #fff;">
                        <div>{{item.AppletModel.Title}}</div>
                        <q-img  :src="item.AppletModel.ImagePath"
                            style="width: 100%;">
                        </q-img>
                        
                    
                    </div>
                    <div v-if="item.Type==7" style="width: 1px; flex:1;padding: 10px 15px;  border: 1px solid #eee;  border-radius: 4px;  background: #fff;">
                        <div style="display: flex;align-items: flex-start;justify-content: space-between;" @click="showUpLoadFile(item.FileModel)">
                            <div style="width: 1px;flex:1">
                                {{item.FileModel.FileName}}
                            </div>
                            <div  style="width: 50px;text-align: right;margin-left: 10px;">
                                <i  v-if="item.FileModel.FilePath.substring(item.FileModel.FilePath.lastIndexOf('.')+1,item.FileModel.FilePath.length).toUpperCase()=='PDF'" class="iconfont icon-pdf"></i>
                                <i  v-else-if="item.FileModel.FilePath.substring(item.FileModel.FilePath.lastIndexOf('.')+1,item.FileModel.FilePath.length).toUpperCase()=='TXT'" class="iconfont icon-txt"></i>
                                <i  v-else-if="item.FileModel.FilePath.substring(item.FileModel.FilePath.lastIndexOf('.')+1,item.FileModel.FilePath.length).toUpperCase()=='DOCX' || 
                                item.FileModel.FilePath.substring(item.FileModel.FilePath.lastIndexOf('.')+1,item.FileModel.FilePath.length).toUpperCase()=='DOC'
                                " class="iconfont icon-word"></i>
                                <i  v-else class="iconfont icon-excel"></i>
                            </div>
                        </div>
                        
                    
                    </div>
                </div>

            </div>
        </div>
        <div class="box_r">
            <el-form ref="addMsg" :model="addMsg" label-width="120px">
                <el-form-item label="文本内容：">
                    <q-input v-model="addMsg.Content" filled clearable type="textarea" label="文本内容" @input="gettrigger" />
                    <div style="margin-top: 10px;">
                        <q-btn color="accent" label="+插入客户名称" size='sm' class="q-mr-md" @click='insert' />
                    </div>
                </el-form-item>
                <el-form-item label="添加内容：">
                    <div v-if="addMsg.MediumModel && addMsg.MediumModel.length>0">
                        <div class="row items-center" v-for="(x,y) in addMsg.MediumModel" :key="y">
                            <i class="el-icon-link"></i>
                            <span style="margin-left: 10px;cursor: pointer;" >{{getType(x,'title')}}</span>
                            <i style="margin-left: 10px;cursor: pointer" class="el-icon-close"
                                @click="deleteModel(y)"></i>
                        </div>
                    </div>

                    <q-btn color="white" v-if='addMsg.MediumModel && addMsg.MediumModel.length<9' text-color="black" label="+添加图片/图文/小程序/视频/文件" size='md'>
                        <q-popup-proxy ref='popupproxy'>
                            <q-banner>
                                <q-btn-group push>
                                    <q-btn  @click="selectimg()" >
                                        <i class="iconfont icon-tupian1" style="font-size: 14px;"></i>
                                        <div style="margin-left: 5px;">图片</div>
                                    </q-btn>
                                    <q-btn  @click="selecttextimg()" >
                                        <i class="iconfont icon-tuwen" style="font-size: 21px;"></i>
                                        <div style="margin-left: 5px;">图文</div>
                                    </q-btn>
                                    <q-btn  @click="selectxcx()" >
                                        <i class="iconfont icon-xiaochengxu"></i>
                                        <div style="margin-left: 5px;">小程序</div>
                                    </q-btn>
                                    <q-btn @click="selectvideo()" >
                                        <i class="iconfont icon-shipin"></i>
                                        <div style="margin-left: 5px;">视频</div>
                                    </q-btn>
                                    <q-btn  @click="selectfiled()" >
                                        <i class="iconfont icon-wenjian"></i>
                                        <div style="margin-left: 5px;">文件</div>
                                    </q-btn>
                                </q-btn-group>
                            </q-banner>
                        </q-popup-proxy>
                    </q-btn>


                </el-form-item>
            </el-form>
       
        </div>

  
        <!-- 图片 -->
        <selectMaterial v-if="isshowselectMaterial" :materialType="materialType" :classifyList='classifyList'
            @close="getclose()" @success='getsuccess'>
        </selectMaterial>
        <!-- 图文 -->
        <imagetextform v-if="isshowimagetext" @close="gettwclose()" @success='gettwsuccess' :classifyList='classifyList'></imagetextform>
        <!-- 小程序 -->
        <appletform v-if="isshowapplet" @close="getxcxclose()" @success='getxcxsuccess' :classifyList='classifyList'>
        </appletform>
          <!-- 视频 -->
          <videofrom v-if="issvideofrom" @close="getxcxclose()" @success='getvideosuccess' :classifyList='classifyList'> </videofrom>
          <!-- 文件 -->
          <filefrom v-if="isfilefrom" @close="getxcxclose()" @success='getfilesuccess' :classifyList='classifyList'> </filefrom>
    </div>
</template>

<script>
    import {
        setWeChatWelcomesInfo,
        getWeChatMediumGroupList,
        getWeChatWelcomesInfo
    } from '../../api/system/wechat';
    import selectMaterial from "./selectMaterial"
    import imagetextform from "./imagetext-form"
    import appletform from "./applet-form"
    import videofrom from "./video-from"
    import filefrom from "./file-from"

    import {
        queryEmployee
    } from '../../api/users/user'
    export default {
        
        components: {
            selectMaterial,
            imagetextform,//图文
            appletform,//小程序
            videofrom,
            filefrom,
        },
        props: {
            welcomeindex: {
                type: Number,
                default: 0,
            },
            childrenindex:{
                type: Number,
                default: 0,
            },
            welcomename: {
                type: String,
                default: '',
            },
            welcomeList: {
                type: Object,
                default: {},
            },
           

        },
        data() {
            return {
                loading: false,
                outerVisible: false,//选择人员弹窗
                filterText: '',//人员选择 帅选
                memberList: [],//
                allmemberList: [],
                showMember: [],
                membertype: '1',
                ryList: [],
                addMsg: {
                    Id: 0,
                    Content: "",
                    MediumIds: '',//使用的素材id '1,2,3'格式
                    MediumModel:[],
                },
                defaultProps: {
                    children: 'ChildList',
                    label: 'EmployeeName',
                },
                materialType: 1,
                isshowselectMaterial: false,
                isshowimagetext: false,
                isshowapplet: false,
                classifyList: [],
                issvideofrom:false,
                isfilefrom:false
            }
        },
        created() {
            this.addMsg = this.welcomeList
            this.getWeChatMediumGroupList()
          
        },
        watch:{
            welcomeList(newValue, oldValue){
                this.addMsg= newValue
                console.log(newValue,oldValue)
            }
        },
        methods: {
            
         
            getWeChatMediumGroupList() {
                getWeChatMediumGroupList({}).then(res => {
                    this.classifyList = res.Data

                })
            },
            getMember2(type) {
                if(type==1){
                    this.outerVisible = true
                }
                queryEmployee({}).then(res => {
                    if (res.Code == 1) {
                        this.memberList = res.Data;
                        this.allmemberList = JSON.parse(JSON.stringify(res.Data));
                        if(type==2){
                            let idsList = []
                            this.addMsg.UserIdList.map(j=>{
                                if (j == -1) {
                                    this.membertype = '1'
                                    return
                                } else {
                                    this.membertype = '2'
                                    this.allmemberList.map(x=>{
                                        if(x.Id == j){
                                            idsList.push(x)
                                            return
                                        }
                                    })
                                
                                }
                            })
                            this.ryList = JSON.parse(JSON.stringify(idsList))
                            this.showMember = JSON.parse(JSON.stringify(idsList))
                        }
                    }
                }).catch(() => {

                })
                var arr = [];
               
                this.showMember.forEach(x => {
                    arr.push(x.Id);
                })
                setTimeout(()=>{
                    if (this.$refs.tree) {
                        this.$refs.tree.setCheckedKeys(arr);
                    }
                },100)
               
            },
   
        
        
          
           
            insert() {
                this.addMsg.Content = this.addMsg.Content + '##客户名称##'
                this.gettrigger()
            },
            selectimg() {//素材选择 图片模式
                this.materialType = 2;
                this.isshowselectMaterial = true;
                if (this.$refs.popupproxy) {
                    this.$refs.popupproxy.hide()
                }
            },
            getclose() {//素材关闭
                this.isshowselectMaterial = false
            },

            getsuccess(data) {//选择数据回来
                this.ISidentical(data)
                this.isshowselectMaterial = false
            },
            ISidentical(data){//返回来的数据进行判断再添加
                if(this.addMsg.MediumModel.length>0){
                  
                    let isyes  = false
                    this.addMsg.MediumModel.map(x=>{
                        if(x.Id== data.Id){
                            isyes = true;
                            return
                        }
                    })
                    if(isyes==false){
                        this.addMsg.MediumModel.push(data)
                    }else{
                        this.$q.notify({
                            type: 'negative',
                            message: `重复选择、请您重新选择!`,
                            position: 'top'
                        })
                        return
                    }
                }else{
                    this.addMsg.MediumModel = [];
                    this.addMsg.MediumModel.push(data)
                }
                this.gettrigger()
            },

            selecttextimg() {//图文
                this.isshowimagetext = true;
                if (this.$refs.popupproxy) {
                    this.$refs.popupproxy.hide()
                }
            },
            gettwclose() {//图文
                this.isshowimagetext = false;
            },
            gettwsuccess(data) {//图文返回成功
                this.ISidentical(data)
                this.isshowimagetext = false
            },


            selectxcx() {//图文
                this.isshowapplet = true;

                if (this.$refs.popupproxy) {
                    this.$refs.popupproxy.hide()
                }
            },
            selectvideo(){//视频打开
                this.issvideofrom = true;
                 if (this.$refs.popupproxy) {
                    this.$refs.popupproxy.hide()
                }
            },
            selectfiled(){//文件
                this.isfilefrom = true
                if (this.$refs.popupproxy) {
                    this.$refs.popupproxy.hide()
                }
            },
            getxcxclose() {//小程序 关闭
                this.isshowapplet = false;
                this.issvideofrom = false;
                this.isfilefrom = false
            },
            getxcxsuccess(data) {//小程序 关闭
                this.ISidentical(data)
                this.isshowapplet = false
            },
            getvideosuccess(data){
                this.ISidentical(data)
                this.issvideofrom = false;
            },
            getfilesuccess(data){
                this.ISidentical(data)
                this.isfilefrom = false;
            },
           
            getType(row, name) {
                let title = ''
                let content = ''
                if (row.Type == 2) {
                    title = row.ImageModel.ImageName
                    content = row.ImageModel.ImagePath
                } else if (row.Type == 3) {
                    title = row.ImgTextModel.Title
                    content = row.ImgTextModel.ImgPath
                } else if (row.Type == 6) {
                    title = row.AppletModel.Title
                    content = row.AppletModel.ImagePath
                } else if (row.Type == 5) {
                    title = row.VideoModel.VideoName
                    content = row.VideoModel.VideoPath
                } 
                else if (row.Type == 7) {
                    title = row.FileModel.FileName
                    content = row.FileModel.FilePath
                } 
                if (name == 'title') {
                    return title
                } else if (name == 'content') {
                    return content
                }
            },
            deleteModel(index){
                this.addMsg.MediumModel.splice(index,1)
            },
            gettrigger(){//文本触发时
                this.$emit('success', this.addMsg, this.welcomeindex,this.childrenindex,this.welcomename)
                
            },
            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>