<style>
    @import "../financial/css/cssReset.css";

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

    .addwelcome .box_l {
        width: 400px;
        border-radius: 6px;
        margin-right: 15px;
        background: #fff;
    }

    .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 page-body 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 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="企业微信成员：">
                    <div class="q-gutter-sm" style="align-items: center;display: flex;">
                        <q-radio v-model="membertype" val="1" label="通用" />
                        <q-radio v-model="membertype" val="2" label="指定企业成员" />
                        <q-btn color="accent" label="选择成员" size='sm' class="q-mr-md" style="margin-left: 20px;"
                            v-if="membertype==2" @click='getMember2(1)' />
                        <div v-if="showMember.length>0 && membertype==2" style="margin-top: 8px;">
                            <span style="margin-left: 15px">已选择{{showMember.length}}名成员</span>
                            <span style="cursor: pointer;color: #1890ff;margin-left: 15px;"
                                @click='showMember=[]'>重置</span>
                        </div>
                    </div>


                </el-form-item>
                <el-form-item label="文本内容：">

                    <q-input v-model="addMsg.Content" filled clearable type="textarea" label="文本内容"
                        style="width: 60%;" />
                    <div style="margin-top: 10px;">
                        <q-btn color="accent" label="+插入客户名称" size='sm' class="q-mr-md" @click='insert(1)' />
                        <!-- <q-btn color="accent" label="+插入员工名称" size='sm' class="q-mr-md" @click='insert(2)' />
                        <q-btn color="accent" label="+插入员工别名" size='sm' class="q-mr-md" @click='insert(3)' /> -->
                    </div>
                </el-form-item>
                <el-form-item label="添加内容：">
                    <div v-if="MediumModel.length>0">
                        <div class="row items-center" v-for="(x,y) in MediumModel" :key="y">
                            <i class="el-icon-link"></i>
                            <span style="margin-left: 10px;cursor: pointer;display: inline-block;height: 40px;line-height: 40px;" >{{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='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>
            <q-card-actions align="left" class="bg-white" style="margin-top: 15px;">
                <q-btn color="accent" class="q-mr-md" label="保存" @click="savemove()" style="width: 100px;"
                    :loading="loading" />
                <q-btn class="q-mr-md" label="返回" @click="goblck()" style="width: 60px;" />
            </q-card-actions>
        </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>

        <!-- 人员选择 -->
        <choiceapproval v-if="outerVisible" @close="outerVisible = false" @success="getsuccess2" :byval='showMember' :cptype="choiceapprovaltype"></choiceapproval>

        
    </div>
</template>

<script>
    import {
        setWeChatWelcomesInfo,
        getWeChatMediumGroupList,
        getWeChatWelcomesInfo
    } from '../../api/system/wechat';
    import selectMaterial from "../../components/enterprise/selectMaterial"
    import imagetextform from "../../components/enterprise/imagetext-form"
    import appletform from "../../components/enterprise/applet-form"
    import videofrom from "../../components/enterprise/video-from"
    import filefrom from "../../components/enterprise/file-from"
    import choiceapproval from '../../components/enterprise/choiceapproval'
   
    
    import {
        getEmployeeAddrBook
    } from '../../api/users/user'
    export default {
        meta: {
            title: "欢迎语编辑"
        },
        components: {
            selectMaterial,
            imagetextform,//图文
            appletform,//小程序
            videofrom,//视频
            filefrom,//文件
            choiceapproval
        },
        name: "welcomeList",
        data() {
            return {
                loading: false,
                outerVisible: false,//选择人员弹窗
                filterText: '',//人员选择 帅选
                memberList: [],//
                allmemberList: [],
                showMember: [],
                membertype: '1',
                addMsg: {
                    Id: 0,
                    UserIdList: [],//成员列表
                    Content: "",
                    MediumIds: '',//使用的素材id '1,2,3'格式
                    Type: 1,//如果MediumIds不为空的情况 type为2 
                },
                defaultProps: {
                    children: 'ChildList',
                    label: 'EmployeeName',
                },
                materialType: 1,
                isshowselectMaterial: false,
                isshowimagetext: false,
                isshowapplet: false,
                MediumModel: [],//已选的添加内容
                classifyList: [],

                issvideofrom:false,
                isfilefrom:false,
                choiceapprovaltype:'1'

            }
        },
        created() {
            
            this.getWeChatMediumGroupList()
            this.getMember()
           
        },
        methods: {
            getMember() {
                getEmployeeAddrBook({}).then(res => {
                    if (res.Code == 1) {
                        this.memberList = res.Data
                        if(this.$route.query && this.$route.query.Id){
                            this.getWeChatWelcomesInfo()//获取详情 //在获取了人员列表再获取详情
                        }
                    }
                }).catch(() => {
                    if(this.$route.query && this.$route.query.Id){
                        this.getWeChatWelcomesInfo()//获取详情
                    }
                })
            },
            getWeChatWelcomesInfo() {
                getWeChatWelcomesInfo({WelcomeId:this.$route.query.Id}).then(res => {
                    if(res.Code==1){
                        let data  = res.Data
                        this.addMsg.Id = data.Id
                        this.addMsg.Type = data.Type
                        this.addMsg.Content = data.Content
                        this.addMsg.MediumIds = data.MediumIds
                        this.addMsg.UserIdList = data.UserIdList

                        this.MediumModel = data.MediumList?data.MediumList:[]
                        this.showMember = []
                        if(this.addMsg.UserIdList && this.addMsg.UserIdList.length>0){
                            this.addMsg.UserIdList.map(j=>{
                                if (j == -1) {
                                    this.membertype = '1'
                                    return
                                } else {
                                    this.membertype = '2'
                                    if(this.memberList && this.memberList.length>0){
                                        this.memberList.map(x=>{
                                            if(x.DeptId == j){
                                                this.showMember.push(x)
                                            }else{
                                                if(x.ChildList && x.ChildList.length>0){
                                                    this.getChildList(x.ChildList,j)
                                                }
                                            }
                                            return
                                        })
                                    }
                                    
                                }
                            })
                        }
                        
                        

                    }
                })
            },
            getChildList(list,j){
                list.map(x=>{
                    if(x.DeptId == j){
                        this.showMember.push(x)
                    }else{
                        if(x.ChildList && x.ChildList.length>0){
                            this.getChildList(x.ChildList,j)
                        }
                    }
                    return
                })
            },
            getWeChatMediumGroupList() {
                getWeChatMediumGroupList({}).then(res => {
                    this.classifyList = res.Data
                })
            },
            getMember2(type) {
                this.outerVisible = true
             
               
            },
            mySetCheckedKeys(id, index) {
                var arr = [];
                this.showMember.splice(index, 1);
                this.showMember.forEach(x => {
                    arr.push(x.Id);
                })
                if (this.$refs.tree) {
                    this.$refs.tree.setCheckedKeys(arr);
                }
            },
            handleNodeChange(data, checked) {
                data.IsCheck = checked;
                let res = this.$refs.tree.getCheckedNodes(true, true);
                this.showMember = [];
                res.forEach(x => {
                    var obj = {
                        EmployeeName: x.EmployeeName,
                        Id: x.Id
                    }
                    this.showMember.push(obj)
                })
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.DepartmentName.indexOf(value) !== -1;
            },
          
          
            insert(type) {
                if(type==1){
                    this.addMsg.Content = this.addMsg.Content + '##客户名称##'
                }else if(type==2){
                    this.addMsg.Content = this.addMsg.Content + '##员工名称##'
                }else{
                    this.addMsg.Content = this.addMsg.Content + '##员工别名##'
                }
            },
            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.MediumModel.length>0){
                  
                    let isyes  = false
                    this.MediumModel.map(x=>{
                        if(x.Id== data.Id){
                            isyes = true;
                            return
                        }
                    })
                    if(isyes==false){
                        this.MediumModel.push(data)
                    }else{
                        this.$q.notify({
                            type: 'negative',
                            message: `重复选择、请您重新选择!`,
                            position: 'top'
                        })
                        return
                    }
                }else{
                    this.MediumModel = [];
                    this.MediumModel.push(data)
                }
            },

            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;
            },
            getsuccess2(list,type){
                this.showMember = list;
                this.outerVisible  = false
            },
            savemove() {//保存
                if (this.membertype == 1) {
                    this.addMsg.UserIdList = ["-1"];
                } else {
                    if (this.showMember.length > 0) {
                        this.addMsg.UserIdList = []
                        this.showMember.forEach(x => {
                            this.addMsg.UserIdList.push(x.DeptId)
                        })
                    } else {
                        this.$q.notify({
                            type: 'negative',
                            message: `请选择人员列表`,
                            position: 'top'
                        })
                        return
                    }
                }
                this.addMsg.MediumIds == ''
                
                if(this.MediumModel && this.MediumModel.length>0){
                    let ids=[]
                    this.MediumModel.forEach(x=>{
                        ids.push(x.Id)
                    })
                    this.addMsg.MediumIds = ids.join(',')
                }
                
                if (this.addMsg.MediumIds == '') {
                    this.addMsg.Type = 1;
                    if (this.addMsg.Content == '') {
                        this.$q.notify({
                            type: 'negative',
                            message: `请输入文本内容`,
                            position: 'top'
                        })
                        return
                    }
                } else {
                    this.addMsg.Type = 2;
                }
                // 调取接口
                this.loading = true
                setWeChatWelcomesInfo(this.addMsg).then(res => {
                    this.loading = false
                    this.$q.notify({
                        icon: 'iconfont icon-chenggong',
                        color: 'accent',
                        timeout: 2000,
                        message: res.Message,
                        position: 'top'
                    })
                    this.goblck()
                }).catch((e) => {
                    this.loading = false
                })

            },
            goblck() {//返回上一个页面
                this.$router.go(-1);//返回上一层
            },
            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.MediumModel.splice(index,1)
            },
            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>