@extends('layouts.base')
@section('title', '授权码使用记录')
@section('content')
<style>
.panel{
    margin-bottom:10px!important;
    border-radius: 10px;
    padding-left: 20px;
}   
.panel .active a {
	background-color: #29ba9c!important;
	border-radius: 18px!important;
    color:#fff;
}
.panel a{
    border:none!important;
    background-color:#fff!important;
}
.content{
    background: #eff3f6;
    padding: 10px!important;
}
.con{
    padding-bottom:20px;
    position:relative;
    border-radius: 8px;
    min-height: 100vh;
    background: #fff;
}
.con .setting .block{
    padding:10px;
    background-color:#fff;
    border-radius: 8px;
}
.con .setting .block .title{
    font-size:18px;
    margin-bottom:15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.add{
    width: 154px;
	height: 36px;
	border-radius: 4px;
    border: solid 1px #29ba9c;
    color:#29ba9c;
    display:flex;
    align-items:center;
    justify-content:center;
}
.el-table--fit{
    margin-top:-10px;
}
b{
    font-size:14px;
}
.vue-crumbs a {
  color: #333;
}
.vue-crumbs a:hover {
  color: #29ba9c;
}
.vue-crumbs {
  margin: 0 20px;
  font-size: 14px;
  color: #333;
  font-weight: 400;
  padding-bottom: 10px;
  line-height: 32px;
}
.el-table--border::after, .el-table--group::after, .el-table::before{
    background-color:#fff;
}
</style>
<div id='re_content' >

    <div class="con">
        <div class="setting">
            <el-row>
                <el-button type="primary" @click="codeBasic()">基础设置</el-button>
                <el-button type="success"  @click="code()">授权码管理</el-button>
                <el-button type="info" disabled @click="codeLog()">使用记录</el-button>
            </el-row>

            <div style="background: #eff3f6;width:100%;height:15px;margin-top: 1em;"></div>

            <div class="block">

            <div class="title">
                <div style="display:flex;align-items:center;"><span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>授权码使用记录</b></div></div>
                <el-input  v-model="search_form.seller" style="width:30%;margin-left:16px;margin-right:16px;" placeholder="出售者ID/昵称/姓名/手机号"></el-input>
                <el-input  v-model="search_form.buyer" style="width:30%;margin-left:16px;margin-right:16px;" placeholder="购买者ID/昵称/姓名/手机号"></el-input>
                <el-select v-model="search_form.level" placeholder="授权码等级" clearable>
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="search_form.type" placeholder="状态" clearable>
                    <el-option
                            v-for="item in types"
                            :key="item.status"
                            :label="item.label"
                            :value="item.status">
                    </el-option>
                </el-select>

                <el-select v-model="search_form.is_time" filterable clearable placeholder="是否搜索时间" style="margin-left:10px;">
                    {{--<el-option  label="时间不限" value="0"></el-option>--}}
                    <el-option  label="搜索购买时间" value="1"></el-option>
                    <el-option  label="搜索激活时间" value="2"></el-option>
                </el-select>

                <el-date-picker
                        style="margin-left:10px;"
                        v-model="times"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="margin-left:5px;" >
                </el-date-picker>

                <el-button type="primary" @click="search">搜索</el-button>
            </div>

            <div style="background: #eff3f6;width:100%;height:15px;"></div>
            <div class="block">
                <div class="title">
                    {{--<div style="display:flex;align-items:center;">--}}
                        {{--<span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span>--}}
                        {{--<b>分类列表</b>--}}
                        {{--<a href="{{ yzWebFullUrl('plugin.room.admin.anchor-manage.manualSend') }}">--}}
                        {{--<el-button type="primary" style="margin-left:30px;" size="mini">手动赠送</el-button></a>--}}
                    {{--</div>--}}
                </div>
            </div>
            <template style="margin-top:-10px;">
                <el-table :data="tableData" style="padding:0 10px">

                    <el-table-column align="center" label="出售者">
                        <template slot-scope="scope">
                            <div v-if="scope.row.seller_nickname">
                                <img :src="scope.row.seller_avatar" style="width:30px;height:30px;padding:1px;border:1px solid #ccc;">
                                <div>[[scope.row.seller_nickname]]</div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="购买者">
                        <template slot-scope="scope">
                            <div v-if="scope.row.buyer_nickname">
                                <img :src="scope.row.buyer_avatar" style="width:30px;height:30px;padding:1px;border:1px solid #ccc;">
                                <div>[[scope.row.buyer_nickname]]</div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="level_name" align="center" label="激活等级">
                    </el-table-column>

                    <el-table-column prop="money" align="center" label="金额">
                    </el-table-column>

                    <el-table-column prop="type_name" align="center" label="状态">
                    </el-table-column>

                    <el-table-column prop="buy_time" align="center" label="购买时间">
                    </el-table-column>

                    <el-table-column prop="activation_time" align="center" label="激活时间">
                    </el-table-column>

                </el-table>
              </template>
        <el-row style="background-color:#fff;">
        <el-col :span="24" align="center" migra style="padding:15px 5% 15px 0" v-loading="loading">
                <el-pagination background  @current-change="currentChange"
                    :current-page="current_page"
                    layout="prev, pager, next"
                    :page-size="Number(page_size)" :current-page="current_page" :total="page_total"></el-pagination>
            </el-col>
        </el-row>
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#re_content",
        delimiters: ['[[', ']]'],
        data() {
            let level={!!$level?:'{}' !!}
            //console.log(level);
           return {
                times:[],
                change_code_num:'',
                table_loading:false,
                loading:false,
                search_loading:false,
                all_loading:false,
                page_total:0,
                page_size:0,
                current_page:0,
                search_form:{
                    seller:'',
                    buyer:'',
                    level:'',
                    is_time:'',
                    time:{
                        start:'',
                        end:'',
                    },

                },
                types: [
                   {
                       status: '1',
                       label: '未激活'
                   },
                   {
                       status: '2',
                       label: '已激活'
                   },
                ],
                real_search_form:{},
                tableData: [],
                options:level,
           }
        },
        mounted () {
              this.search();
        },
        methods: {
              search() {
                this.search_loading = true;
                let json={
                    search:this.search_form,
                }
                if(this.times && this.times.length>0) {
                  json.search.time.start = this.times[0];
                  json.search.time.end = this.times[1];
                }
                this.$http.post('{!! yzWebFullUrl('plugin.room.admin.anchor-manage.usageRecordSearch') !!}',json
                ).then(function (response) {
                    if (response.data.result){
                              let datas = response.data.data.list;
                              this.tableData=datas.data 
                              this.page_total = datas.total;
                              this.page_size = datas.per_page;
                              this.current_page = datas.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.room.admin.anchor-manage.usageRecordSearch') !!}',{page:val,search:this.real_search_form}).then(function (response){
                        if (response.data.result){
                              let datas = response.data.data.list;
                              this.tableData=datas.data 
                              this.page_total = datas.total;
                              this.page_size = datas.per_page;
                              this.current_page = datas.current_page;
                              this.loading = false;
                        } else {
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                    },function (response) {
                        console.log(response);
                        this.loading = false;
                    }
                    );
                },
            codeBasic() {
            window.location.href = "{!! yzWebFullUrl('plugin.room.admin.anchor-manage.basicCode') !!}";
            },
            code() {
                window.location.href = "{!! yzWebFullUrl('plugin.room.admin.anchor-manage.codeList') !!}";
            },
            codeLog() {
                window.location.href = "{!! yzWebFullUrl('plugin.room.admin.anchor-manage.usageRecord') !!}";
            },
        },
    });
</script>
@endsection