@extends('Yunshop\WorkWechat::layouts.base')
@section('title', '群成员')
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/work-wechat-platform/static/css/index.css')}}">
    <style>
        .edit-i{display:none;}
        .el-table_1_column_2:hover .edit-i{font-weight:900;padding:0;margin:0;display:inline-block;}
        .el-tabs__item,.is-top{font-size:16px}
        .el-tabs__active-bar { height: 3px;}
        .total-list{flex:1;min-width:300px;background:#fff;margin-right:15px;padding: 15px;border-radius: 5px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}
        .total-list-title{font-size:14px;font-weight:600;color:#333;line-height:24px;}
        .total-list-data{font-size:12px;font-weight:500;color:#999;line-height:24px;}
        .total-list-num{font-size:28px;font-weight:600;color:#333;line-height:48px;padding-top:20px}
        /* 导航 */
        .el-radio-button .el-radio-button__inner,.el-radio-button:first-child .el-radio-button__inner {border-radius: 4px 4px 4px 4px;border-left: 0px;}
        .el-radio-button__inner{border:0;}
        .el-radio-button:last-child .el-radio-button__inner {border-radius: 4px 4px 4px 4px;}
    </style>
<div class="all">
    <div id="app" v-cloak>
        <div class="vue-head">
            <el-radio-group v-model="member_type">
                <el-radio-button label="1" @click.native="handleClick(1)">外部成员</el-radio-button>
                <el-radio-button label="2" @click.native="handleClick(2)">内部成员</el-radio-button>
            </el-radio-group>
        </div>
        <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>

            <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.customer_kwd" placeholder="成员会员信息"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="search_form.invitor_kwd" placeholder="邀请人信息"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="search_form.chat_owner_kwd" placeholder="系统推荐人昵称/姓名/手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="search_form.chat_owner_uid" placeholder="系统推荐人会员ID"></el-input>
                    </el-form-item>
                    <el-select v-model="search_form.join_scene" clearable placeholder="入群方式">
                        <el-option label="直接邀请入群" value="1"></el-option>
                        <el-option label="邀请链接入群" value="2"></el-option>
                        <el-option label="扫描群二维码入群" value="3"></el-option>
                    </el-select>
                    <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>
        <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.in_group_count]]</span>&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" width="150" prop="join_time_str">
                    </el-table-column>
                    <el-table-column label="状态" align="center" prop="status_desc">
                    </el-table-column>
                    <el-table-column label="成员会员信息" align="center" prop="has_one_customer">
                        <template slot-scope="scope">
                            <div>
                                <div v-if="scope.row.has_one_customer && scope.row.has_one_customer.has_one_member">
                                    <div>
                                        <img :src="scope.row.has_one_customer.has_one_member.avatar_image" style="width:30px;height:30px;padding:1px;border:1px solid #ccc">
                                    </div>
                                    <div v-if="scope.row.has_one_customer.has_one_member.nickname">
                                        [[scope.row.has_one_customer.has_one_member.nickname]]
                                    </div>
                                    <div v-else>
                                        未更新
                                    </div>
                                </div>
                                <div v-else>
                                    未更新
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="入群方式" align="center" prop="join_scene_desc">
                    </el-table-column>
                    <el-table-column label="邀请人" align="center" prop="has_one_invitor">
                        <template slot-scope="scope">
                            <div>
                                <div v-if="scope.row.has_one_invitor">
                                    <div>
                                        <img :src="scope.row.has_one_invitor.avatar_mediaid" style="width:30px;height:30px;padding:1px;border:1px solid #ccc">
                                    </div>
                                    <div>
                                        [[scope.row.has_one_invitor.name]]
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="150" prop="has_one_group_member_id">
                        <template slot="header" slot-scope="scope">
                            <div>系统会员ID</div>
                            <div>注册时间</div>
                        </template>
                        <template slot-scope="scope">
                            <div>
                                <div v-if="scope.row.has_one_customer && scope.row.has_one_customer.has_one_member">
                                    <div>
                                        [[scope.row.has_one_customer.has_one_member.uid]]
                                    </div>
                                    <div>
                                        [[scope.row.customer_member_createtime]]
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="系统推荐人" align="center" prop="has_one_group_member_name">
                        <template slot-scope="scope">
                            <div>
                                <div v-if="scope.row.parent_member_uid">
                                    <div>
                                        <img :src="scope.row.parent_member_avatar_image" style="width:30px;height:30px;padding:1px;border:1px solid #ccc">
                                    </div>
                                    <div>
                                        [[scope.row.parent_member_nickname]]
                                    </div>
                                </div>
                                <div v-else>
                                    --
                                </div>
                            </div>
                        </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>
    </div>
</div>

<script>
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        name: 'test',
        data() {
            return {
                list:[],
                summary:{},
                times:[],
                search_form:{
                    id:'',
                    customer_kwd:'',
                    invitor_kwd:'',
                    chat_owner_kwd:'',
                    chat_owner_uid:'',
                    join_scene:''
                },
                member_type:'1',
                group_id:'',
                current_id:0,
                rules: {},
                current_page:1,
                total:1,
                per_page:1,
            }
        },
        created() {

        },
        mounted() {
            this.group_id = getParam('group_id');
            this.getData(1);
        },
        methods: {
            getData(page) {

                let json = {
                    page:page,
                    group_id:this.group_id,
                    id:this.search_form.id,
                    customer_kwd:this.search_form.customer_kwd,
                    invitor_kwd:this.search_form.invitor_kwd,
                    chat_owner_kwd:this.search_form.chat_owner_kwd,
                    chat_owner_uid:this.search_form.chat_owner_uid,
                    join_scene:this.search_form.join_scene
                };
                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-group-members') !!}',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();
                });
            },
            search(val) {
                this.getData(val);
            },
            export1(){
                var that = this;
                console.log(that.search_form);
                var url = "{!! yzWebFullUrl('plugin.group-develop-user.manage.groupChat.group-member-list-export') !!}";
                url += "&group_id="+this.group_id;
                if (that.search_form.id) {
                    url += "&id="+that.search_form.id;
                }
                if (that.search_form.customer_kwd) {
                    url += "&customer_kwd="+that.search_form.customer_kwd;
                }
                if (that.search_form.invitor_kwd) {
                    url += "&invitor_kwd="+that.search_form.invitor_kwd;
                }
                if (that.search_form.chat_owner_kwd) {
                    url += "&chat_owner_kwd="+that.search_form.chat_owner_kwd;
                }
                if (that.search_form.chat_owner_uid) {
                    url += "&chat_owner_uid="+that.search_form.chat_owner_uid;
                }
                if (that.search_form.join_scene) {
                    url += "&join_scene="+that.search_form.join_scene;
                }
                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;
            },
            handleClick(val) {
                if(val == 1) {

                }
                else if(val == 2) {
                    let link = `{!! yzWebFullUrl('plugin.group-develop-user.manage.groupChat.groupEmployee') !!}`;
                    link = link + '&group_id='+ this.group_id
                    window.location.href = link;
                }

            },
        },

    })

</script>
@endsection