@extends('layouts.base')
<style>
    .user{
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
        height: 80px;
    }
    .user .user-avatar{
        height: 50px;
        width: 50px;
        margin-right: 5px;
        border-radius: 50%;
        overflow: hidden;
    }
    .user .user-avatar .avatar-image{
        width: 100% !important;
        height: 100% !important;
    }
    .user .user-info{
        height: 50px;
        text-align: left;
    }
    .user .user-info .user-nickname{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .user .user-info .user-status{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .label{
        font-size: 15px!important;
    }
    .el-pagination{
        margin-top: 15px!important;
    }
    .distance{
        color: #f56c6c!important;
    }
</style>
@section('content')
    <div class="w1200 m0a" id="mainContent">
        {{--列表信息--}}
        <div class="panel panel-default">
            <div class="panel-body">
                {{--选项卡&基础内容--}}
                <el-tabs v-model="activeName">
                    <el-tab-pane label="返利信息" name="_list">
                        {{--搜索--}}
                        <el-form :inline="true" :model="search_info">
                            <el-form-item label="会员ID">
                                <el-input v-model="search_info.uid" placeholder="请输入会员ID"></el-input>
                            </el-form-item>
                            <el-form-item label="用户昵称">
                                <el-input v-model="search_info.nickname" placeholder="请输入用户昵称"></el-input>
                            </el-form-item>
                            <el-form-item label="订单ID">
                                <el-input v-model="search_info.order_id" placeholder="请输入订单ID"></el-input>
                            </el-form-item>
                            <el-form-item label="商品ID">
                                <el-input v-model="search_info.goods_id" placeholder="请输入商品ID"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="clickSearch('_list')">查询</el-button>
                            </el-form-item>
                        </el-form>
                        {{--表格--}}
                        <el-table :data="list" style="width: 100%">
                            <el-table-column align="center" prop="id" label="ID" width="80"></el-table-column>
                            <el-table-column align="center" prop="member" label="用户信息" width="230">
                                <template slot-scope="scope">
                                    <div class="user">
                                        <div class="user-avatar">
                                            <img class="avatar-image" :src="scope.row.member.avatar_image || ''" />
                                        </div>
                                        <div class="user-info">
                                            <div class="user-nickname">昵称：[[scope.row.member.nickname || '']]</div>
                                            <div class="user-status">ID：[[scope.row.member.uid || '']]</div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="订单商品" width="200">
                                <template slot-scope="scope">
                                    [[ scope.row.goods.title ]]<br />
                                    [[ scope.row.order.order_sn ]]
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="状态" width="110">
                                <template slot-scope="scope">
                                    <el-tag v-if="[0,1,2].includes(Number(scope.row.max_status))" type="success">进行中</el-tag>
                                    <el-tag v-else type="danger">已失效</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="total_money" label="总收益" width="130"></el-table-column>
                            <el-table-column align="center" prop="created_at" label="下单时间" width="200"></el-table-column>
                            <el-table-column align="center" prop="created_at" label="操作">
                                <template slot-scope="scope">
                                    <el-button type="info" @click="seeInfo(scope.row.goods_id,scope.row.order_id)">查看明细</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        {{--分页--}}
                        <el-pagination
                                v-if="total_page > 1"
                                background
                                layout="prev, pager, next"
                                :page-count="total_page"
                                :current-page="page"
                                @current-change="changePage($event, '_list')">
                        </el-pagination>
                    </el-tab-pane>
                    <el-tab-pane label="临期充值" name="recently">
                        <!--搜索-->
                        <el-form :inline="true" :model="recently_search_info">
                            {{--<el-form-item label="会员ID">--}}
                            {{--    <el-input v-model="recently_search_info.uid" placeholder="请输入会员ID"></el-input>--}}
                            {{--</el-form-item>--}}
                            {{--<el-form-item label="用户昵称">--}}
                            {{--    <el-input v-model="recently_search_info.nickname" placeholder="请输入用户昵称"></el-input>--}}
                            {{--</el-form-item>--}}
                            {{--<el-form-item label="订单ID">--}}
                            {{--    <el-input v-model="recently_search_info.order_id" placeholder="请输入订单ID"></el-input>--}}
                            {{--</el-form-item>--}}
                            {{--<el-form-item label="商品ID">--}}
                            {{--    <el-input v-model="recently_search_info.goods_id" placeholder="请输入商品ID"></el-input>--}}
                            {{--</el-form-item>--}}
                            <el-form-item label="预计入账时间">
                                <el-date-picker
                                        v-model="recently_search_info.time"
                                        type="daterange"
                                        align="right"
                                        unlink-panels
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :picker-options="pickerOptions">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="clickSearch('recently')">查询</el-button>
                            </el-form-item>
                        </el-form>
                        <!--表单-->
                        <el-table :data="recently_list" style="width: 100%">
                            <el-table-column align="center" prop="id" label="ID" width="80"></el-table-column>
                            <el-table-column align="center" prop="member" label="用户信息" width="230">
                                <template slot-scope="scope">
                                    <div class="user">
                                        <div class="user-avatar">
                                            <img class="avatar-image" :src="scope.row.member.avatar_image || ''" />
                                        </div>
                                        <div class="user-info">
                                            <div class="user-nickname">昵称：[[scope.row.member.nickname || '']]</div>
                                            <div class="user-status">ID：[[scope.row.member.uid || '']]</div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="订单商品" width="200">
                                <template slot-scope="scope">
                                    [[ scope.row.goods.title ]]<br />
                                    [[ scope.row.order.order_sn ]]
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="季度月度" width="150">
                                <template slot-scope="scope">
                                    第[[ scope.row.quarter ]]季，第[[ scope.row.month ]]月
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="预计入账时间" width="180">
                                <template slot-scope="scope">
                                    [[ scope.row.expect_thaw_time ]]<br />
                                    <span class="distance">[[ computeTimeDistance(scope.row.expect_thaw_time) ]]</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="money" label="入账金额" width="150"></el-table-column>
                            <el-table-column align="center" label="状态" width="100">
                                <template slot-scope="scope">
                                    {{--状态：0=冻结中，1=待结算,2=已结算，3=已失效，4=已退款(失效)--}}
                                    <el-tag v-if="scope.row.status == 0" type="info" disable-transitions>冻结中</el-tag>
                                    <el-tag v-else-if="scope.row.status == 1" type="warning" disable-transitions>待结算</el-tag>
                                    <el-tag v-else-if="scope.row.status == 2" type="success" disable-transitions>已结算</el-tag>
                                    <el-tag v-else-if="scope.row.status == 3" type="danger" disable-transitions>已失效</el-tag>
                                    <el-tag v-else-if="scope.row.status == 4" type="danger" disable-transitions>已退款</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="created_at" label="操作">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.status == 0 && scope.row.month == 7" type="primary" size="small" @click="changeMoney(scope.row, 'recently')">
                                        变更入账金额
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页-->
                        <el-pagination
                                v-if="recently_total_page > 1"
                                background
                                layout="prev, pager, next"
                                :page-count="recently_total_page"
                                :current-page="recently_page"
                                @current-change="changePage($event, 'recently')"
                        ></el-pagination>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        {{--明细弹框--}}
        <el-dialog title="查看明细" :visible.sync="see_details" @close="seeDetailsPopupClose" width="1200px">
            <template>
                <!--搜索-->
                <el-form :inline="true" :model="see_search_list">
                    <el-form-item label="状态">
                        {{--状态：0=冻结中，1=待结算,2=已结算，3=已失效，4=已退款(失效)--}}
                        <el-select v-model="see_search_list.status" placeholder="全部">
                            <el-option label="冻结中" value="0"></el-option>
                            <el-option label="待结算" value="1"></el-option>
                            <el-option label="已结算" value="2"></el-option>
                            <el-option label="已失效" value="3"></el-option>
                            {{--<el-option label="已退款" value="4"></el-option>--}}
                        </el-select>
                    </el-form-item>
                    <el-form-item label="季度" placeholder="请输入需要查询的季度">
                        <el-input v-model="see_search_list.quarter"></el-input>
                    </el-form-item>
                    <el-form-item label="月度" placeholder="请输入需要查询的月度">
                        <el-input v-model="see_search_list.month"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="clickSearch('details')">查询</el-button>
                    </el-form-item>
                </el-form>
                <!--表单-->
                <el-table :data="see_list" style="width: 100%">
                    <el-table-column align="center" prop="id" label="ID" width="80"></el-table-column>
                    <el-table-column align="center" label="季度月度" width="150">
                        <template slot-scope="scope">
                            第[[ scope.row.quarter ]]季，第[[ scope.row.month ]]月
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="expect_thaw_time" label="预计入账时间" width="180"></el-table-column>
                    <el-table-column align="center" prop="reality_thaw_time" label="实际入账时间" width="180"></el-table-column>
                    <el-table-column align="center" prop="money" label="入账金额" width="150"></el-table-column>
                    <el-table-column align="center" label="状态" width="100">
                        <template slot-scope="scope">
                            {{--状态：0=冻结中，1=待结算,2=已结算，3=已失效，4=已退款(失效)--}}
                            <el-tag v-if="scope.row.status == 0" type="info" disable-transitions>冻结中</el-tag>
                            <el-tag v-else-if="scope.row.status == 1" type="warning" disable-transitions>待结算</el-tag>
                            <el-tag v-else-if="scope.row.status == 2" type="success" disable-transitions>已结算</el-tag>
                            <el-tag v-else-if="scope.row.status == 3" type="danger" disable-transitions>已失效</el-tag>
                            <el-tag v-else-if="scope.row.status == 4" type="danger" disable-transitions>已退款</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="复购" width="120">
                        <template slot-scope="scope">
                            {{--状态：0=冻结中，1=待结算,2=已结算，3=已失效，4=已退款(失效)--}}
                            <div v-if="scope.row.is_repurchase == 1">需要复购</div>
                            <div v-else>不需要复购</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="created_at" label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status == 0 && scope.row.month == 7" type="primary" size="small" @click="changeMoney(scope.row, 'details')">
                                变更入账金额
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination
                        v-if="see_total_page > 1"
                        background
                        layout="prev, pager, next"
                        :page-count="see_total_page"
                        :current-page="see_page"
                        @current-change="changePage($event, 'details')"
                ></el-pagination>
            </template>
        </el-dialog>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#mainContent',
            delimiters: ['[[', ']]'],
            name: 'rebate',
            data() {
                return {
                    activeName: '_list',
                    // 基础列表
                    page: 1,
                    total_page: 1,
                    list: [],
                    search_info: {
                        uid: '',
                        nickname: '',
                        order_id: '',
                        goods_id: '',
                        quarter: '',
                        month: '',
                    },
                    // 临期充值
                    recently_page: 1,
                    recently_total_page: 1,
                    recently_list: [],
                    recently_search_info: {
                        uid: '',
                        nickname: '',
                        order_id: '',
                        goods_id: '',
                        month: 7,
                        status: 0,
                        time: '',
                    },
                    // 查看明细
                    see_details: false,
                    see_page: 1,
                    see_total_page: 1,
                    see_list: [],
                    see_search_list: {
                        goods_id: "",
                        order_id: ""
                    },
                    pickerOptions: {
                        shortcuts: [{
                            text: '今天',
                            onClick(picker) {
                                const now = new Date();
                                const year = now.getFullYear();
                                const month = now.getMonth(); // 注意：月份从0开始
                                const day = now.getDate();
                                // 设置今天开始时间为00:00:00
                                const start = new Date(year, month, day, 0, 0, 0);
                                // 设置今天结束时间为23:59:59
                                const end = new Date(year, month, day, 23, 59, 59);

                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '未来7天',
                            onClick(picker) {
                                const start = new Date();
                                const end = new Date();
                                end.setDate(end.getDate() + 7); // 在当前日期基础上增加7天

                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '未来30天',
                            onClick(picker) {
                                const start = new Date();
                                const end = new Date();
                                end.setDate(end.getDate() + 30);

                                picker.$emit('pick', [start, end]);
                            }
                        }]
                    }
                }
            },
            watch:{
                "activeName"(value){
                    if(value == 'recently') this.recentlyList();
                    else this.getData();
                }
            },
            mounted () {
                this.getData();
            },
            methods: {
                // 基础信息 - 获取数据
                getData(){
                    let _this = this;
                    let loading = _this.showLoading();
                    // 请求获取数据
                    $.ajax({
                        url: "{!! yzWebUrl('plugin.rebate.admin.index.index') !!}",
                        type: "post",
                        data: {
                            page: _this.page,
                            search: _this.search_info,
                        },
                        success: function(result) {
                            let data = result.data;
                            if(parseInt(result.result) === 1){
                                // 处理数据
                                _this.list = data.data;
                                _this.total_page = data.last_page;
                            }
                            loading.close();
                        }
                    });
                },
                // 基础信息 - 查看明细
                seeInfo(goods_id, order_id){
                    this.see_page = 1;
                    this.see_search_list.goods_id = goods_id;
                    this.see_search_list.order_id = order_id;

                    this.getList();
                },
                // 查看明细 - 获取列表
                getList(){
                    let _this = this;
                    let loading = _this.showLoading();
                    $.ajax({
                        url: "{!! yzWebUrl('plugin.rebate.admin.index.detail') !!}",
                        type: "post",
                        data: {
                            page: _this.see_page,
                            search: _this.see_search_list
                        },
                        success: function(result) {
                            loading.close(0);
                            let data = result.data;
                            if(parseInt(result.result) === 1){
                                // 处理数据
                                _this.see_list = data.data;
                                _this.see_total_page = data.last_page;
                                _this.see_details = true;
                            }
                        }
                    });
                },
                // 查看明细 - 关闭弹框
                seeDetailsPopupClose(){
                    this.see_details = false;
                    this.see_search_list = {};
                },
                // 临期充值 - 获取列表
                recentlyList(){
                    let _this = this;
                    let loading = _this.showLoading();
                    let search = Object.assign({}, _this.recently_search_info || {});
                    if(Object.values(search['time'] || {}).length >= 2){
                        search.time[0] = Math.floor(new Date(search.time[0]).getTime() / 1000);
                        search.time[1] = Math.floor(new Date(search.time[1]).getTime() / 1000);
                    }
                    $.ajax({
                        url: "{!! yzWebUrl('plugin.rebate.admin.index.detail') !!}",
                        type: "post",
                        data: {
                            page: _this.recently_page,
                            search: search
                        },
                        success: function(result) {
                            loading.close(0);
                            let data = result.data;
                            if(parseInt(result.result) === 1){
                                // 处理数据
                                _this.recently_list = data.data;
                                _this.recently_total_page = data.last_page;
                            }
                        }
                    });
                },
                // 数据分页
                changePage(val, type){
                    if(type == '_list'){
                        this.page = val;
                        this.getData();
                    }else if(type == 'details'){
                        this.see_page = val;
                        this.getList();
                    }else if(type == 'recently'){
                        this.recently_page = val;
                        this.recentlyList();
                    }
                },
                // 相关搜索
                clickSearch(type){
                    if(type == '_list'){
                        this.page = 1;
                        this.getData();
                    }else if(type == 'details'){
                        this.see_page = 1;
                        this.getList();
                    }else if(type == 'recently'){
                        this.recently_page = 1;
                        this.recentlyList();
                    }
                },
                // 修改入账金额
                changeMoney(info, type){
                    let _this = this;
                    _this.$prompt('当前入账金额：' + info.money, '请输入新入账金额', {
                        confirmButtonText: '确定修改',
                        cancelButtonText: '取消修改',
                        inputType: 'number',
                    }).then(({ value }) => {
                        let newMoney = Number(value) > 0 ? Number(value) : 0;
                        let msg = `确定将当前月入账金额由${info.money}元修改为${newMoney}元？`;
                        _this.$confirm(msg, '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                            $.ajax({
                                url: "{!! yzWebUrl('plugin.rebate.admin.index.updateMoney') !!}",
                                type: "post",
                                data: {
                                    id: info.id,
                                    new_money: newMoney
                                },
                                success: function(result) {
                                    if(type == 'recently'){
                                        _this.recentlyList();
                                    }else{
                                        _this.getData();
                                        _this.getList();
                                    }
                                }
                            });
                        }).catch(() => {});
                    }).catch(() => {});
                },
                // 显示加载动画
                showLoading(){
                    return this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                },
                // 计算时间距离
                computeTimeDistance(expect_thaw_time){
                    const now = new Date().getTime() / 1000;
                    const expectThawTime = new Date(expect_thaw_time).getTime() / 1000;

                    let diff = Number(expectThawTime) - Number(now);
                    let diffDay = Math.floor(diff / 86400);


                    if(diffDay > 0) return `${diffDay} 天后入账`;
                    else return '24小时内入账';
                }
            },
        })
    </script>
@endsection