@extends('layouts.base')
@section('title', '基本设置')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
    <style>
        .shortInput{
            width: 500px!important;
        }
        .quarter-block{
            border: 1px solid #DCDFE6;
            margin-top: 20px;
            padding: 0 15px;
        }
        .quarter-block .tips{
            font-size: 12px;
            color: #737373;
            line-height: 20px;
            width: 100%;
        }
        .quarter-block .title{
            height: 40px;
            line-height: 40px;
            font-weight: bold;
            font-size: 14px;
            padding-left: 10px;
            position: relative;
        }
        .quarter-block .title:after{
            content: "";
            position: absolute;
            left: 0;
            top: 11px;
            width: 4px;
            height: 18px;
            background: #29ba9c;
        }
        .quarter-block .isRepurchase{
            margin-top: 15px;
            margin-right: 50px;
        }
        .quarter-block .monthInput{
            min-width: 350px;
            width: calc((100% - 30px) / 4);
            margin-bottom: 10px;
            margin-right: 10px;
        }
        .quarter-block .monthInput:nth-child(4n){
            margin-right: 0!important;
        }
        .quarter-block .monthInput .prepend-month{
            font-weight: bold;
        }
        .quarter-block .monty-list{
            margin-top: 15px;
        }


    </style>
    <div class="all">
        <div id="app">
            <el-form :model="set" label-width="15%">
                <div class="vue-head">
                    <div class="vue-main-title">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content">返利设置</div>
                    </div>
                    <div class="vue-main-form">
                        <el-form-item label="是否开启推广佣金" prop="is_switch">
                            <div style="line-height:40px">
                                <el-radio v-model.number="set.is_switch" :label="0">不开启</el-radio>
                                <el-radio v-model.number="set.is_switch" :label="1">开启</el-radio>
                            </div>
                        </el-form-item>
                        <template v-if="set.is_switch == 1">
                            <el-form-item label="我的收入海报">
                                <el-select v-model="set.poster_id">
                                    <el-option v-for="(poster,poster_index) in poster_list" :key="poster_index" :label="poster.title" :value="poster.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="复购限制时间">
                                <el-input v-model.number="set.repurchase_day" min="0" type="number" class="shortInput">
                                    <template slot="prepend">需要在复购返利结算后</template>
                                    <template slot="append">天内复购</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="返利季度">
                                <el-input placeholder="请输入返利总季度" v-model.number="set.total_quarter" min="0" type="number" class="shortInput">
                                    <template slot="prepend">总共返利</template>
                                    <template slot="append">个季度</template>
                                </el-input>
                                {{-- 循环每个季度 --}}
                                <div v-for="(quarter,index) in set.quarter_list" :key="index" class="quarter-block">
                                    <div class="title">第 [[ index ]] 季度</div>
                                    <el-input v-model.number="quarter.total_month" min="0" type="number" class="shortInput">
                                        <template slot="prepend">本季度总</template>
                                        <template slot="append">个月</template>
                                    </el-input>
                                    <div class="tips">本季度总的月数，必须大于等于1</div>
                                    <div class="isRepurchase">
                                        是否需要复购：
                                        <el-radio-group v-model.number="quarter.is_repurchase">
                                            <el-radio :label="0">不需要</el-radio>
                                            <el-radio :label="1">需要</el-radio>
                                        </el-radio-group>
                                    </div>
                                    <template v-if="quarter.is_repurchase == 1">
                                        <el-input v-model.number="quarter.repurchase_money" type="number" class="shortInput">
                                            <template slot="prepend">复购需要支付</template>
                                            <template slot="append">元</template>
                                        </el-input>
                                    </template>
                                    <div class="tips">不需要复购：在下一个季度开始返利时可以直接领取；需要复购：在本季度最后一笔返利领取后指定时间内需要重新购买指定产品，否则后续不在返利，后续未领取返利全部失效！</div>
                                    <div class="monty-list" v-if="Object.values(quarter.month_list).length > 0">
                                        <el-input
                                                v-for="(month,monthIndex) in quarter.month_list"
                                                :value="month"
                                                :key="monthIndex"
                                                placeholder="返利金额"
                                                type="number"
                                                step="0.01"
                                                class="monthInput"
                                                v-model="quarter.month_list[monthIndex]"
                                        >
                                            <template slot="prepend">第 <span class="prepend-month">[[ monthIndex ]]</span> 个月返利</template>
                                            <template slot="append">元</template>
                                        </el-input>
                                    </div>
                                </div>
                            </el-form-item>
                        </template>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    poster_list: JSON.parse('{!! json_encode($poster_list) !!}') || {},
                    // 设置信息
                    set:{
                        is_switch: Number("{{ $set['is_switch'] ?? 0 }}"),
                        repurchase_day: Number("{{ $set['repurchase_day'] ?? 0 }}"),
                        poster_id: Number("{{ $set['poster_id'] ?? '' }}"),
                        total_quarter: "{{ $set['total_quarter'] ?? '' }}",
                        quarter_list: JSON.parse('{!! json_encode($set['quarter_list']) !!}') || {},
                    },
                }
            },
            computed:{
                countTotalMonth(){
                    let set = Object.assign({}, this.set);
                    let quarterList = Object.assign({}, set.quarter_list);

                    return Object.values(quarterList).reduce((sum, item) => sum + item.total_month, 0);
                }
            },
            watch:{
                // 总季度信息变更
                'set.total_quarter':{
                    handler(val, olVal) {
                        let value = Number(val) >= 0 ? Number(val) : 0;
                        let newQuarterList = {};
                        if(Number(value) > 0){
                            let quarterList = Object.assign({}, this.set.quarter_list);
                            for(value;value > 0;value--){
                                let currentQuarter = quarterList[value] || {};
                                if(Object.values(currentQuarter).length <= 0){
                                    // 当前季度信息不存在
                                    newQuarterList[value] = {
                                        total_month: 0,// 本季度总多少月
                                        is_repurchase: 0,// 是否需要复购
                                        repurchase_money: 0,// 复购支付金额
                                        month_list: {},// 每月返利金额
                                    };
                                }else{
                                    // 当前季度信息存在
                                    newQuarterList[value] = currentQuarter;
                                }
                            }
                        }

                        this.$set(this.set, 'quarter_list', newQuarterList)
                        this.$forceUpdate();
                    },
                    deep:true
                },
                // 月度信息变更
                countTotalMonth:{
                    handler(val, olVal) {
                        if(Number(val) !== Number(olVal)){
                            let set = Object.assign({}, this.set);
                            let quarterList = Object.assign({}, set.quarter_list);
                            // 循环处理每个季度
                            for(const index in quarterList){
                                let currentMonthInfo = quarterList[index] || {};
                                let totalMonth = Number(currentMonthInfo.total_month) || 0;
                                let monthList = currentMonthInfo.month_list || {};
                                let newMonthList = {};
                                if(totalMonth > 0){
                                    for(totalMonth;totalMonth > 0;totalMonth--){
                                        let currentMonth = monthList[totalMonth] || '';
                                        newMonthList[totalMonth] = currentMonth || '';
                                    }
                                }

                                quarterList[index].month_list = newMonthList;
                            }

                            this.$set(this.set, 'quarter_list', quarterList)
                            this.$forceUpdate();
                        }
                    },
                    deep:true
                },
            },
            created() {},
            mounted() {},
            methods: {
                // 提交
                onSubmit() {
                    let _this = this;
                    _this.$http.post('{!! yzWebFullUrl('plugin.rebate.admin.index.set') !!}', {
                        rebate: _this.set
                    }).then(function (response) {
                        let res = response.body;
                        _this.$message({
                            message: res.msg,
                            type:  res.result == 1 ? 'success' : 'error'
                        });
                    });
                },


            },
        })
    </script>
@endsection