@extends('layouts.base')
@section('title', "奖励记录")
@section('content')

    <style xmlns:v-bind="http://www.w3.org/1999/xhtml">
        .rightlist #app .rightlist-head{padding:15px 0;line-height:50px;}
        .rightlist #app{margin-left:30px;}
        .rightlist-head-con{float:left;padding-right:20px;font-size:16px;color:#888;}
        .el-form-item__label{padding-right:30px;}
        .mouse-active{cursor:pointer;border:1px dotted #409EFF;border-radius: 4px;}
        /* 滑块选择小白点 */
        .el-switch.is-checked .el-switch__core::after {left: 100%;margin-left: -17px;}
        .el-switch__core::after {content: "";position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}
        
    </style>

    <div class="rightlist">
        <div id="app" v-loading="submit_loading">
        <link rel="stylesheet" href="//at.alicdn.com/t/font_913727_zrmdutznqpd.css">
            <div class="rightlist-head">
                <div class="rightlist-head-con">奖励记录</div>
            </div>
            <el-form :inline="true" :model="search_form" ref="search_form">
                <el-row>
                    <el-col :span="24">
                        <el-form-item>
                            <el-input v-model="search_form.uid" placeholder="请输入会员ID"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="search_form.member" placeholder="请输入会员昵称/姓名/手机号" style="width:250px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="search_form.order_sn" placeholder="订单号" style="width:250px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="search_form.status" placeholder="奖励状态">
                                <el-option v-for="(item,index) in status_list" :key="item" :label="item" :value="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="search_form.type" placeholder="奖励类型">
                                <el-option v-for="(item,index) in type_list" :key="item" :label="item" :value="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="奖励时间">
                            <template>
                                <div class="block">
                                    <span class="demonstration"></span>
                                    <el-date-picker
                                            v-model="search_form.create_time"
                                            type="datetimerange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            align="right">
                                    </el-date-picker>
                                </div>
                            </template>
                        </el-form-item>
                        <el-form-item>
                            <a href="#">
                                <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
                            </a>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template>
                <el-table :data="list" style="width: 100%" v-loading="table_loading">
                    <el-table-column prop="id" label="ID" width="auto" align="center"></el-table-column>
                    <el-table-column prop="created_at" label="时间" width="auto" align="center"></el-table-column>
                    <el-table-column prop="order_sn" label="订单号" width="auto" align="center"></el-table-column>
                    <el-table-column label="股东" width="auto" align="center">
                        <template slot-scope="scope">
                            <img style='width:40px;height:40px' :src=scope.row.member.avatar v-if="scope.row.member" style="max-width:100px">
                            <div>[[scope.row.member?scope.row.member.nickname:'未更新']]</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="订单金额" width="auto" align="center"></el-table-column>
                    <el-table-column prop="type_name" label="奖励类型" width="auto" align="center"></el-table-column>
                    <el-table-column prop="amount" label="奖励金额" width="auto" align="center"></el-table-column>
                    <el-table-column prop="status_name" label="奖励状态" width="auto" align="center"></el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24" align="right" style="padding:15px 5% 15px 0">
                        <el-pagination layout="prev, pager, next" @current-change="currentChange" :total="page_total" :page-size="page_size" background v-loading="loading"></el-pagination>
                    </el-col>
                </el-row>
            </template>
        </div>
    </div>
    <script>
        var vm = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
            data() {
                let data = JSON.parse('{!! $pageList ?: "{}" !!}');
                return{
                    list:data.data,
                    loading:false,
                    table_loading:false,
                    submit_loading:false,
                    page_total:data.total,
                    page_size:data.per_page,
                    current_page:data.current_page,
                    search_form:{},
                    status_list : {
                        0 : '未奖励',
                        1 : '已奖励',
                        '-1' : '失效',
                    },
                    type_list : {
                        1 : '股东奖励',
                        2 : '平级奖励',
                    },
                }
            },
            methods: {
                search(){
                    this.search_loading=true;
                    if(this.search_form.create_time){
                        this.search_form.create_time[0] = Math.round(this.search_form.create_time[0]/1000).valueOf();
                        this.search_form.create_time[1] = Math.round(this.search_form.create_time[1]/1000).valueOf();
                    }
                    this.$http.post('{!! yzWebFullUrl('plugin.partner-reward.admin.controllers.reward-log.search') !!}',{search_form:this.search_form}
                    ).then(function (response) {
                            if (response.data.result){
                                this.list = response.data.data.data;
                                this.search_loading = false;
                            }
                            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'});
                        }
                    );
                },

                currentChange(val) {
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.partner-reward.admin.controllers.reward-log.search') !!}',{page:val}).then(function (response){
                        let datas = response.data.data;
                        this.page_total = datas.total;
                        this.list = datas.data;
                        this.page_size = datas.per_page;
                        this.current_page = datas.current_page;
                        this.loading = false;
                    },function (response) {
                        this.loading = false;
                    }
                    );
                }
            },
        });
    </script>

@endsection