@extends('Yunshop\WorkWechat::layouts.base')
@section('title', '群管理')
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/work-wechat-platform/static/css/index.css')}}">
<style>

</style>
<div class="all">
    <div id="app" v-cloak>
        <div class="vue-head">
            <div class="vue-main-title" style="margin-bottom:20px">
                <div class="vue-main-title-left"></div>
                <div class="vue-main-title-content">群拓客 > 群管理</div>
                <div class="vue-main-title-button">
                    <el-button
                            type="primary"
                            icon="el-icon-refresh"
                            size="mini"
                            @click="syncData"
                    >同步群信息</el-button>
                </div>
            </div>
            <div class="vue-search">
                <el-form :inline="true" :model="search_form" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input v-model="search_form.id" placeholder="群ID"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="search_form.name" placeholder="群名称"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="search_form.owner_name" placeholder="群主"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="search_form.owner_member_kwd" placeholder="锁客会员昵称/姓名/手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="search_form.owner_member_uid" placeholder="锁客会员会员ID"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-date-picker
                                v-model="times"
                                type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                style="margin-left:5px;"
                                align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="search(1)">搜索</el-button>
                        <el-button  @click="export1()">导出</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <p>同步群信息时，请不要离开此页面，以免影响同步进度！</p>
            </div>
        </div>
        <div class="vue-main">
            <div class="vue-main-form">
                <div class="vue-main-title" style="margin-bottom:20px">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content" style="flex:0 0 130px">群列表</div>
                    <div class="" style="text-align:left;font-size:14px;color:#999">
                        <span>群数量：[[total]]</span>&nbsp;&nbsp;&nbsp;
                        <span>群客户总数量（未去重）：[[summary.all_members]]</span>&nbsp;&nbsp;&nbsp;
                        <span>群客户数量（去重）：[[summary.all_distinct_members]]</span>&nbsp;&nbsp;&nbsp;
                    </div>
                    <div class="vue-main-title-button">
                    </div>
                </div>
                <el-table :data="list" style="width: 100%">
                    <el-table-column label="ID" align="center" prop="id" width="100"></el-table-column>
                    <el-table-column label="创建时间" align="center" prop="group_created_time_str">
                    </el-table-column>
                    <el-table-column label="群名" align="center" prop="group_name">
                    </el-table-column>
                    <el-table-column label="群主" align="center" prop="owner_name">
                    </el-table-column>
                    <el-table-column align="center" prop="mobile">
                        <template slot="header" slot-scope="scope">
                            <div>外部客户数量</div>
                            <div>企业员工数量</div>
                        </template>
                        <template slot-scope="scope">
                            [[scope.row.customer_count]]<br>
                            [[scope.row.employee_count]]
                        </template>
                    </el-table-column>
                    <el-table-column label="锁客会员" align="center" prop="username">
                        <template slot-scope="scope">
                            <div style="cursor: pointer" @click="openMember(scope.row.id)">
                                <div v-if="scope.row.has_one_owner_member">
                                    <div>
                                        <img :src="scope.row.has_one_owner_member.avatar_image" style="width:30px;height:30px;padding:1px;border:1px solid #ccc">
                                    </div>
                                    <div>
                                        [[scope.row.has_one_owner_member.nickname]]
                                    </div>
                                </div>
                                <div v-else>
                                    <i class="el-icon-plus" style="font-size: 18px;font-weight: 600;"></i>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="群二维码" align="center" prop="qrcode_url">
                        <template slot-scope="scope">
                            <a :href="scope.row.qrcode_image" v-if="scope.row.qrcode_url">
                                <img :src="scope.row.qrcode_image" style="width:30px;height:30px;padding:1px;border:1px solid #ccc">
                            </a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="refund_time" label="操作" align="center" width="100">
                        <template slot-scope="scope">
                            <el-dropdown  trigger="click">
                                <span class="el-dropdown-link">
                                    <el-button size="small">操作</el-button>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item @click.native="gotoGroupMembers(scope.row.id)">群成员</el-dropdown-item>
                                    <el-dropdown-item @click.native="showUploadDialog(scope.row)">上传群二维码</el-dropdown-item>
                                    <el-dropdown-item @click.native="showNewPost(scope.row.id)">生成海报</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>

            </div>

        </div>
        <!-- 分页 -->
        <div class="vue-page" v-if="total>0">
            <el-row>
                <el-col align="right">
                    <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total"
                        :page-size="per_page" :current-page="current_page" background
                        ></el-pagination>
                </el-col>
            </el-row>
        </div>
        <!-- 选择会员 -->
        <el-dialog title="选择会员" :visible.sync="member_show" width="60%">
            <div>
                <el-input v-model="member_keyword" style="width:60%;" placeholder="会员手机号码"></el-input>
                <el-button @click="getMember" >搜索</el-button>
            </div>
            <el-table :data="member_list" style="width: 100%;height:400px;overflow:auto;margin-top: 10px;" v-loading="member_loading">
                <el-table-column label="ID" prop="uid" align="center" width="100px"></el-table-column>
                <el-table-column label="会员信息">
                    <template slot-scope="scope">
                        <div style="display:flex;align-items: center;">
                            <div v-if="scope.row.avatar_image" style="width:40px;">
                                <el-image :src="scope.row.avatar_image" alt="" style="width:40px;height:40px;border-radius:50%"></el-image>
                            </div>
                            <div style="flex:1;">【id:[[scope.row.uid]]】[[scope.row.nickname]]</div>
                        </div>

                    </template>
                </el-table-column>

                <el-table-column prop="refund_time" label="操作" align="center" width="320">
                    <template slot-scope="scope">
                        <el-button @click="chooseMember(scope.row)">
                            选择
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="member_show = false">取 消</el-button>
                </span>

        </el-dialog>
        <!-- 上传二维码 -->
        <el-dialog title="上传二维码" :visible.sync="uploadDialogShow" width="60%">
            <el-form ref="upload_qrcode_img_form" label-width="15%">
            <el-form-item label="二维码" prop="avatar">
                <div class="upload-box" @click="openUpload('qrcode_image')" v-if="!current_qrcode_image">
                    <i class="el-icon-plus" style="font-size:32px"></i>
                </div>
                <div @click="openUpload('qrcode_image')" class="upload-boxed" v-if="current_qrcode_image">
                    <img :src="current_qrcode_image" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                    <div class="upload-boxed-text">点击重新上传</div>
                    <div @click.stop="clearImg('qrcode_image')" style="cursor: pointer">
                        <i class="el-icon-close"></i>点击清除图片
                    </div>
                </div>
                <div class="tip">提示: 需通过新海报插件添加群拓客海报，上传二维码图片仅需要上传二维码部分，方形图片！</div>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="saveQrcodeImg">保 存</el-button>
                <el-button @click="uploadDialogShow = false">取 消</el-button>
            </span>
        </el-dialog>
        <el-dialog title="海报" :visible.sync="new_post_show" width="500">
            <div style="display:flex">
                <div class="center" style="width:280px;height:410px;margin:0 auto" >
                    <img :src="new_post_show_url" alt="" style="width:100%;">
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="download(new_post_show_url,'poster')">下载海报</el-button>
                <!-- <el-button @click="share_show = false">取 消</el-button> -->
                <!-- <el-button type="primary" @click="img_text_url = false">确 定</el-button> -->
            </span>
        </el-dialog>
        <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
    </div>
