@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 class="vue-main-title-button">
                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="addModal">新建消息</el-button>
                </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="title"></el-table-column>
                    <el-table-column label="类型" align="center" prop="msg_type.name"></el-table-column>
                    <el-table-column prop="refund_time" label="操作" align="center" width="260">
                        <template slot-scope="scope">
                            <a :href="'{{ yzWebFullUrl('plugin.instation-message.admin.message-log.index', array('id' => '')) }}'+[[scope.row.id]]"><el-button size="mini" >记录</el-button></a>
                            <a :href="'{{ yzWebFullUrl('plugin.instation-message.admin.message.edit', array('id' => '')) }}'+[[scope.row.id]]+'&type=1'"><el-button size="mini" >编辑</el-button></a>
                            <el-button size="mini" @click="Del(scope, list)">删除</el-button>
                            <a :href="'{{ yzWebFullUrl('plugin.instation-message.admin.message.edit', array('id' => '')) }}'+[[scope.row.id]]+'&type=2'"><el-button size="mini">发送</el-button></a>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 分页 -->
        <div class="vue-page" v-if="total>0">
            <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,
                
                list:[],
                times:[],
                search_form:{
                    title:'',
                    start:'',
                    end:'',
                  
                },
                real_search_form:{},
                rules: {},
                current_page:1,
                total:1,
                per_page:1,
            }
        },
        created() {
            
        },
        mounted() {
            this.currentChange(1);
        },
        methods: {
            addModal(){
                window.location.href = '{!! yzWebFullUrl('plugin.instation-message.admin.message.create1') !!}';
            },
            Del(scope, rows){
                rows.splice(scope.$index, 1);
                let json={
                    id:scope.row.id
                }
                this.$http.post('{!! yzWebFullUrl('plugin.instation-message.admin.message.del') !!}',json).then(function (response){
                    if (response.data.result) {
                        this.$message({message:"删除成功！",type:"success"});
                     
                    } else {
                        this.$message({message:"删除成功！",type:"error"});
                    }
                },function (response) {
                    console.log(response);
               
                }
                );
            },
            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.get-message-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.get-message-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