{extend name="public/base" /} {block name="body"}
<style>
.body-content{
    width: 96%;
    height:100%;
    display: flex;
    justify-content: center; 
    display:block;
    margin: 0 auto;
    padding-bottom: 50px;
}
.saixuan{
    width:140px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.cen{
    text-align: center;
}
.block{
    margin-top:-25px;
}
.grouplist{
    margin-bottom: 20px;
    justify-content: space-between;
}
</style>


<div class="main-box clearfix" id="app">
<div class="body-content">

<div class="body-content-zhon demo-form-inline">
    <div class="saixuan">
        <div style="width:60px;">
            <el-input v-model="inputrate" placeholder="回收率"></el-input>
        </div>
        <el-button type="primary" @click="searchs">搜索</el-button>
    </div>

    <el-table :data="tableData" border v-loading="loading" style="width: 100%;margin-top:25px;" header-cell-style="color:#484848;">
        <el-table-column prop="adName" label="计划名称">
        </el-table-column>
        
        <el-table-column prop="adId" label="计划ID" width="155">
        </el-table-column>

        <el-table-column prop="regNum" sortable label="注册">
        </el-table-column>

        <el-table-column prop="pay"  sortable label="充值">
        </el-table-column>
        
        <el-table-column prop="statCost" sortable label="消耗">
        </el-table-column>        

        <el-table-column prop="rates" sortable label="回收率%">
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button  @click="getinfo(scope.row.adId)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
    </el-table>

    <el-dialog title="详情" :visible.sync="dialogTableVisible">

        <div class="block">
          <div class="grouplist">

            <el-radio-group v-model="tim" size="mini" @change="gettim">
              <el-radio-button label="今日"></el-radio-button>
              <el-radio-button label="昨日"></el-radio-button>
            </el-radio-group>                
            &nbsp;&nbsp;&nbsp;  
            排序：
            <el-radio-group v-model="reverse">
              <el-radio :label="true">倒序</el-radio>
              <el-radio :label="false">正序</el-radio>
            </el-radio-group>
            
          </div>
        
          <el-timeline :reverse="reverse" v-loading="loading2" style="overflow:auto;height:358px;width:100%">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.createdAt"
              style="width:100%">
              消耗：<span>{{activity.todayCost}}</span>&nbsp;&nbsp;注册人数：{{activity.regNum}}&nbsp;&nbsp;充值：<span>{{activity.pay}}</span>
            </el-timeline-item>
          </el-timeline>
        </div>

    </el-dialog>

</div>

</div>


{/block} {block name="script"}
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        tableData: [],
        loading:false,
        loading2:false,
        inputrate:50,
        dialogTableVisible:false,
        reverse:true,
        activities:[],
        tim:'今日',
        adid:'',
        },
        methods: {
           refreshs() {
                this.loading = true
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Admonitor/refreshs')}",
                    data: {rate:that.inputrate},
                    dataType: "json",
                    success: function(data) {
                        that.loading = false
                        if (data.status == 1) {
                            that.tableData = data.list
                        }
                    }
                });
            },
            searchs(){
                this.refreshs()
            },
            getinfo(adid){
                this.dialogTableVisible = true
                this.loading2 = true
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Admonitor/getinfo')}",
                    data: {adid:adid,tim:that.tim},
                    dataType: "json",
                    success: function(data) {
                        that.loading = false
                        if (data.status == 1) {
                            that.activities = data.activities
                            that.loading2 = false
                            that.adid = adid
                        }
                    }
                });                
            },
            gettim(){
                this.getinfo(this.adid)
            }
        },
        created: function() {
            var that = this
            timer = setTimeout(function(){
                that.refreshs()
            },1);
        }
    })
</script>
{/block}