@extends('layouts.base')
@section('title', '新人奖')
@section('content')
<style>
    #re_content{
        margin-top:20px;
    }
    .el-form .el-form-item{
        margin-right: 30px;   
    }
    .rightlist-head{padding:15px 0;line-height:50px;}
    .rightlist-head-con{padding-right:20px;font-size:16px;color:#888;display:inline-block;}
    #re_content .time{margin-bottom:20px;}
    </style>
<!-- tab -->

<div id='re_content' v-loading="all_loading">
    <div class="rightlist-head">
        <div class="rightlist-head-con">活动数据</div>
        <a href="{{ yzWebFullUrl('plugin.new-member-prize.admin.controllers.activity.index') }}">
            <el-button>返回列表</el-button>
        </a>
    </div>
    <div class="time">活动时间:[[start_time]]至[[end_time]]</div>
    <template>
        <el-form :inline="true" :model="search_form" ref="search_form">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="会员名称">
                        <el-input v-model="search_form.nickname" placeholder="请输入会员名称"></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-date-picker v-model="search_form.activity_time"  value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item >
                        <a  style="margin-right:10px;">
                            <el-button type="success" icon="el-icon-search" @click="search()">搜索</el-button>
                        </a>
                        <a >
                            <el-button type="primary" @click="derive">导出</el-button>
                        </a>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- 表格start -->
        <el-table :data="list" style="width: 100%" v-loading="search_loading">
            <el-table-column prop="member.uid" label="会员ID" align="center">
                <template slot-scope="scope">
                        <div v-if="scope.row.has_one_member">
                            <div>[[scope.row.has_one_member.uid]]</div>
                        </div>
                    </template>
            </el-table-column>
            <el-table-column prop="member.nickname" label="会员昵称" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.has_one_member">
                            <div>[[scope.row.has_one_member.nickname]]</div>
                        </div>
                    </template>
            </el-table-column>
            <el-table-column prop="member.mobile" label="手机号" align="center">
                <template slot-scope="scope">
                        <div v-if="scope.row.has_one_member">
                            <div>[[scope.row.has_one_member.mobile]]</div>
                        </div>
                    </template>
            </el-table-column>
            <el-table-column prop="member.mobile" label="领奖时间" align="center">
                <template slot-scope="scope">
                        <div>
                            <div>[[scope.row.created_at]]</div>
                        </div>
                    </template>
            </el-table-column>
            <el-table-column prop="has_one_prize" label="奖励信息"  align="center">
                    <template slot-scope="scope" >
                        <div v-if="scope.row.has_one_coupon">
                            <span>[[scope.row.coupon_name]]</span>
                            <span>优惠券</span>
                        </div>
                        <div v-if="scope.row.point">
                            <span>[[scope.row.point]]</span>
                            <span>积分</span>
                        </div>
                        @if(app('plugins')->isEnabled('love'))
                        <div v-if="scope.row.love">
                            <span>[[scope.row.love]]</span>
                            <span>[[love_name]]</span>
                        </div>
                        @endif
                        <div v-if="scope.row.amount">
                            <span>[[scope.row.amount]]</span>
                            <span>余额</span> 
                        </div>
                    </template>
            </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>

<script>
    var vm = new Vue({
        el: "#re_content",
        delimiters: ['[[', ']]'],
        data() {
            return {
                love_name:'',
                activity:'',
                start_time:'',
                end_time:'',
                list:[],
                loading:false,
                activity_id:'',
                page_total:0,
                page_size:0,
                current_page:0,
                search_form:{},
                real_search_form:{},
                search_loading:false,
                all_loading:false,
                formData:{
                    nickname:null,
                    uid:null,
                    activity_time:[],
                    id:null
                },
            }
        },
        mounted () {
            this.GetUrlParam('id');
        },
        methods: {
            GetUrlParam(paraName) {
                var url = document.location.toString();
                            var arrObj = url.split("?");

                            if (arrObj.length > 1) {
                                var arrPara = arrObj[1].split("&");
                                var arr;

                                for (var i = 0; i < arrPara.length; i++) {
                                    arr = arrPara[i].split("=");

                                    if (arr != null && arr[0] == paraName) {
                                        this.activity_id=arr[1]
                                       
                                        this.currentChange(1)
                                        return arr[1];
                                    }
                                }
                                return "";
                            }
                            else {
                                return "";
                            }
            },
            timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
            var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
                return Y+M+D+h+m+s;
            },
            currentChange(val) {
                this.loading = true;
                this.$http.post('{!! yzWebFullUrl('plugin.new-member-prize.admin.controllers.activity.searchRecord') !!}',{page:val,id:this.activity_id,search:this.real_search_form}).then(function (response){
                    this.activity=response.data.data.activity
                    this.love_name=response.data.data.love_name
                    this.start_time=this.timestampToTime(this.activity.start_time)
                    this.end_time=this.timestampToTime(this.activity.end_time)
                    let datas = response.data.data.logs;
                    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) {
                    console.log(response);
                    this.loading = false;
                }
                );
            },
            derive(){
              let host= '{!! yzWebFullUrl('plugin.new-member-prize.admin.controllers.activity.export') !!}'+'&search[nickname]='+this.formData.nickname+'&search[uid]='+this.formData.uid+'&search[activity_time]='+this.formData.activity_time+'&search[id]='+this.activity_id+'&id='+this.activity_id;
                window.location.href=host;
            },
            search() {
                this.search_loading = true;
                if(this.search_form.is_time != 0 && this.search_form.activity_time){
                    this.search_form.activity_time[0] = Math.round(this.search_form.activity_time[0]/1000).valueOf();
                    this.search_form.activity_time[1] = Math.round(this.search_form.activity_time[1]/1000).valueOf();
                }
                this.formData = JSON.parse(JSON.stringify(this.search_form));
                let json={
                    search:this.search_form,
                    id:this.activity_id
                }
                this.$http.post('{!! yzWebFullUrl('plugin.new-member-prize.admin.controllers.activity.searchRecord') !!}',json
                ).then(function (response) {
                    if (response.data.result){
                        
                        let data = response.data.data.logs;
                        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