</div>
    @include('public.admin.uploadImg')
    <script>
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        name: 'test',
        data() {
            return {
                list:[],
                summary:{},
                times:[],
                search_form:{
                    id:'',
                    name:'',
                    owner_name:'',
                    owner_member_kwd:'',
                    owner_member_uid:''
                },
                uploadDialogShow:false,
                uploadShow:false,
                chooseImgName:'',
                current_id:0,
                current_row:{},
                current_qrcode_image:'',
                // 会员
                member_keyword:'',
                member_show:false,
                member_list:[],
                member_loading:false,
                choosed_member:{},
                new_post_show:false,
                new_post_show_url:'',
                rules: {},
                current_page:1,
                total:1,
                per_page:1,
                loading: null,
            }
        },
        created() {

        },
        destroyed() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        },
        mounted() {
            this.getData(1);
        },
        methods: {
            getData(page) {

                let json = {
                    page:page,
                    id:this.search_form.id,
                    name:this.search_form.name,
                    owner_name:this.search_form.owner_name,
                    owner_member_kwd:this.search_form.owner_member_kwd,
                    owner_member_uid:this.search_form.owner_member_uid
                };
                if(this.times && this.times.length>0) {
                    json.start_time = this.times[0];
                    json.end_time = this.times[1];
                }
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.group-develop-user.manage.groupChat.get-list') !!}',json).then(function(response) {
                    if (response.data.result) {
                        this.list = response.data.data.list.data;
                        this.current_page=response.data.data.list.current_page;
                        this.total=response.data.data.list.total;
                        this.per_page=response.data.data.list.per_page;
                        this.summary = response.data.data.summary;
                        loading.close();
                    } else {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                    loading.close();

                }, function(response) {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                    loading.close();
                });
            },
            export1(){
                var that = this;
                console.log(that.search_form);
                var url = "{!! yzWebFullUrl('plugin.group-develop-user.manage.groupChat.list-export') !!}";
                if (that.search_form.id) {
                    url += "&id="+that.search_form.id;
                }
                if (that.search_form.name) {
                    url += "&name="+that.search_form.name;
                }
                if (that.search_form.owner_name) {
                    url += "&owner_name="+that.search_form.owner_name;
                }
                if (that.search_form.owner_member_kwd) {
                    url += "&owner_member_kwd="+that.search_form.owner_member_kwd;
                }
                if (that.search_form.owner_member_uid) {
                    url += "&owner_member_uid="+that.search_form.owner_member_uid;
                }
                if(that.times && that.times.length>0) {
                    url += "&start_time="+that.times[0]+"&end_time="+that.times[1];
                }
                console.log(url);
                window.location.href = url;
            },
            syncData() {
                this.$confirm('确定同步吗？该过程可能耗时较长，同步完成前，请不要离开此页面，以免影响同步进度！', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                    this.loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.count = 0;
                    this.$http.post('{!! yzWebFullUrl('plugin.group-develop-user.manage.groupChat.synch') !!}',{is_start:1}).then(function (response) {
                            if (response.data.result) {
                                this.loop(1,response.data.data.next_cursor);
                            }
                            else{
                                this.$message({type: 'error',message: response.data.msg});
                            }
                        },function (response) {
                            this.$message({type: 'error',message: response.data.msg});
                            this.loading.close();
                        }
                    );
                }).catch(() => {
                    this.$message({type: 'info',message: '已取消操作'});
                });
            },
            loop(index,next_cursor) {
                this.$http.post('{!! yzWebFullUrl('plugin.group-develop-user.manage.groupChat.synch') !!}',{next_cursor:next_cursor}).then(function (response) {
                        if (response.data.result) {
                            if (!response.data.data.next_cursor) {
                                this.$message({type: 'success',message: '数据同步成功!'});
                                this.getData(this.current_page);
                                this.loading.close();
                            } else {
                                index++;
                                this.$message({type: 'success',message: "已同步"+(index)+"个群数据"});
                                this.loop(index,response.data.data.next_cursor);
                            }
                        }
                        else{
                            this.$message({type: 'error',message: response.data.msg});
                        }
                    },function (response) {
                        this.$message({type: 'error',message: response.data.msg});
                        this.loading.close();
                    }
                );
            },
            search(val) {
                this.getData(val);
            },
            openMember(id) {
                this.current_id = id;
                this.member_show = true;
            },
            getMember(){

                this.$http.post("{!! yzWebUrl('plugin.work-wechat.manage.member.query') !!}",{keyword:this.member_keyword}).then(response => {
                    if (response.data.result) {
                        this.member_list=response.data.data
                    }else{
                        this.$message({type: 'error',message: response.data.msg});
                    }
                }, response => {
                    this.$message({type: 'error',message: response.data.msg});
                    console.log(response);
                });
            },
            chooseMember(row) {
                this.choosed_member = row;
                this.bindUser(this.current_id,row.uid);
                this.member_show = false;
                console.log(this.form)
            },
            bindUser(id,uid){
                this.$http.post("{!! yzWebUrl('plugin.group-develop-user.manage.groupChat.bind-user') !!}",{id:id,uid:uid}).then(response => {
                    if (response.data.result) {
                        let current_page = this.current_page;
                        this.getData(current_page);
                        this.$message({type: 'success',message: '操作成功'});
                    }else{
                        this.$message({type: 'error',message: response.data.msg});
                    }
                }, response => {
                    this.$message({type: 'error',message: response.data.msg});
                    console.log(response);
                });
            },
            gotoGroupMembers(id){
                window.location.href = `{!! yzWebFullUrl('plugin.group-develop-user.manage.groupChat.groupMember') !!}`+`&group_id=`+id;
            },
            showUploadDialog(row){
                this.uploadDialogShow = true;
                this.current_row = row;
                this.current_qrcode_image = row.qrcode_image;
            },
            openUpload(str) {
                this.chooseImgName = str;
                this.uploadShow = true;
            },
            changeProp(val) {
                if(val == true) {
                    this.uploadShow = false;
                }
                else {
                    this.uploadShow = true;
                }
            },
            sureImg(name,image,image_url) {
                //console.log(image_url);
                this.current_qrcode_image = image_url;
            },
            clearImg(str) {
                this.current_qrcode_image = '';
                this.$forceUpdate();
            },
            saveQrcodeImg(){

                this.$http.post("{!! yzWebUrl('plugin.group-develop-user.manage.groupChat.save-qrcode-img') !!}",{id:this.current_row.id,qrcode_url:this.current_qrcode_image}).then(response => {
                    if (response.data.result) {
                        let current_page = this.current_page;
                        this.getData(current_page);
                        this.current_qrcode_image = '';
                        this.uploadDialogShow = false;
                        this.uploadShow = false;
                        this.$message({type: 'success',message: '操作成功'});
                    }else{
                        this.$message({type: 'error',message: response.data.msg});
                    }
                }, response => {
                    this.$message({type: 'error',message: response.data.msg});
                    console.log(response);
                });
            },
            showNewPost(id){
                this.$http.post("{!! yzWebUrl('plugin.group-develop-user.manage.groupChat.get-new-post') !!}",{id:id}).then(response => {
                    if (response.data.result) {
                        this.new_post_show = true;
                        this.new_post_show_url=response.data.data.image_url
                    }else{
                        this.$message({type: 'error',message: response.data.msg});
                    }
                }, response => {
                    this.$message({type: 'error',message: response.data.msg});
                    console.log(response);
                });
            },
            download(href, name) {
                let eleLink = document.createElement("a");
                eleLink.download = name;
                eleLink.href = href;
                eleLink.click();
                eleLink.remove();
            }
        },
    })
</script>
@endsection