@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>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_913727_zrmdutznqpd.css">
    <div id="app-share-activity">
        <template>
            <el-container>
                <el-header height="auto">
                    <div class="">
                        <h4 class="card-title">挑战记录</h4>
                        <div style="padding-top: 24px">
                            <el-form v-loading="loading" ref="form" :model="form" :inline="true">
                                <el-form-item label="">
                                    <el-input v-model="searchParams.uid" placeholder="会员ID"></el-input>
                                </el-form-item>
                                <el-form-item label="">
                                    <el-input v-model="searchParams.member" placeholder="会员昵称/姓名/手机号"></el-input>
                                </el-form-item>
                                <el-form-item label="">
                                    <template>
                                        <el-select style="width: 100%" v-model="searchParams.status" placeholder="挑战结果">
                                            <el-option
                                                    v-for="item in status"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="searchData(1)">搜索</el-button>
                            </el-form>
                        </div>
                    </div>
                </el-header>
                {{--表格start--}}
                <el-main>
                    <template>
                        <el-table :data="list">
                            <el-table-column align="center" prop="created_at" label="时间" width="auto"></el-table-column>
{{--                            <el-table-column align="center" prop="uid" label="会员ID" width="auto"></el-table-column>--}}
                            <el-table-column
                                    min-width="100%"
                                    align="center"
                                    prop="member.nickname"
                                    label="会员">
                                <template slot-scope="scope">
                                    <a v-if="scope.row.member" v-bind:href="'{{ yzWebUrl('member.member.detail', array('id' => '')) }}'+[[scope.row.uid]]"
                                       target="_blank">
                                        <img v-if="scope.row.member&&scope.row.member.avatar" v-bind:src="scope.row.member.avatar"
                                             style='width:30px;height:30px;padding:1px;border:1px solid #ccc'>
                                        <br/>[[scope.row.member.nickname]]
                                    </a>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="status_name" label="挑战结果" width="auto"></el-table-column>
                            <el-table-column align="center" prop="amount" label="奖励数量" width="auto"></el-table-column>
                            <el-table-column align="center" prop="activity_id" label="活动ID" width="auto"></el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="activity_name"
                                    label="活动名称">
                                <template slot-scope="scope">
                                    <template v-if="scope.row.activity">
                                        [[scope.row.activity.activity_name]]
                                    </template>
                                    <template v-else-if="!scope.row.activity">
                                        活动已被删除
                                    </template>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="activity_name"
                                    label="奖励类型">
                                <template slot-scope="scope">
                                    <template v-if="scope.row.activity">
                                        [[scope.row.activity.withdraw_code_name]]
                                    </template>
                                    <template v-else-if="!scope.row.activity">
                                        活动已被删除
                                    </template>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-main>
                {{--表格end--}}
                <el-footer>
                    <el-pagination
                            layout="prev, pager, next"
                            @current-change="currentChange"
                            :current-page.sync="current_page"
                            :total="page_total"
                            :page-size="page_size"
                            background v-loading="loading">
                    </el-pagination>
                </el-footer>

            </el-container>
        </template>
    </div>

    <script>
        var app = new Vue({
            el: '#app-share-activity',
            delimiters: ['[[', ']]'],
            data() {
                let pageList = {!! $pageList ?: '{}'!!};
                let status = JSON.parse('{!! $status !!}');
                console.log(pageList)
                return {
                    form : {},
                    loading : false,
                    searchParams: {
                        'uid' : '',
                        'member' : '',
                        'status': status,
                    },
                    status: status,
                    real_search_form: {
                        'uid' : '',
                        'member' : '',
                        'status': status,
                    },
                    list : pageList.data,
                    current_page : pageList.current_page,
                    page_total : pageList.total,
                    page_size : pageList.per_page,
                }
            },
            methods: {
                searchData(page) {
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.redpack.admin.challenge.manage.search') !!}',{page:page,search:this.searchParams}
                    ).then(function (response) {
                            if (response.data.result){
                                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.real_search_form = this.searchParams;
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            this.loading = false;
                        },function (response) {
                            this.loading = false;
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                    );
                },
                
                currentChange(val) {
                    let that = this;
                    that.searchData(val)
                },
            },
        });
    </script>
@endsection