@extends('layouts.base')
<style>
    .user{
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
        height: 80px;
    }
    .user .user-avatar{
        height: 50px;
        width: 50px;
        margin-right: 5px;
        border-radius: 50%;
        overflow: hidden;
    }
    .user .user-avatar .avatar-image{
        width: 100% !important;
        height: 100% !important;
    }
    .user .user-info{
        height: 50px;
        text-align: left;
    }
    .user .user-info .user-nickname{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .user .user-info .user-status{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .panel-body .label{
        display: inline-block;
        margin-bottom: 2px;
        border-radius: 2px;
        font-size: 14px!important;
        padding: 5px !important;
        text-transform: uppercase;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
    }
    .el-pagination{
        text-align: right!important;
        margin-top: 20px!important;
    }
    .panel-body{
        padding-top: 0;
        margin-bottom: 30px;
        overflow: auto;
        padding-right: 30px;
    }
</style>
@section('content')
<div class="w1200 m0a" id="contributionIndexContent">
    <div class="panel panel-default">
        <div class="panel-body">
            <el-tabs v-model="tabs_active" @tab-click="changeTabs">
                <el-tab-pane label="变更明细" name="show_detail">
                    {{--搜索--}}
                    <el-form :inline="true" :model="search_info">
                        <el-form-item label="变更类型">
                            <el-select v-model="search_info.change_type" placeholder="全部">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="减少" value="0"></el-option>
                                <el-option label="增加" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="会员ID">
                            <el-input v-model="search_info.uid" placeholder="请输入会员ID"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="clickSearch">查询</el-button>
                        </el-form-item>
                    </el-form>
                    {{--表单--}}
                    <el-table :data="list" style="width: 100%" v-if="tabs_active == 'show_detail'">
                        <el-table-column align="center" prop="id" label="ID" width="80"></el-table-column>
                        <el-table-column align="center" prop="member" label="用户信息" width="230">
                            <template slot-scope="scope">
                                <div class="user">
                                    <div class="user-avatar">
                                        <img class="avatar-image" :src="scope.row.member.avatar_image || ''" />
                                    </div>
                                    <div class="user-info">
                                        <div class="user-nickname">昵称：[[scope.row.member.nickname || '']]</div>
                                        <div class="user-status">ID：[[scope.row.member.uid || '']]</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="change_front" label="变更前持有数" width="150"></el-table-column>
                        <el-table-column align="center" prop="change_type" label="变更类型" width="100">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.change_type == 0 ? 'danger' : 'success'" disable-transitions>
                                    [[scope.row.change_type == 0 ? '减少' : '增加']]
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="change_quantity" label="变更数量" width="150"></el-table-column>
                        <el-table-column align="center" prop="change_after" label="变更后持有数" width="150"></el-table-column>
                        <el-table-column align="center" prop="remark" label="变更原因"></el-table-column>
                        <el-table-column align="center" prop="created_at" label="变更时间" width="200"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="用户持有统计" name="show_group">
                    {{--搜索--}}
                    <el-form :inline="true" :model="search_info">
                        <el-form-item label="会员ID">
                            <el-input v-model="search_info.uid" placeholder="请输入会员ID"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="clickSearch">查询</el-button>
                        </el-form-item>
                    </el-form>
                    {{--表单--}}
                    <el-table :data="list" style="width: 100%" v-if="tabs_active == 'show_group'">
                        <el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
                        <el-table-column align="center" prop="member" label="用户信息" width="300">
                            <template slot-scope="scope">
                                <div class="user">
                                    <div class="user-avatar">
                                        <img class="avatar-image" :src="scope.row.member.avatar_image || ''" />
                                    </div>
                                    <div class="user-info">
                                        <div class="user-nickname">昵称：[[scope.row.member.nickname || '']]</div>
                                        <div class="user-status">ID：[[scope.row.member.uid || '']]</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="change_front">
                            <template slot="header" slot-scope="scope">
                                <span class="label label-default">平台总数</span>
                                <span class="label label-info">用户持有</span>
                                <span class="label label-warning">占比(%)</span>
                            </template>
                            <template slot-scope="scope">
                                <span class="label label-default">[[scope.row.total_proportion || '0.00' ]]</span>
                                <span class="label label-info">[[scope.row.contribution || '0.00' ]]</span>
                                <span class="label label-warning">[[scope.row.ratio ? scope.row.ratio + '%' : '0%' ]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="created_at" label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="seeChangeRecord(scope.row.uid)">变更明细</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="分红明细" name="show_bonus">
                    {{--搜索--}}
                    <el-form :inline="true" :model="search_info">
                        <el-form-item label="是否结算">
                            <el-select v-model="search_info.is_settlement" placeholder="全部">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="未结算" value="0"></el-option>
                                <el-option label="已结算" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="会员ID">
                            <el-input v-model="search_info.uid" placeholder="请输入会员ID"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="clickSearch">查询</el-button>
                        </el-form-item>
                    </el-form>
                    {{--表单--}}
                    <el-table :data="list" style="width: 100%" v-if="tabs_active == 'show_bonus'">
                        <el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
                        <el-table-column align="center" prop="member" label="用户信息" width="300">
                            <template slot-scope="scope">
                                <div class="user">
                                    <div class="user-avatar">
                                        <img class="avatar-image" :src="scope.row.member.avatar_image || ''" />
                                    </div>
                                    <div class="user-info">
                                        <div class="user-nickname">昵称：[[scope.row.member.nickname || '']]</div>
                                        <div class="user-status">ID：[[scope.row.member.uid || '']]</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="change_front">
                            <template slot="header" slot-scope="scope">
                                <span class="label label-default">总销售额</span>
                                <span class="label label-info">分红</span>
                                <span class="label label-warning">占比(%)</span>
                            </template>
                            <template slot-scope="scope">
                                <span class="label label-default">[[scope.row.total_money || '0.00' ]]</span>
                                <span class="label label-info">[[scope.row.money || '0.00' ]]</span>
                                <span class="label label-warning">[[scope.row.proportion ? scope.row.proportion + '%' : '0.00' ]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="is_settlement" label="是否结算">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.is_settlement == 0 ? 'danger' : 'success'" disable-transitions>
                                    [[scope.row.is_settlement == 0 ? '未结算' : '已结算']]
                                </el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="分红周期记录" name="show_cycle">
                    <el-table :data="list" style="width: 100%">
                        <el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
                        <el-table-column align="center" prop="order_total_money" label="订单总金额" width="150"></el-table-column>
                        <el-table-column align="center" prop="contribution_bonus_ratio" label="销售额比例" width="150">
                            <template slot-scope="scope">
                                [[ scope.row.contribution_bonus_ratio + '%']]
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="total_money" label="总销售额" width="150"></el-table-column>
                        <el-table-column align="center" label="统计时间段" min-width="400">
                            <template slot-scope="scope">
                                [[scope.row.start_time]] ~ [[scope.row.end_time]]
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="created_at" label="处理时间" width="200"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            {{--分页--}}
            <el-pagination
                    v-if="total_page > 1"
                    background
                    layout="prev, pager, next"
                    :page-count="total_page"
                    :current-page="page"
                    @current-change="changePage">
            </el-pagination>
        </div>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#contributionIndexContent',
        delimiters: ['[[', ']]'],
        name: 'cultural_space_index_content',
        data() {
            return {
                tabs_active: 'show_detail',
                // 分页信息
                page: 1,
                total_page: 1,
                list: [],
                search_info: {
                    uid: '',
                    change_type: '',
                    is_settlement: '',
                }
            }
        },
        watch:{},
        mounted () {
            this.getData();
        },
        methods: {
            // 获取数据  根据当前选项卡获取对应的信息
            getData(){
                let _this = this;
                let loading = _this.showLoading();
                // 请求获取数据
                $.ajax({
                    url: "{!! yzWebUrl('plugin.cultural-space.admin.contribution.index') !!}",
                    type: "post",
                    data: {
                        page: _this.page,
                        search: _this.search_info,
                        tabs_active: _this.tabs_active,
                    },
                    success: function(result) {
                        let data = result.data;
                        if(parseInt(result.result) === 1){
                            // 处理数据
                            _this.list = data.data;
                            _this.total_page = data.last_page;
                        }
                        loading.close();
                    }
                });
            },
            // 切换选项卡
            changeTabs(){
                this.page = 1;
                this.total_page = 1;
                this.list = [];
                this.search_info = Object.assign({},this.$options.data().search_info);
                this.getData();
            },
            // 数据分页
            changePage(val){
                this.page = val;
                this.getData();
            },
            // 相关搜索
            clickSearch(){
                this.page = 1;
                this.getData()
            },
            // 显示加载动画
            showLoading(){
                return this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            // 用户持有统计中查看某个用户的贡献值变更记录
            seeChangeRecord(uid){
                this.search_info.uid = uid;
                this.page = 1;
                this.tabs_active = 'show_detail';
                this.getData()
            },
        },
    })
</script>
@endsection