@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" disabled @click="code()">授权码管理</el-button>
                <el-button type="info" @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.keyword" style="width:30%;margin-left:16px;margin-right:16px;" placeholder="会员ID/昵称/姓名/手机号"></el-input>
                <el-select v-model="search_form.code_level_id" placeholder="授权码等级" clearable>
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <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 prop="id" align="center" label="ID">
        </el-table-column>

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

        <el-table-column prop="level_name" align="center" label="授权码等级">
        </el-table-column>

        <el-table-column prop="sort" align="center" label="授权码数量">
          <template slot-scope="scope">
            <el-popover class="item" placement="top" effect="light">
                <div style="text-align:center;">
                    <el-input v-model="change_code_num" size="small"
                              style="width:100px;"></el-input>
                    <el-button size="small" @click="confirmChangeCodeNum(scope.row.id)" >确定
                    </el-button>
                </div>
                <i ref="icon" class="el-icon-edit edit-i" style="color:#29BA9C;cursor:pointer;" title="点击编辑排序" @click="editTitle(scope.$index,'code_num')" slot="reference"></i>

            </el-popover>
            [[scope.row.code_num]]
          </template>
        <el-popover placement="right" width="400" trigger="click">
            123
        </el-popover>
        </el-table-column>

      <el-table-column align="center" label="记录">
        <template slot-scope="scope" >
            <a :href="'{{ yzWebFullUrl('plugin.room.admin.anchor-manage.codeDetail', array('id' => '')) }}'+[[scope.row.id]]"  style="color:#999">查看明细</a>
        </template>
      </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 {
                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:{
                    keyword:'',
                    code_level_id:'',
                },
                real_search_form:{},
                tableData: [],
                options:level,
           }
        },
        mounted () {
              this.search();
        },
        methods: {
              // 确认修改排序
            confirmChangeCodeNum(id) {
                    let that = this;
                    if (!(/^\d+$/.test(that.change_code_num))) {
                        that.$message.error('请输入正确数字');
                        return false;
                    }
                    that.table_loading = true;
                    let json = {id: id, number: that.change_code_num};
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    that.$http.post("{!! yzWebFullUrl('plugin.room.admin.anchor-manage.codeUpdate') !!}", json).then(response => {
                        console.log(response);
                        if (response.data.result == 1) {
                            that.$message.success('操作成功！');
                           
                            loading.close();
                        location.reload();
                        } else {
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }), function (res) {
                        console.log(res);
                        that.table_loading = false;
                    };
                },
              // 编辑商品标题
              editTitle(index, type) {
                  
                    let that = this;
                    if (type == 'code_num') {
                        that.change_code_num = "";
                        that.change_code_num = that.tableData[index].code_num;
                    }
                },
              search() {
                this.search_loading = true;
                let json={
                    search:this.search_form,
                }
                this.$http.post('{!! yzWebFullUrl('plugin.room.admin.anchor-manage.codeListSearch') !!}',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.codeListSearch') !!}',{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