@extends('layouts.base')
@section('title', "核销记录")
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
<style>
    .edit-i{display:none;}
    .el-table_1_column_2:hover .edit-i{font-weight:900;padding:0;margin:0;display:inline-block;}
    .el-tabs__item,.is-top{font-size:16px}
    .el-tabs__active-bar { height: 3px;}
</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">
                </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.member" placeholder="会员ID/昵称/姓名/手机号"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="">
                        <el-input v-model="search_form.card_name" placeholder="拓客卡名称"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="search_form.order_sn" placeholder="订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="search_form.store_id" placeholder="门店ID"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="search_form.store_name" placeholder="门店名称"></el-input>
                    </el-form-item>
                    
                    <!-- <el-form-item label="">
                        <el-select v-model="search_form.type" clearable placeholder="核销类型" style="width:150px">
                            <el-option label="一次性消费" value="1"></el-option>
                            <el-option label="多次消费" value="2"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="">
                        <el-select v-model="search_form.is_time" clearable placeholder="是否搜索时间" style="width:150px">
                            <el-option label="时间不限" value="0"></el-option>
                            <el-option label="搜索时间" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-date-picker
                            v-model="times"
                            type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            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">
                <div class="vue-main-title" style="margin-bottom:20px">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content" style="flex:0 0 120px">核销列表</div>
                    <div class="" style="text-align:left;font-size:14px;color:#999"></div>
                    <div class="vue-main-title-button"></div>
                </div>
                <el-table :data="list" style="width: 100%">
                    <el-table-column label="会员ID" align="center" prop="id" width="100">
                        <template slot-scope="scope">
                            <div v-if="scope.row.belongs_to_member_card&&scope.row.belongs_to_member_card.member">
                                [[scope.row.belongs_to_member_card.member.uid]]
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="会员" align="center" prop="display_order">
                        <template slot-scope="scope">
                            <div v-if="scope.row.belongs_to_member_card&&scope.row.belongs_to_member_card.member">
                                <div>
                                    <img :src="scope.row.belongs_to_member_card.member.avatar_image" alt="" style="width:40px;height:40px;border-radius:50%">
                                </div>
                                <div @click="gotoMember(scope.row.belongs_to_member_card.member.uid)" style="color:#29BA9C;cursor: pointer;" class="vue-ellipsis">[[scope.row.belongs_to_member_card.member.nickname]]</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="推荐人" align="center" prop="display_order">
                        <template slot-scope="scope">
                            <div v-if="scope.row.parent">
                                <div>
                                    <img :src="scope.row.parent.avatar_image" alt="" style="width:40px;height:40px;border-radius:50%">
                                </div>
                                <div @click="gotoMember(scope.row.parent.uid)" style="color:#29BA9C;cursor: pointer;" class="vue-ellipsis">[[scope.row.parent.nickname]]</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="使用时间" align="center" prop="created_at">
                        
                    </el-table-column>
                    <el-table-column label="门店名称" align="center" prop="id">
                        <template slot-scope="scope">    
                            <div v-if="scope.row.belongs_to_member_card&&scope.row.belongs_to_member_card.card">
                                <div v-if="scope.row.belongs_to_member_card.card.store">[[scope.row.belongs_to_member_card.card.store.store_name]]</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="拓客卡名称" align="center" prop="id">
                        <template slot-scope="scope">    
                            <div v-if="scope.row.belongs_to_member_card&&scope.row.belongs_to_member_card.card">
                                <div v-if="scope.row.belongs_to_member_card.card.goods">[[scope.row.belongs_to_member_card.card.goods.title]]</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="核销起止时间" align="center" prop="day" width="110">
                        <template slot-scope="scope">    
                            <div>
                                <i class="iconfont icon-all_watchroot" @click="openTime(scope.row)" style="color:#29BA9C;cursor: pointer;"></i>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单编号" align="center" prop="day" width="110">
                        <template slot-scope="scope">    
                            <div v-if="scope.row.belongs_to_member_card&&scope.row.belongs_to_member_card.order">
                                <div>[[scope.row.belongs_to_member_card.order.order_sn]]</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单金额" align="center" prop="id">
                        <template slot-scope="scope">    
                            <div v-if="scope.row.belongs_to_member_card&&scope.row.belongs_to_member_card.order">
                                <div>[[scope.row.belongs_to_member_card.order.price]]</div>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="核销类型" align="center" prop="type_name">
                    </el-table-column> -->
                    <el-table-column label="核销详情" align="center" prop="">
                        <template slot-scope="scope">    
                            <div>
                                <i class="iconfont icon-all_watchroot" @click="openDetail(scope.row)" style="color:#29BA9C;cursor: pointer;"></i>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="剩余次数" align="center" prop="id">
                        <template slot-scope="scope">    
                            <div>
                                <i class="iconfont icon-all_watchroot" @click="openNum(scope.row)" style="color:#29BA9C;cursor: pointer;"></i>
                            </div>
                        </template>
                    </el-table-column>
                    
                </el-table>
            </div>
        </div>
        <!--核销时间-->
        <el-dialog :visible.sync="time_show" width="600px" center  title="核销时间">
            <div style="height:400px">
                <div style="display:flex;font-weight:500;line-height:36px;">
                    <div>核销时间：</div>
                    <div>
                        <div>[[cancel.start]] - [[cancel.end]]</div>
                        <div>
                            <span v-for="(item,index) in cancel.time" :key="index">[[item.start]]-[[item.end]]&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        </div>
                        <div>
                            限
                            <span v-for="(item,index) in cancel.days">
                                [[item]]
                                <span v-if="index!=cancel.days.length-1">、</span>
                            </span>
                        </div>
                    </div>
                </div>
                
            </div>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="goods_show = false">取 消</el-button>
                <el-button type="primary" @click="sureGoods">确 定 </el-button>
            </span> -->
        </el-dialog>
        <!--核销详情-->
        <el-dialog :visible.sync="detail_show" width="800px" center  title="核销详情">
            <div>
                <div style="font-weight:500;">
                    <div style="text-align:center">一次性消费</div>
                    <div class="detail-ta" style="margin:10px;border:1px solid #dadada;border-radius:5px">
                        <div class="detail-head" style="background:#fafafa;display:flex;border-bottom:1px solid #dadada;line-height:36px;">
                            <div style="flex:7;text-align:center">
                                项目名称
                            </div>
                            <div style="flex:3;text-align:center">
                                使用次数
                            </div>
                            <div style="flex:3;text-align:center">
                                核销人员
                            </div>
                        </div>
                        <div class="detail-tr" style="display:flex;line-height:36px;" v-if="one_detail_list.length>0">
                            <div class="detail-td-left" style="flex:7;align-items: center;">
                                <div v-for="(item,index) in one_detail_list" :key="index" :style="{borderBottom:index!=one_detail_list.length-1?'1px solid #dadada':''}" style="padding:0 5px">
                                    [[item]]
                                </div>
                            </div>
                            <div style="flex:3;display:flex;align-items: center;justify-content: center;border-left:1px solid #dadada;">
                                1
                            </div>
                            <div style="flex:3;display:flex;align-items: center;justify-content: center;border-left:1px solid #dadada;">
                                [[clerk_member_name]]
                            </div>
                        </div>
                    
                    </div>
                </div>

                <div style="font-weight:500;margin-top:30px">
                    <div style="text-align:center">多次消费</div>
                    <div class="detail-ta" style="margin:10px;border:1px solid #dadada;border-radius:5px">
                        <div class="detail-head" style="background:#fafafa;display:flex;border-bottom:1px solid #dadada;line-height:36px;">
                            <div style="flex:7;text-align:center">
                                项目名称
                            </div>
                            <div style="flex:3;text-align:center">
                                使用次数
                            </div>
                            <div style="flex:3;text-align:center">
                                核销人员
                            </div>
                        </div>
                        <div class="detail-tr"  v-for="(item,key,index) in many_detail_list" :key="index" style="display:flex;line-height:36px;">
                            <div class="detail-td-left" style="flex:7;align-items: center;">
                                <div :style="{borderBottom:index!=(Object.keys(many_detail_list).length-1)?'1px solid #dadada':''}" style="padding:0 5px">
                                    [[key]]
                                </div>
                                
                            </div>
                            <div :style="{borderBottom:index!=(Object.keys(many_detail_list).length-1)?'1px solid #dadada':''}" style="flex:3;display:flex;align-items: center;justify-content: center;border-left:1px solid #dadada;">
                                [[item]]
                            </div>
                            <div :style="{borderBottom:index!=(Object.keys(many_detail_list).length-1)?'1px solid #dadada':''}" style="flex:3;display:flex;align-items: center;justify-content: center;border-left:1px solid #dadada;">
                                [[clerk_member_name]]
                            </div>
                        </div>
                    
                    </div>
                </div>
                
            </div>
            
        </el-dialog>
        <!--剩余次数-->
        <el-dialog :visible.sync="num_show" width="800px" center  title="剩余次数">
            <div>
                <div style="font-weight:500;">
                    <div style="text-align:center">一次性消费</div>
                    <div class="detail-ta" style="margin:10px;border:1px solid #dadada;border-radius:5px">
                        <div class="detail-head" style="background:#fafafa;display:flex;border-bottom:1px solid #dadada;line-height:36px;">
                            <div style="flex:6;text-align:center">
                                项目名称
                            </div>
                            <div style="flex:3;text-align:center">
                                已使用次数
                            </div>
                            <div style="flex:2;text-align:center">
                                剩余次数
                            </div>
                        </div>
                        <div class="detail-tr" style="display:flex;line-height:36px;">
                            <div class="detail-td-left" style="flex:6;align-items: center;">
                                <div v-for="(item,index) in one_num_list" :key="index" :style="{borderBottom:index!=one_num_list.length-1?'1px solid #dadada':''}" style="padding:0 5px">
                                    [[item.name]]
                                </div>
                            </div>
                            <div style="flex:3;display:flex;align-items: center;justify-content: center;border-left:1px solid #dadada;" v-if="data.belongs_to_member_card">
                                [[data.belongs_to_member_card.once_write_off==1?1:0]]
                            </div>
                            <div style="flex:2;display:flex;align-items: center;justify-content: center;border-left:1px solid #dadada;" v-if="data.belongs_to_member_card">
                                [[data.belongs_to_member_card.once_write_off==0?1:0]]
                            </div>
                        </div>
                    
                    </div>
                </div>

                <div style="font-weight:500;margin-top:30px">
                    <div style="text-align:center">多次消费</div>
                    <div class="detail-ta" style="margin:10px;border:1px solid #dadada;border-radius:5px">
                        <div class="detail-head" style="background:#fafafa;display:flex;border-bottom:1px solid #dadada;line-height:36px;">
                            <div style="flex:6;text-align:center">
                                项目名称
                            </div>
                            <div style="flex:3;text-align:center">
                                已使用次数
                            </div>
                            <div style="flex:2;text-align:center">
                                剩余次数
                            </div>
                        </div>
                        <div class="detail-tr"  v-for="(item,index) in many_num_list" style="display:flex;line-height:36px;">
                            <div class="detail-td-left" style="flex:7;align-items: center;">
                                <div :key="index" :style="{borderBottom:index!=1?'1px solid #dadada':''}" style="padding:0 5px">
                                    [[item.name]]
                                </div>
                                
                            </div>
                            <div :style="{borderBottom:index!=many_num_list.length-1?'1px solid #dadada':''}" style="flex:3;display:flex;align-items: center;justify-content: center;border-left:1px solid #dadada;">
                                [[item.write_off_num]]
                            </div>
                            <div :style="{borderBottom:index!=many_num_list.length-1?'1px solid #dadada':''}" style="flex:3;display:flex;align-items: center;justify-content: center;border-left:1px solid #dadada;">
                                [[item.rest_num]]
                            </div>
                            
                        </div>
                    
                    </div>
                </div>
                
            </div>
        </el-dialog>
        <!-- 分页 -->
        <div class="vue-page" v-if="total>0">
            <el-row>
                <el-col align="right">
                    <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total"
                        :page-size="per_page" :current-page="current_page" background
                        ></el-pagination>
                </el-col>
            </el-row>
        </div>
    </div>
