@extends('layouts.base')
@section('title', '奖励记录')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <style>
        .vue-main{background: #eff3f6;}
        /* 导航 */
        .el-radio-button .el-radio-button__inner,.el-radio-button:first-child .el-radio-button__inner {border-radius: 4px 4px 4px 4px;border-left: 0px;}
        .el-radio-button__inner{border:0;}
        .el-radio-button:last-child .el-radio-button__inner {border-radius: 4px 4px 4px 4px;}
    </style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-head">
                <el-radio-group v-model="level_type" @change="gotoOther">
                    <el-radio-button label="0" >会员等级奖励记录</el-radio-button>
                    <el-radio-button label="1" >分销等级奖励记录</el-radio-button>
                    <el-radio-button label="3" >小程序广告奖励记录</el-radio-button>
                </el-radio-group>
            </div>
            <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>
                <div class="vue-search">
                    <el-form :inline="true" :model="search_form" class="demo-form-inline">
                        <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.member_id" placeholder="会员ID"></el-input>
                        </el-form-item>
                        <el-select v-model="search_form.reward_code" filterable clearable placeholder="获得方式">
                            <el-option  label="观看奖励" value="0"></el-option>
                            <el-option  label="上级奖励" value="1"></el-option>
                        </el-select>
                        <el-select v-model="search_form.reward_type" filterable clearable placeholder="奖励类型">
                            <el-option  label="积分" value="0"></el-option>
                            <el-option  label="爱心值" value="1"></el-option>
                        </el-select>
                        <el-select v-model="search_form.is_time" filterable clearable placeholder="是否搜索时间">
                            <el-option  label="时间不限" value="0"></el-option>
                            <el-option  label="搜索时间" value="1"></el-option>
                        </el-select>
                        <el-form-item label="">
                            <el-date-picker
                                    @change="btnChange"
                                    v-model="times"
                                    type="datetimerange"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    style="margin-left:5px;"
                                    align="right">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="search(1)">搜索</el-button>
                            {{--<el-button  @click="export1()">导出</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 90px">记录列表</div>
                    </div>
                    <el-table :data="list" style="width: 100%">
                        <el-table-column label="时间" align="center" prop="created_at">
                        </el-table-column>

                        <el-table-column label="会员ID" align="center" prop="member_id">
                        </el-table-column>
                        <el-table-column label="会员" align="center" prop="title" >
                            <template slot-scope="scope">
                                <a v-bind:href="'{{ yzWebUrl('member.member.detail', array('id' => '')) }}'+[[scope.row.member_id]]"
                                   target="_blank">
                                    <div v-if="scope.row.has_one_member">
                                        <el-image :src="scope.row.has_one_member.avatar_image" alt="" style="width:40px;height:40px;border-radius:50%"></el-image>
                                    </div>
                                    {{--<img v-bind:src="scope.row.has_one_member.avatar"--}}
                                    {{--style='width:30px;height:30px;padding:1px;border:1px solid #ccc'>--}}
                                    <br/>[[scope.row.has_one_member ? scope.row.has_one_member.nickname : '' ]]
                                </a>
                            </template>
                        </el-table-column>
                        <el-table-column label="会员等级" align="center" prop="level_name" v-if="this.level_type == 0">
                            <template slot-scope="scope">
                                <div v-if="scope.row.has_one_level">
                                    [[scope.row.has_one_level ? scope.row.has_one_level.level_name : '' ]]
                                </div>
                                <div v-else>
                                    默认等级
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="会员分销等级" align="center" prop="name" v-if="this.level_type == 1">
                            <template slot-scope="scope">
                                <div v-if="scope.row.has_one_agent_level">
                                    [[scope.row.has_one_agent_level ? scope.row.has_one_agent_level.name : '' ]]
                                </div>
                                <div v-else>
                                    默认等级
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column label="获得方式" align="center" prop="reward_name">
                        </el-table-column>
                        <el-table-column label="奖励数量" align="center" prop="amount">
                        </el-table-column>
                        <el-table-column label="奖励方式" align="center" prop="reward_type_name">
                        </el-table-column>
                        <el-table-column label="备注" align="center" prop="remark">
                        </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_page" :current-page="current_page" background
                        ></el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    level_type:0,
                    list:[],
                    search_form:{},
                    times:[],
                    // 统计
                    total: 0,
                    rules: {},
                    current_page:1,
                    per_page:1,
                    star:'',
                    end:'',
                    date:[],
                    flight_time:[],
                }
            },
            created() {

            },
            mounted() {
                this.getData(1);
            },
            methods: {
                btnChange(data){
                    this.date = data
                    console.log(data)
                },
                getData(page) {
                    let json = {
                        page:page,
                        search:{
                            member:this.search_form.member,
                            member_id:this.search_form.member_id,
                            reward_code:this.search_form.reward_code,
                            reward_type:this.search_form.reward_type,
                            is_time:this.search_form.is_time,
                            time_range:{},
                            level_type:this.level_type,
                        }
                    };
                    if(this.times && this.times.length>0) {
                        json.search.time_range.start = this.times[0];
                        json.search.time_range.end = this.times[1];
                    }

                    const transformTimestamp = (timestamp) => {
                        const date = new Date(timestamp);
                        const Y = date.getFullYear() + '-';
                        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                        const D = date.getDate() + ' ';
                        const h = date.getHours() + ':';
                        const m = date.getMinutes();
                        const s = date.getSeconds(); // 秒
                        const dateString = Y + M + D;
                        return dateString;
                    }

                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! yzWebFullUrl('plugin.flyers-advertise.admin.reward-log.index') !!}',json).then(function(response) {
                        if (response.data.result) {
                            this.list = response.data.data.data;
                            this.list.forEach(item  => {
                                item.flight_time = transformTimestamp(item.flight_time * 1000)
                            // this.flight_time.push(transformTimestamp(item.flight_time * 1000))
                            // console.log(item.flight_time);
                        })
                            console.log(this.flight_time);
                            // this.flight_time = transformTimestamp(this.list.flight_time);
                            this.current_page=response.data.data.current_page;
                            this.total=response.data.data.total;
                            this.per_page=response.data.data.per_page;
                            loading.close();

                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                        loading.close();

                    }, function(response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                        loading.close();
                    });
                },

                search(val) {
                    this.getData(val);
                },
                // 查看角色
                showForm(item) {
                    let link = `{!! yzWebFullUrl('plugin.flyers-advertise.admin.reward-log.detail') !!}`+`&id=`+item.id;
                    window.location.href = link;
                },

                export1(){
                    console.log(this.search_form);
                    var url = "{!! yzWebFullUrl('plugin.flyers-advertise.admin.reward-log.export') !!}";

                    if (this.search_form.member) {
                        url += "&search[member]="+this.search_form.member;
                    }
                    if (this.search_form.member_id) {
                        url += "&search[member_id]="+this.search_form.member_id;
                    }

                    if (this.search_form.is_time) {
                        url += "&search[is_time]="+this.search_form.is_time;
                    }

                    if (this.date.length > 1) {
                        url += "&search[time_range][start]="+this.date[0];
                    }
                    if (this.date.length > 1) {
                        url += "&search[time_range][end]="+this.date[1];
                    }
                    console.log(url);
                    window.location.href = url;
                },
                gotoOther(type) {
                    this.level_type = type;
                    this.getData(1);
                },


            },
        })
    </script>
@endsection