@extends('layouts.base')
@section('title', '手动赠送')
@section('content')
<link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
<link rel="stylesheet" href="{{resource_get('plugins/room/src/common/static/index.css')}}">
<style>
.main-panel{
    margin-top:50px;
}
.panel{
    margin-bottom:10px!important;
    padding-left: 20px;
    border-radius: 10px;
}   
.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:40px;
    position:relative;
    border-radius: 8px;
    min-height:100vh;
    background-color:#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;
}
.confirm-btn{
    width: calc(100% - 266px);
    position:fixed;
    bottom:0;
    right:0;
    margin-right:10px;
    line-height:63px;
	background-color: #ffffff;
	box-shadow: 0px 8px 23px 1px 
		rgba(51, 51, 51, 0.3);
    background-color:#fff;
    text-align:center;
}
b{
    font-size:14px;
}
.add-goods{
    width: 120px;
    height: 120px;
    border: dashed 1px #dde2ee;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
</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" @click="codeLog()">使用记录</el-button>
            </el-row>
            <div style="background: #eff3f6;width:100%;height:15px;margin-top: 1em;"></div>
            <el-form ref="form" :model="form" label-width="15%">
                <div class="block">
                    <div class="title"><span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>手动赠送</b></div>

                    <el-form-item label="选择会员" >
                        <div style="display:flex;">
                            <div class="good" v-for="(item,index,key) in thumbList" style="width:120px;display:flex;margin-right:20px;flex-direction: column">
                                <div class="img" style="position:relative;">
                                    <a style="color:#333;"><div style="width: 20px;height: 20px;background-color: #dde2ee;display:flex;align-items:center;justify-content:center;position:absolute;right:-10px;top:-10px;border-radius:50%;" @click="delMember(item)">X</div></a>
                                    <img :src="item.avatar" style="width:120px;height:120px;">
                                </div>
                                <div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;font-size:12px;">[[item.nickname]]</div>
                            </div>
                            <div class="add-goods" @click="openMember()">
                                <a style="font-size:32px;color: #999999;"><i class="el-icon-plus" ></i></a>
                                <div style="color: #999999;">选择会员</div>
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item label="选择等级" >
                        <el-select v-model="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-form-item>
                    <el-form-item label="赠送数量" >
                        <el-input  v-model="form.code_num" style="width:30%;margin-right:16px;" placeholder="赠送数量"><template slot="append">个</template></el-input>
                    </el-form-item>

                </div>

                <div class="confirm-btn">
                    <el-button type="primary" @click="submit">提交</el-button>
                </div>
            </el-form>
            <el-dialog :visible.sync="MemberShow" width="60%" center title="选择会员">
                <div>
                    <div style="text-align: center">
                        <el-input v-model="search_form.keyword" style="width:80%"></el-input>
                        <el-button type="primary" @click="searchMember()" style="margin-left:20px;">搜索</el-button>
                    </div>
                    <el-table :data="member_list" style="width: 100%;height:600px;overflow-y:auto"  >

                        <el-table-column prop="id" label="ID"  align="center"></el-table-column>
                        <el-table-column prop="id" label="会员"  align="center">
                            <template slot-scope="scope">
                                <div style="display:flex;align-items:center;justify-content:center;">
                                    <img :src="scope.row.avatar" alt="" style="width:50px;height:50px;">
                                    <div style="margin-left:10px">[[scope.row.nickname]]</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="refund_time" label="操作" align="center" >
                            <template slot-scope="scope">
                                <el-button  @click="sureMember(scope.row)" v-if="!scope.row.checked">
                                    选择
                                </el-button>
                                <el-button disabled v-if="scope.row.checked">
                                    选择
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-row>
                    <el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-loading="loading">
                        <el-pagination background @current-change="currentChange" layout="prev, pager, next" :total="page_total" :page-size="page_size" :current-page="current_page"></el-pagination>
                    </el-col>
                </el-row>
            </el-dialog>
        </div>
    </div>
</div>

<script>
    var vm = new Vue({
        el: "#re_content",
        delimiters: ['[[', ']]'],
        data() {
            let level={!!$level?:'{}' !!}
           
           return {
                uploadShow:false,
                chooseImgName:'',
                uploadListShow:false,
                chooseImgListName:'',
                form:{
                    member_id:0,
                    code_level_id:'',
                    code_num:0
                },
                options:level,
                member_list:[],
                thumbList:[],
                search_form:[],
                page_total:0,
                page_size:0,
                current_page:0,
                MemberShow:false,
                loading:false
           }
        },
        mounted () {

           
        },
        methods: {
                 openUpload(str) {
                        
                        this.chooseImgName = str;
                        this.uploadShow = true;
                },
                changeProp(val) {
                        if(val == true) {
                            this.uploadShow = false;
                        }
                        else {
                            this.uploadShow = true;
                        }
                    },
                
                submit() {

                    var that = this;
                    that.loading = true;
                    let re_form = JSON.parse(JSON.stringify(this.form));

                    //console.log(re_form);return;
                    if(Number(re_form.member_id) <= 0) {
                        that.$message.error("请选择会员");
                        that.loading = false;
                        return ;
                    }

                    if(Number(re_form.code_level_id) <= 0) {
                        that.$message.error("请选择等级");
                        that.loading = false;
                        return ;
                    }

                    if(Number(re_form.code_num) <= 0) {
                        that.$message.error("赠送数量不能为空");
                        that.loading = false;
                        return ;
                    }

                that.$http.post('{!! yzWebFullUrl('plugin.room.admin.anchor-manage.manualSend') !!}',{'data':re_form}).then(function (response){
                                if (response.data.result) {
                                    that.$message({message: response.data.msg,type: 'success'});
                                }else {
                                    that.$message({message: response.data.msg,type: 'error'});
                                }
                                console.log(response);
                             location.reload();
                           },function (response) {
                                console.log(response);
                    that.$message({message: response.data.msg,type: 'error'});
                          })
                },
            code() {
                window.location.href = "{!! yzWebFullUrl('plugin.room.admin.anchor-manage.codeList') !!}";
            },
            codeLog() {
                window.location.href = "{!! yzWebFullUrl('plugin.room.admin.anchor-manage.usageRecord') !!}";
            },
            codeBasic() {
                window.location.href = "{!! yzWebFullUrl('plugin.room.admin.anchor-manage.basicCode') !!}";
            },
            delMember(item){

                if (this.member_id) {
                    return ;
                }

                this.thumbList.forEach((list,index)=>{
                    if(list.id==item.id){
                    this.member_list.forEach((obj,index)=>{
                        if(obj.id==item.id){
                        obj.checked=false
                    }
                })
                    this.thumbList.splice(index,1)
                    this.form.member_id=''

                }
            })
                this.member_list.push({})
                this.member_list.splice(this.member_list.length-1,1)
            },
            openMember() {

                if (this.member_id) {
                    return ;
                }

                this.MemberShow = true;
            },
            searchMember() {
                let that = this;

                this.$http.post('{!! yzWebFullUrl('plugin.room.admin.anchor-manage.searchMember') !!}',{keyword:this.search_form.keyword}).then(response => {
                    if (response.data.result) {
                    let data = response.data.data;
                    this.page_total = data.total;
                    this.member_list = data.data;
                    this.page_size = data.per_page;
                    this.current_page = data.current_page;
                    this.member_list.forEach((item,index)=>{
                        if(this.form.member_id==item.id){
                        item.checked=true
                    }else{
                        item.checked=false
                    }
                })
                    this.member_list.push({})
                    this.member_list.splice(this.member_list.length-1,1)
                    this.real_search_form=Object.assign({},this.search_form);

                } else {
                    this.$message({message: response.data.msg,type: 'error'});
                }

            },response => {
                    this.$message({message: response.data.msg,type: 'error'});
                });
            },
            currentChange(val) {
                this.loading = true;
                this.$http.post('{!! yzWebFullUrl('plugin.room.admin.anchor-manage.searchMember') !!}',{page:val,keyword:this.real_search_form.keyword}).then(function (response){
                        if (response.data.result){
                            let datas = response.data.data;
                            this.member_list=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) {
                        this.loading = false;
                    }
                );
            },
            sureMember(item) {
                     console.log(item);
                item.member_id = item.id;
                this.thumbList=[]
                this.thumbList.push(item)
                this.member_list.forEach((item,index)=>{
                    if(this.form.member_id==item.id){
                    item.checked=true
                }else{
                    item.checked=false
                }
            })
                this.form.member_id = item.id;
                this.member_list.push({})
                this.member_list.splice(this.member_list.length-1,1)
                this.MemberShow=false
            },
        },
    });
</script>
@endsection