@extends('layouts.base')
@section('title', "推送消息")
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods.css')}}"/>

    <div id="qrcode" ref="qrcode" style="display:none;"></div>
    <div class="rightlist">

        <div id="app"  v-cloak v-loading="all_loading">

            <template>
                <div class="second-list">
                    <div class="third-list">
                        <div class="form-list">
                            <el-form :inline="true" :model="search_form" ref="search_form" style="margin-left:10px;">
                                <el-row>
                                    <el-form-item>
                                        <el-select v-model="search_form.type" placeholder="请选择状态" clearable >
                                            <el-option  label="商品推送" value="goods.push"></el-option>
                                            <el-option  label="商品修改" value="goods.alter"></el-option>
                                            <el-option  label="商品上架" value="goods.on.sale"></el-option>
                                            <el-option  label="批量商品上架" value="goods.batch.on.sale"></el-option>
                                            <el-option  label="批量商品下架" value="goods.batch.undercarriage"></el-option>
                                            <el-option  label="商品下架" value="goods.undercarriage"></el-option>
                                            <el-option  label="商品删除" value="goods.storage.delete"></el-option>
                                            <el-option  label="订单发货" value="order.delivery"></el-option>
                                            <el-option  label="订单取消" value="order.cancel"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="">
                                        <el-date-picker
                                                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-button type="primary" icon="el-icon-search" @click="getMessageList(1)">搜索</el-button>
                                        <el-button type="danger" icon="el-icon-warning" @click="clearMessage()">清空数据</el-button>

                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                        <div class="table-list">
                            <div>
                                @section('search')
                                <template>
                                    <!-- 表格start -->
                                    <el-table :data="message_list" style="width: 100%" :class="table_loading==true?'loading-height':''"  v-loading="table_loading">
                                        <el-table-column prop="id" label="ID" width="70" align="center"></el-table-column>
                                        </el-table-column>
                                        <el-table-column prop="type_name" label="消息类型" max-width="150" align="center">
                                            <template slot-scope="scope">
                                                [[scope.row.type_name]]
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="content_name" label="内容" width="800" align="center">
                                            <template slot-scope="scope">
                                                [[scope.row.content]]
                                            </template>

                                        </el-table-column>
                                        <el-table-column prop="created_at" label="时间" width="200" align="center">
                                            <template slot-scope="scope">
                                                [[scope.row.created_at]]
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- 表格end -->
                                </template>
                                @show
                            </div>
                        </div>
                    </div>
                    <!-- 分页 -->
                    <div class="vue-page" v-show="total>1">
                        <el-row>
                            <el-col align="right">
                                <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total" :page-size="per_size" :current-page="current_page" background v-loading="loading"></el-pagination>
                            </el-col>
                        </el-row>
                    </div>
                </div>

            </template>

        </div>
    </div>
    <script src="{{resource_get('static/js/qrcode.min.js')}}"></script>
    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            data() {
                return{
                    times:[],
                    message_list:[],//商品列表
                    table_loading:false,
                    all_loading:false,
                    loading:false,
                    search_form:{},
                    //分页
                    total:0,
                    per_size:0,
                    current_page:0,

                }
            },
            created() {
                this.getMessageList();

            },
            methods: {

                /*
            清空数据
           */
                clearMessage(){
                    let that = this;
                    that.$confirm('确定情况所有消息吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                        that.table_loading = true;
                        that.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-message.clean') !!}",{}).then(response => {

                            if(response.data.result==1){
                                that.$message.success("清除成功！");
                                that.getMessageList(1);
                            }
                            else{
                                that.$message.error(response.data.msg);
                            }
                            that.table_loading = false;
                        }),function(res){
                            console.log(res);
                            that.table_loading = false;
                        };
                    }).catch(() => {
                        this.$message({type: 'info',message: '已取消'});
                    });
                },
                getMessageList(page){
                    var that = this;
                    console.log(this.times);
                    this.search_form.start_time = "";
                    this.search_form.end_time = "";
                    if(this.times && this.times.length>0) {
                        this.search_form.start_time = this.times[0];
                        this.search_form.end_time = this.times[1];
                    }

                    that.table_loading = true;
                    that.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-message.message-list') !!}",{page:page,search:that.search_form}).then(response => {
                        console.log(response);
                        if(response.data.result==1){
                            that.message_list = response.data.data.page_data.data;
                            that.total = response.data.data.page_data.total;
                            that.current_page = response.data.data.page_data.current_page;
                            that.per_size = response.data.data.page_data.per_page;
                        }
                        else{
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }),function(res){
                        console.log(res);
                        that.table_loading = false;
                    };
                },
                // 搜索、分页
                search(page) {
                    this.getMessageList(page);
                },

                // 上一页
                prev() {
                    let page = parseInt(this.current_page) - 1;
                    if (page < 1) {
                        return false;
                    }

                    this.getMessageList(page);
                },
                //下一页
                next() {
                    let page = parseInt(this.current_page) + 1;
                    if (this.per_size < this.page_number) {
                        return false;
                    }

                    this.getMessageList(page);
                },
                //跳页
                jumpPage() {
                    if (this.current_page <= 1) {
                        this.current_page = 1;
                    }
                    // if(this.current_page>100){
                    //     this.current_page = 100
                    // }

                    this.getMessageList(this.current_page);
                },

            },
        })

    </script>
@endsection