@extends('layouts.base')
@section('title', '分红记录')
@section('content')
<style>
    .record #app .record-title{padding:15px 0;padding-bottom:10px;font-size:16px;line-height:30px;border-bottom:solid 1px #eee;color:#333;margin-bottom:25px;}
    .amount{margin-bottom:15px;}
    </style>
    <div class="record">
        <div id="app">
            <div class="record-title">
                <b>分红记录</b>
            </div>
            <template>
                <el-form :inline="true" :model="search_form" ref="search_form">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="视频ID">
                                <el-input v-model="search_form.vid" placeholder="请输入视频ID"></el-input>
                            </el-form-item>
                            <el-form-item label="会员ID">
                                <el-input v-model="search_form.uid" placeholder="请输入会员ID"></el-input>
                            </el-form-item>
                            <el-form-item label="会员昵称/姓名/手机号">
                                <el-input v-model="search_form.member" placeholder="请输入会员昵称/姓名/手机号"></el-input>
                            </el-form-item>
                            <el-form-item label="发现标题">
                                <el-input v-model="search_form.vtitle" placeholder="请输入发现标题"></el-input>
                            </el-form-item>
                            <el-form-item label="商品ID">
                                <el-input v-model="search_form.vgoods_id" placeholder="请输入商品ID"></el-input>
                            </el-form-item>
                            <el-form-item label="时间范围">
                                <el-date-picker v-model="search_form.time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <template>
                                    <el-select v-model="seleceTime" placeholder="请选择">
                                        <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                            <el-form-item style="text-align:right;">
                                <a href="#">
                                    <el-button type="success" icon="el-icon-search" @click="search()">搜索</el-button>
                                </a>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="amount"><span>累计订单金额:[[statistic.order_price]]元,</span><span>累计奖励金额:[[statistic.amount]]元</span></div>
                <div class="rest"><span>已结算累计订单金额:[[statistic.finish_order_price]]元,</span><span>已结算累计奖励金额:[[statistic.wait_amount]]元</span></div>
                <template>
                    <!-- 表格start -->
                    <el-table :data="list" style="width: 100%" v-loading="search_loading">
                        <el-table-column prop="id" label="时间" align="center">
                            <template slot-scope="scope">
                                <div>[[scope.row.created_at]]</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="vid" label="视频ID" align="center"></el-table-column>
                        <el-table-column prop="member" label="会员" align="center">
                            <template slot-scope="scope" v-if="scope.row.member">
                                <img :src="scope.row.member.avatar_image" style="width:30px;height:30px;padding:1px;border:1px solid #ccc;">
                                <div>[[scope.row.member.nickname]]</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="title" label="发现标题" align="center">
                            <template slot-scope="scope">
                            <span>[[scope.row.video.title]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="order" label="订单号" prop="number" align="center">
                            <template slot-scope="scope">
                            <span>[[scope.row.order.order_sn]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="order_price" label="订单金额(元)" prop="number" align="center"></el-table-column>
                        <el-table-column prop="ratio" label="奖励比例%" prop="number" align="center"></el-table-column>
                        <el-table-column prop="amount" label="奖励金额(元)" prop="number" align="center"></el-table-column>
                        <el-table-column prop="status_name" label="状态" prop="number" align="center"></el-table-column>
                    </el-table>
                    <el-row>
                        <el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-loading="loading">
                            <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="page_total"
                                :page-size="page_size" :current-page="current_page"></el-pagination>
                        </el-col>
                    </el-row>
                    <!-- 表格end -->
                </template>
            </template>
        </div>
    </div>
<script>
        var vm = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
                data() {
                    let record = {!! $list?:'{}' !!}
                    let record_statistic = {!! $statistic?:'{}' !!}
                    return{
                        statistic:record_statistic,
                        list:record.data,
                        loading:false,
                        page_total:record.total,
                        page_size:record.per_page,
                        current_page:record.current_page,
                        search_form:{
                            is_time:''
                        },
                        real_search_form:{},
                        search_loading:false,
                        seleceTime:'',
                        options:[
                            {
                                value:1,
                                label:'搜索发布时间'
                            },
                            {
                                value:0,
                                label:'不搜索发布时间'
                            }
                        ],
                    }
                },
                mounted: function () {

                },
                methods: {
                    currentChange(val) {
                        this.loading = true;
                        this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.bonus.getListBySearch') !!}',{page:val,search:this.real_search_form}).then(function (response){
                            let data = response.data.data.list;
                            this.page_total = data.total;
                            this.list = data.data;
                            this.page_size = data.per_page;
                            this.current_page = data.current_page;
                            this.loading = false;
                        },function (response) {
                            console.log(response);
                            this.loading = false;

                        }
                        );
                    },
                    search() {
                        this.search_form.start_time='';
                        this.search_form.end_time='';
                        if(this.seleceTime===0){
                            this.search_form.is_time=0;
                            this.search_loading = true;
                        }
                        else{
                            this.search_loading = true;
                            this.search_form.is_time=1;
                            if(this.search_form.time){
                                this.search_form.is_time=1;
                                this.search_form.start_time = Math.round(this.search_form.time[0]/1000).valueOf();
                                this.search_form.end_time = Math.round(this.search_form.time[1]/1000).valueOf();
                            }
                        }
                        this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.bonus.getListBySearch') !!}',{search:this.search_form}
                        ).then(function (response) {
                            if (response.data.result){
                                let data = response.data.data.list;
                                this.page_total = data.total;
                                this.list = data.data;
                                this.page_size = data.per_page;
                                this.current_page = data.current_page;
                                this.loading = false;
                                this.real_search_form=Object.assign({},this.search_form);
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            this.search_loading = false;
                        },function (response) {
                            this.search_loading = false;
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                        );
                    },
                },
            });
    </script>
@endsection