@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;
    }
    .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-row>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">基金总数:[[fundData.fund_money || 0]]</div>
                        </el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light">文创豆总数：[[fundData.voucher_number || 0]]</div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple">当前价值:[[fundData.current_fee || 0]]</div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light">上次价值:[[fundData.last_fee || 0]]</div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light">历史基金:[[fundData.history_fund_money || 0]]</div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light">历史文创豆：[[fundData.history_number || 0]]</div></el-col>
                    </el-row>
                </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>
                            <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="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="pay_money" label="订单金额"></el-table-column>
                        <el-table-column align="center" prop="fund_money" label="入账基金"></el-table-column>
                        <el-table-column align="center" prop="voucher_number" label="用户文创豆"> </el-table-column>
                        <el-table-column align="center" prop="created_at" label="创建时间"> </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: '#weightValueIndexContent',
        delimiters: ['[[', ']]'],
        name: 'cultural_space_index_content',
        data: {
            fundData:[],
            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: '',
            }
        },
        watch:{},
        mounted () {
            this.getData();
        },
        methods: {
            // 获取数据  根据当前选项卡获取对应的信息
            getData(){
                let _this = this;
                let loading = _this.showLoading();
                let link = "{!! yzWebUrl('plugin.cultural-space.admin.fund.getfund') !!}";
                if(_this.tabs_active === 'show_group') link = "{!! yzWebUrl('plugin.cultural-space.admin.fund.getfundRecord') !!}";
                $.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(_this.tabs_active != 'show_group'){
                            _this.fundData= data;
                            return;
                        }
                        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)'
                });
            }
        },
    })
</script>
@endsection