@extends('layouts.base')
@section('title', '佣金冻结设置')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <style>
        .vue-head{
            max-width: 900px!important;
        }
        .form-item_tips {
            margin-top:8px;
            line-height:26px;
            color: #b5b5b5;
            font-size: 13px;
        }
        .el-autocomplete{
            display: block;
        }
        .lv-set-content{
            width: 100% !important;
            display: inline-flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .lv-set-content .lv-set-box{
            width: calc((100% - 20px) / 3) !important;
            margin-bottom: 10px;
            margin-right: 10px;
        }
        .lv-set-content .lv-set-box:nth-child(3n){
            margin-right: 0px!important;
        }
    </style>
    <div class="all" id="app">
        <el-form :model="set" label-width="170px">
            <div class="vue-head">
                <div v-for="(item,index) in set" :key="index">
                    <div class="vue-main-title">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content">[[ item.title ]] - 佣金冻结设置</div>
                    </div>
                    <div class="vue-main-form">
                        <el-form-item label="冻结金额类型">
                            <div style="line-height:40px">
                                <el-radio v-model.number="set[index].set_info.freeze_type" :label="0">统一设置</el-radio>
                                <el-radio v-model.number="set[index].set_info.freeze_type" :label="1">独立设置</el-radio>
                            </div>
                        </el-form-item>
                        <el-form-item v-if="item.set_info.freeze_type != 1" label="总冻结金额">
                            <el-input type="number" placeholder="请输入总冻结金额" v-model.number="set[index].set_info.total" step="0.01"></el-input>
                        </el-form-item>
                        <el-form-item v-else label="独立设置">
                            <div class="lv-set-content">
                                <div class="lv-set-box" v-for="(lvItem,lvIndex) in item.set_info.level_list" :key="lvIndex">
                                    <el-input  type="number" v-model.number="set[index].set_info.level_list[lvIndex].freeze_money" step="0.01">
                                        <template slot="prepend">[[ lvItem.level_name ]]</template>
                                    </el-input>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                </div>
                {{--保存按钮--}}
                <el-form-item>
                    <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
    <script>
        new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    set: JSON.parse('{!! json_encode($set_income_list) !!}') || {},
                    member_id: "{{ $member_id }}",
                }
            },
            created() {},
            mounted() {},
            methods: {
                // 提交
                onSubmit() {
                    let _this = this;
                    _this.$http.post('{!! yzWebFullUrl('member.member-income.incomeFreezeSet') !!}', {
                        set_income_list: _this.set,
                        member_id: _this.member_id
                    }).then(function (response) {
                        let res = response.body;
                        _this.$message({
                            message: res.msg,
                            type:  res.result == 1 ? 'success' : 'error'
                        });
                    });
                },
            },
        })
    </script>
@endsection