@extends('layouts.base')
@section('title', '发送记录')
@section('content')
<link href="{{ static_url('yunshop/element-ui/2.10.1/css/index.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<style>
    .el-button+.el-button {margin-left:0px;}
    .el-dialog__body{border-top:1px solid #dde2ee;border-bottom:1px solid #dde2ee;}
        
</style>
<div class="all">
    <div id="app" v-cloak>
        <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.title" placeholder="标题"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="">
                        <el-date-picker
                            v-model="search_form.activity_time"
                            type="datetimerange"
                            value-format="timestamp"
                            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-form-item>
                </el-form>
            </div>
        </div>
        <div class="vue-main">

            <div class="vue-main-form">
                <el-table :data="list" style="width: 100%">
                    <el-table-column label="发送时间" align="center" prop="created_at"></el-table-column>
                    <el-table-column label="标题" align="center" prop="message.title"></el-table-column>
                    <el-table-column label="类型" align="center" prop="message.msg_type.name"></el-table-column>
                    <el-table-column label="发送人数" align="center" prop="send_num"></el-table-column>
                    <el-table-column label="发送成功人数" align="center" prop="success_num"></el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 分页 -->
        <div class="vue-page" >
            <el-row>
                <el-col align="center" v-loading="loading">
                    <el-pagination
                    background
                    @current-change="currentChange"
                    :current-page="current_page"
                    :page-size="page_size"
                    layout=" prev, pager, next"
                    :total="page_total">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
    </div>
</div>

<script>
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        name: 'test',
        data() {
            return {
                loading:false,
                current_page:1,
                page_total:1,
                page:1,
                page_size:1,
                current_page:1,
                total:1,
                per_page:1,
                list:[],
                search_form:{
                    message_id:'',
                    title:'',
                    start:'',
                    end:'',
                },
                real_search_form:{
                    message_id:'',
                },
            }
        },
        created() {
            
        },
        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.search_form.message_id=arr[1]
                                        this.real_search_form.message_id=arr[1]
                                        this.currentChange(1)
                                        return arr[1];
                                    }
                                }
                                this.currentChange(1)
                                return "";
                            }
                            else {
                                
                                return "";
                            }
            },
            search() {
                if(this.search_form.is_time != 0 && this.search_form.activity_time){
                    this.search_form.start = Math.round(this.search_form.activity_time[0]/1000).valueOf();
                    this.search_form.end = Math.round(this.search_form.activity_time[1]/1000).valueOf();
                }
                this.$http.post('{!! yzWebFullUrl('plugin.instation-message.admin.message-log.get-message-log-list') !!}',{search:this.search_form}
                ).then(function (response) {
                    if (response.data.result){
                        let data = response.data.data.list;
                        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'});
                }
                );
            },
            currentChange(val) {
                this.loading = true;
                this.$http.post('{!! yzWebFullUrl('plugin.instation-message.admin.message-log.get-message-log-list') !!}',{page:val,search:this.real_search_form}).then(function (response){
                    let data = response.data.data.list;
                    this.page_total = data.total;
                    this.list = data.data;
                    this.page_size = data.per_page;
                    this.current_page = data.current_page;
                    this.loading = false;
                },function (response) {
                    console.log(response);
                    this.loading = false;
                }
                );
            },
        },
    })
</script>
@endsection