</div>

<script>
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        name: 'test',
        data() {
            return {
                time_show:false,
                detail_show:false,
                num_show:false,
                list:[],
                times:[],
                one_detail_list:[],
                many_detail_list:{},
                clerk_member_name:'',
                one_num_list:[],
                many_num_list:{},
                data:{},
                
                province_list:[],
                city_list : [],
                search_form:{
                    
                },
                
                cancel:{

                },
                rules: {},
                current_page:1,
                total:1,
                per_page:1,
            }
        },
        created() {

        },
        mounted() {
            this.getData(1);
            
        },
        methods: {
            
            getData(page) {
                console.log(this.times)
                let json = {
                    member:this.search_form.member,
                    card_name:this.search_form.card_name,
                    order_sn:this.search_form.order_sn,
                    // type:this.search_form.type,
                    is_time:this.search_form.is_time,
                    store_name:this.search_form.store_name,
                    store_id:this.search_form.store_id
                };
                if(this.times && this.times.length>0) {
                    json.time = {}
                    json.time.start = this.times[0];
                    json.time.end = this.times[1];
                }
                let search = {
                    page:page,
                    search:json
                }
                console.log(json)
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.customer-development.Backend.Admin.controllers.write-off.search') !!}',search).then(function(response) {
                    if (response.data.result) {
                        this.list = response.data.data.data;
                        this.current_page=response.data.data.current_page;
                        this.total=response.data.data.total;
                        this.per_page=response.data.data.per_page;
                        loading.close();

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

                }, function(response) {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                    loading.close();
                });
            },
            openTime(row) {
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.customer-development.Backend.Admin.controllers.write-off.get-time') !!}',{id:row.id}).then(function(response) {
                    if (response.data.result) {
                        
                        this.cancel = response.data.data || {};
                        loading.close();

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

                }, function(response) {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                    loading.close();
                });
                this.time_show = true
            },
            openDetail(row) {
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.customer-development.Backend.Admin.controllers.write-off.get-detail') !!}',{id:row.id}).then(function(response) {
                    if (response.data.result) {
                        
                        this.one_detail_list = response.data.data.detail.once || [];
                        this.many_detail_list = response.data.data.detail.many || {};
                        this.clerk_member_name = response.data.data.clerk_member_name;
                        loading.close();

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

                }, function(response) {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                    loading.close();
                });
                this.detail_show = true
            },
            openNum(row) {
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.customer-development.Backend.Admin.controllers.write-off.get-rest') !!}',{id:row.id}).then(function(response) {
                    if (response.data.result) {
                        this.data = response.data.data || {};
                        this.one_num_list = response.data.data.once_list || [];
                        this.many_num_list = response.data.data.many_list || []
                        loading.close();

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

                }, function(response) {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                    loading.close();
                });
                this.num_show = true
            },
            
            gotoDetail(item) {
                let link = `{!! yzWebFullUrl('plugin.store-cashier.admin.store-apply.apply-detail') !!}`+`&id=`+item.id;
                window.location.href = link;
            },
            gotoMember(id) {
                window.location.href = `{!! yzWebFullUrl('member.member.detail') !!}`+`&id=`+id;
            },
            
            search(val) {
                this.getData(val);
            },
            
        },
    })
</script>
@endsection