@extends('layouts.base')
@section('title', '中台余额明细')
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/store-cashier/src/common/static/index.css')}}">
    <link rel="stylesheet" href="{{resource_get('plugins/yz-supply/assent/css/album1.css?time='.time())}}">

    <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;}
        .iframe {

            position: absolute;

            width: 100%;

            height: 100%;

            background: #fff;

            overflow-y: hidden;

        }
    </style>
    <div class="all">
        <div id="qrcode" ref="qrcode" style="display:none;"></div>
        <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" plain icon="el-icon-plus" size="small" @click="addModal">添加专题</el-button>--}}
                    {{--                    </div>--}}
                </div>
                <div class="vue-search">
                    <el-form :inline="true" :model="search_form" class="demo-form-inline">
                        <el-form-item label="">
                            <el-select v-model="search_form.middleground_configuration_id" placeholder="请选择供应链" clearable  filterable  >
                                <el-option v-for="(item,index) in middleground_configuration" :key="item.id" :label="item.title" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="search(1)">搜索</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;
                        </div>
                        <div class="vue-main-title-button">
                        </div>
                    </div>
                    <el-table :data="list" style="width: 100%;margin-bottom: 130px;" :class="table_loading==true?'loading-height':''"  v-loading="table_loading">
                        <el-table-column prop="id" label="ID" width="70" align="center"></el-table-column>
                        <el-table-column prop="pay_sn" label="支付号"  align="center"></el-table-column>
                        <el-table-column prop="username" label="手机号"  align="center"></el-table-column>
                        <el-table-column prop="nickname" label="昵称"  align="center"></el-table-column>
                        <el-table-column prop="balance" label="采购余额"  align="center"></el-table-column>
                        <el-table-column  label="业务类型"  align="center">
                            <template slot-scope="scope">
                                [[scope.row.business_type_name]]
                                <p v-if="scope.row.order_id">订单id:[[scope.row.order_id]]</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="amount" label="收入/支出"  align="center"></el-table-column>
                        <el-table-column prop="remarks" label="备注"  align="center"></el-table-column>
                        <el-table-column prop="created_at" label="时间" width="200" align="center">
                            <template slot-scope="scope">
                                [[scope.row.created_at]]
                            </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_size" :current-page="current_page" background
                        ></el-pagination>
                    </el-col>
                </el-row>
            </div>

        </div>
    </div>
    <script src="{{resource_get('static/js/qrcode.min.js')}}"></script>
    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],

            data() {
                return{

                    balance:0,//汇聚余额
                    userGoinBalance:0,//站内余额
                    middleground_configuration:[],//中台供应链
                    category:[],
                    times:[],
                    list:[],//商品列表
                    table_loading:false,
                    all_loading:false,
                    loading:false,
                    search_form:{
                        middleground_configuration_id:"",
                    },
                    //分页
                    total:0,
                    per_size:0,
                    current_page:0,

                }
            },
            created() {
                console.log('category');

                console.log(this.category)

                this.getMiddlegroundConfiguration();

            },
            methods: {
                skipUrl(item){
                    window.location.href = item.url
                },
                getMiddlegroundConfiguration(){
                    this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.get-middleground-configurations') !!}').then(function (response) {
                        if (response.data.result) {
                            this.middleground_configuration = response.data.data;
                            this.search_form.middleground_configuration_id = response.data.data[0].id
                            this.getDataList();
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, function (response) {
                        this.$message({message: response.data.msg, type: 'error'});
                    })
                },
                getDataList(page){
                    var that = this;
                    that.table_loading = true;
                    that.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.bulk-order.balance-data') !!}",{page:page,search:that.search_form}).then(response => {
                        console.log(response.data.data);
                        if(response.data.result==1){
                            that.list = response.data.data.data.list;
                            that.total = response.data.data.data.total;
                            that.current_page = response.data.data.data.page;
                            that.per_size = response.data.data.data.pageSize;
                            that.balance = response.data.data.balance;
                            that.userGoinBalance = response.data.data.userGoinBalance;
                        }
                        else{
                            that.list = [];
                            that.total = 0;
                            that.current_page = 1;
                            that.per_size = 15;
                            that.balance = 0;
                            that.userGoinBalance = 0;
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }),function(res){
                        console.log(res);
                        that.table_loading = false;
                    };
                },
                // 搜索、分页
                search(page) {
                    this.getDataList(page);
                },

                // 上一页
                prev() {
                    let page = parseInt(this.current_page) - 1;
                    if (page < 1) {
                        return false;
                    }

                    this.getDataList(page);
                },
                //下一页
                next() {
                    let page = parseInt(this.current_page) + 1;
                    if (this.per_size < this.page_number) {
                        return false;
                    }

                    this.getDataList(page);
                },
                //跳页
                jumpPage() {
                    if (this.current_page <= 1) {
                        this.current_page = 1;
                    }
                    // if(this.current_page>100){
                    //     this.current_page = 100
                    // }

                    this.getDataList(this.current_page);
                },

            },
        })

    </script>
@endsection