@extends('layouts.base')
@section('title', '赠送积分明细')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-ohter.css')}}"/>
    <style>
        .edit-i {
            display: none;
        }

        .el-table_1_column_2:hover .edit-i {
            font-weight: 900;
            padding: 0;
            margin: 0;
            display: inline-block;
        }

        .el-tabs__item, .is-top {
            font-size: 16px
        }

        .el-tabs__active-bar {
            height: 3px;
        }

        /*.el-select .el-input {*/
        /*    width: 120px;*/
        /*}*/
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }

    </style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-head">

                <div class="vue-search">
                    <el-form :inline="true" :model="search_form" class="demo-form-inline">

                        <el-form-item>
                            <el-input placeholder="订单号" v-model="search_form.order_sn"></el-input>
                        </el-form-item>

                        {{--                        <el-form-item>--}}
                        {{--                            <el-input placeholder="消费券码" v-model="search_form.coupon_sn"></el-input>--}}
                        {{--                        </el-form-item>--}}

                        <el-form-item>
                            <el-select clearable v-model="search_form.is_count">
                                <el-option label="不统计" value="0"></el-option>
                                <el-option label="统计" value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-select clearable v-model="search_form.time_search" placeholder="搜索时间类型">
                                <el-option
                                        v-for="(item,index) in ts_arr"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <div class="block">
                                <span class="demonstration"></span>
                                <el-date-picker
                                        v-model="search_form.time_arr"
                                        type="datetimerange"
                                        :picker-options="pickerOptions"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="timestamp"
                                        align="right">
                                </el-date-picker>
                            </div>
                        </el-form-item>

                        <el-form-item>
                            <el-button-group>
                                <el-button style="margin-bottom:10px;margin-left:0;" type="primary"
                                           @click="changeForm()">搜索
                                </el-button>
                                <el-button style="margin-bottom:10px;margin-left:0;" type=""
                                           @click="export1()">导出
                                </el-button>
                            </el-button-group>

                        </el-form-item>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div class="vue-main">
                <div class="vue-main-form">
                    <div class="vue-main-title" style="margin-top:-10px">
                        <div class="title"><span
                                    style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>区域分红</b>
                        </div>
                        <div class="tip" style="margin-left: 10px;margin-top:5px;display:inline-block;">
                            <b>总数:[[total]]</b>&nbsp;
                            <template v-if="is_count==1">
                                <b>&nbsp;&nbsp;积分:[[sum_point]]</b>
                            </template>
                        </div>
                    </div>
                </div>
                <div style="margin-bottom:20px">
                </div>
                <el-table v-if="show_table" :data="list" style="width: 100%;margin-bottom: 20px;"
                          :fit="true"
                          default-expand-all
                          row-key="id"
                          ref="table">
                    <el-table-column prop="id" label="ID" align="center">
                    </el-table-column>

                    <el-table-column prop="created_at" label="赠送时间" align="center">
                    </el-table-column>

                    <el-table-column label="订单号" align="center">
                        <template slot-scope="scope">
                            [[scope.row.has_one_order.order_sn]]
                        </template>
                    </el-table-column>


                    <el-table-column prop="point" label="赠送积分" align="center">
                    </el-table-column>

                </el-table>
            </div>

            <div class="vue-page" v-if="total > 0">
                <el-row>
                    <el-col align="right">
                        <el-pagination layout="prev, pager, next,jumper" @current-change="getData"
                                       :total="total"
                                       :page-size="per_page" :current-page="current_page" background
                        ></el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 分页 -->


    </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                {{--let store_id = '{!!($_GET['store_id']) !!}' ? '{!!($_GET['store_id']) !!}' : '0';--}}
                    return {
                    tabActiveName: 'third',
                    show_table: false,
                    sum_point:0,
                    is_count:0,
                    list: [],
                    total: 1,
                    per_page: 1,
                    current_page: 1,
                    search_form: {
                        order_sn: '',
                        is_count: '0',
                        time_search: '',
                        time_arr: [new Date().getTime(), new Date().getTime()],
                    },
                    search_data: {},
                    ts_arr: [
                        {value: 'created_at', label: '赠送时间'},
                    ],
                    pickerOptions: {
                        shortcuts: [{
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                    },
                }
            },
            created() {

            },
            mounted() {
                this.changeForm();
            },
            methods: {
                export1(){
                    let json = JSON.parse(JSON.stringify(this.search_data));
                    let newTime = JSON.parse(JSON.stringify(this.search_data.time_arr));
                    newTime[0] = newTime !== null ? newTime[0] / 1000 : '';
                    newTime[1] = newTime !== null ? newTime[1] / 1000 : '';
                    json.time_arr = newTime;
                    let search_data = JSON.stringify(json);
                    let url = `{!! yzWebFullUrl('plugin.area-dividend.area.point-log.export') !!}`;
                    url = url + '&search_data=' + search_data;
                    window.open(url);
                },
                {{--tabChange() {--}}
                {{--    var url = '';--}}
                {{--    url = '{!! yzWebFullUrl('plugin.coupon-store.store.income.areaIndex') !!}';--}}
                {{--    window.location.href = url;--}}
                {{--},--}}
                {{--memberDetail: function (id) {--}}
                {{--    window.open("{!!  yzWebFullUrl('member.member.detail') !!}" + '&id=' + id);--}}
                {{--},--}}
                {{--orderDetail: function (id) {--}}
                {{--    window.open("{!!  yzWebFullUrl(' plugin.coupon-store.store.detail.vue-index') !!}" + '&id=' + id + '&order_id=' + id);--}}
                {{--},--}}
                search: function () {
                    this.show_table = false;
                    this.$http.post('{!! yzWebFullUrl('plugin.area-dividend.area.point-log.index') !!}', {
                        'page': this.current_page,
                        'is_json': 1,
                        'search_data': this.search_data,
                    }).then(function (response) {
                        console.log(response);
                        if (response.data.result) {
                            let this_data = response.data.data.list;
                            this.current_page = this_data.current_page;
                            this.list = this_data.data;
                            this.total = this_data.total;
                            this.per_page = this_data.per_page;
                            this.sum_point = response.data.data.sum_point;
                            this.is_count = response.data.data.is_count;
                            // this.$message({message: response.data.msg,type: 'success'});
                            // location.reload();
                            this.show_table = true;
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                            this.show_table = true;
                        }
                    }, function (response) {
                        this.$message({message: response.data.msg, type: 'error'});
                        this.show_table = true;
                    })

                },
                getData: function (val) {
                    this.current_page = val;
                    this.search();
                },
                changeForm: function () {
                    this.search_data = this.search_form;
                    this.current_page = 1;
                    this.search();
                }

            },
        })
    </script>
@endsection