@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;
    }
    .level_0{
        background-color: #5bc0de!important;
    }
    .level_1{
        background-color: #f0ad4e!important;
    }
    .level_2{
        background-color: #5cb85c!important;
    }
    .level_3{
        background-color: #337ab7!important;
    }
    .level_4{
        background-color: #d9534f!important;
    }
    .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="weightValueIndexContent">
    <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_list">
                        <el-form-item label="变更类型">
                            <el-select v-model="search_list.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_list.member_id" placeholder="请输入会员ID"></el-input>
                        </el-form-item>
                        <el-form-item label="权重值类型">
                            <el-select v-model="search_list.team_dividend_agency_level_id" placeholder="全部">
                                <el-option label="全部" value=""></el-option>
                                <el-option v-for="(item,index) in level_list" :key="index" :label="item.level_name" :value="item.id"></el-option>
                            </el-select>
                        </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%">
                        <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="change_quantity" label="权重值类型" width="150">
                            <template slot-scope="scope">
                                <span :class="'label level_'+scope.row.sort">
                                    [[scope.row.level.level_name ? scope.row.level.level_name + '权重值' : '']]
                                </span>
                            </template>
                        </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_list">
                        <el-form-item label="会员ID">
                            <el-input v-model="search_list.member_id" placeholder="请输入会员ID"></el-input>
                        </el-form-item>
                        <el-form-item label="权重值类型">
                            <el-select v-model="search_list.team_dividend_agency_level_id" placeholder="全部">
                                <el-option label="全部" value=""></el-option>
                                <el-option v-for="(item,index) in level_list" :key="index" :label="item.level_name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="clickSearch">查询</el-button>
                            <el-button @click="exportExcel">导出</el-button>
                        </el-form-item>
                    </el-form>
                    {{--表单--}}
                    <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="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_quantity" label="权重值类型">
                            <template slot-scope="scope">
                                <span :class="'label level_'+scope.row.sort">
                                    [[scope.row.level.level_name ? scope.row.level.level_name + '权重值' : '']]
                                </span>
                            </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_quantity || '0.00' ]]</span>
                                <span class="label label-info">[[scope.row.quantity || '0.00' ]]</span>
                                <span class="label label-warning">[[scope.row.ratio + '%']]</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="created_at" label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="seeDetail(scope.row.member_id,scope.row.team_dividend_agency_level_id)">变更明细</el-button>
                                <el-button type="warning" @click="changeWeightValue(scope.row)">权重值变更</el-button>
                            </template>
                        </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>

    {{--用户权重值变更--}}
    <el-dialog title="权重值变更" :visible.sync="change_weight_value" @close="changeWeightValuePopupClose">
        <template>
            <el-form :model="change_info">
                <el-form-item label="当前持有">[[ change_weight_value_info.quantity ]]</el-form-item>
                <el-form-item label="变更类型">
                    <el-radio-group v-model="change_info.change_type" style="margin-top:11px">
                        <el-radio label="1">增加</el-radio>
                        <el-radio label="0">减少</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="变更数量">
                    <el-input v-model.number="change_info.change_quantity" placeholder="请输入变更数量" type="number" style="width: 300px!important;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="changeWeightValueSubmit">提交</el-button>
                </el-form-item>
            </el-form>
        </template>
    </el-dialog>
</div>

<script type="text/javascript">
    new Vue({
        el: '#weightValueIndexContent',
        delimiters: ['[[', ']]'],
        name: 'weight_value_index_content',
        data: {
            tabs_active: 'show_detail',
            level_list: JSON.parse('{!! json_encode($level_list) !!}'),
            // 分页信息
            page: 1,
            total_page: 1,
            list: [],
            search_list: {
                member_id: '',
                team_dividend_agency_level_id: '',
                change_type: '',
            },
            // 权重值变更
            change_weight_value: false,
            change_weight_value_info: {},
            change_info: {
                change_type: '1',// 变更类型：0=减少，1=增加
                change_quantity: '',// 变更数量
            },
        },
        watch:{},
        mounted () {
            this.getData();
        },
        methods: {
            // 获取数据  根据当前选项卡获取对应的信息
            getData(){
                let _this = this;
                let loading = _this.showLoading();
                let link = "{!! yzWebUrl('plugin.weight-value.admin.index.changeRecord') !!}";
                if(_this.tabs_active === 'show_group') link = "{!! yzWebUrl('plugin.weight-value.admin.index.changeGroupRecord') !!}";
                $.ajax({
                    url: link,
                    type: "post",
                    data: {
                        page: _this.page,
                        search: _this.search_list,
                        is_get: 1
                    },
                    success: function(result) {
                        loading.close(0);
                        let data = result.data;
                        if(parseInt(result.result) === 1){
                            // 处理数据
                            _this.list = data.data;
                            _this.total_page = data.last_page;
                        }
                    }
                });
            },
            // 切换选项卡
            changeTabs(){
                this.page = 1;
                this.search_list = {
                    member_id: '',
                    team_dividend_agency_level_id: '',
                    change_type: '',
                };
                this.total_page = 1;
                this.list = [];
                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)'
                });
            },
            // 查看分组的变更明细
            seeDetail(member_id,level_id){
                let link = "{{yzWebUrl('plugin.weight-value.admin.index.changeRecord')}}" + `&member_id=${member_id}&level_id=${level_id}`;
                let popup = util.ajaxshow(link,'权重值变更明细',{
                    width: $(window).width() * 0.8 > 1200 ? $(window).width() * 0.8 : 1200,
                    height: $(window).height() * 0.8 > 1200 ? $(window).height() * 0.8 : 1200,
                });
            },
            // 权重值变更 - 显示变更弹框
            changeWeightValue(info){
                this.change_weight_value = true;
                this.change_weight_value_info = info;
            },
            // 权重值变更 - 关闭弹框
            changeWeightValuePopupClose(){
                this.change_weight_value = false;
                this.change_weight_value_info = {};
            },
            // 权重值变更 - 提交修改
            changeWeightValueSubmit(){
                let _this = this;
                let loading = _this.showLoading();
                let changeInfo = _this.change_info;
                changeInfo.uid = this.change_weight_value_info.member_id;
                changeInfo.team_dividend_agency_level_id = this.change_weight_value_info.team_dividend_agency_level_id;

                $.ajax({
                    url: "{!! yzWebUrl('plugin.weight-value.admin.index.changeWightValue') !!}",
                    type: "post",
                    data: changeInfo,
                    success: function(result) {
                        loading.close(0);
                        _this.$alert(result.msg).then(()=>{
                            _this.getData();
                            // _this.changeWeightValuePopupClose();
                        });
                    }
                });
            },
            // 权重值变更 - 导出数据
            exportExcel(){
                let _this = this;
                let searchList = this.search_list;
                window.location.href = "{!! yzWebUrl('plugin.weight-value.admin.index.exportExcel') !!}" + '&search_list=' + JSON.stringify(searchList);
            },


        },
    })
</script>
@endsection