@extends('layouts.base')

@section('content')
    <style>
        .commission{
            width: 1100px;
        }
        .commission .commission-box{
            width: 100%;
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            border-bottom: 1px solid #CCCCCC;
            padding: 20px 0;
        }
        .commission .commission-box:first-child{
            padding: 0!important;
        }
        .commission .commission-box:last-child{
            border-bottom: none!important;
        }
        .commission .commission-box .level-title{
            width: 220px;
            text-align: center;
            font-size: 15px;
            border-right: 1px solid #ccc;
            height: 130px;
            line-height: 130px;
        }
        .commission .commission-box:first-child .level-title{
            font-weight: bold;
            height: 35px;
            line-height: 35px;
            border-right: none!important;
        }
        .commission .commission-box .commission-line-content{
            width: 880px;
        }
        .commission .commission-box .commission-line{
            width: 880px;
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 15px;
        }
        .commission .commission-box .commission-line:last-child{
            margin-bottom: 0!important;
        }
        .commission .commission-box:first-child .commission-line{
            font-weight: bold;
            height: 35px;
            line-height: 35px;
            margin-bottom: 0px!important;
        }
        .commission .commission-box .commission-line .line-cells{
            width: 220px;
            text-align: center;
        }
        .hide{
            display: none;
        }
        .el-pagination{
            margin-top: 20px;
            text-align: right!important;
        }
    </style>
    <div class="w1200 m0a">
        <div class="rightlist" id="app">
            {{--设置表单--}}
            <form action="" method="post" class="form-horizontal form" enctype="multipart/form-data">
                <div class='panel panel-default form-horizontal form'>
                    {{--设置内容--}}
                    <el-tabs value="base_set">
                        <el-tab-pane label="基础设置" name="base_set">
                            <div class='panel-body'>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">结算方式</label>
                                    <div class="col-sm-4 col-xs-6">
                                        <label class="radio-inline">
                                            <input type="radio" name="weigh_value[settlement_method]" value="0" @if ($set['settlement_method'] != 1) checked="checked" @endif /> 手动结算
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="weigh_value[settlement_method]" value="1" @if ($set['settlement_method'] == 1) checked="checked" @endif /> 自动结算
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="佣金设置" name="commission_set">
                            <div class='panel-body'>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">结算类型</label>
                                    <div class="col-sm-4 col-xs-6">
                                        <label class="radio-inline">
                                            <input type="radio"
                                                   name="weigh_value[commission][is_independent_settlement]"
                                                   value="0" @if ($set['commission']['is_independent_settlement'] != 1) checked="checked" @endif
                                            /> 一次性全部结算
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio"
                                                   name="weigh_value[commission][is_independent_settlement]"
                                                   value="1" @if ($set['commission']['is_independent_settlement'] == 1) checked="checked" @endif
                                            /> 分期结算
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">平级奖(百分比)</label>
                                    <div class="col-sm-9 col-xs-12">
                                        <input type='number'
                                               step="0.01"
                                               min="0.01"
                                               max="100"
                                               name='weigh_value[commission][flat_ratio]'
                                               class="form-control"
                                               value="{{$set['commission']['flat_ratio']}}"
                                        />
                                        <span class='help-block'>值必须为0.01-100；为空则无平级奖。</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">结算延迟天数</label>
                                    <div class="col-sm-9 col-xs-12">
                                        <input type='number'
                                               name='weigh_value[commission][independent_delay_day]'
                                               class="form-control"
                                               value="{{$set['commission']['independent_delay_day']}}"
                                        />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">经销商佣金设置</label>
                                    <div class="col-sm-9 col-xs-10">
                                        <div class="commission">
                                            <div class="commission-box">
                                                <div class="level-title">经销商等级</div>
                                                <div class="commission-line">
                                                    <div class="line-cells">商品规格</div>
                                                    <div class="line-cells">首次返佣</div>
                                                    <div class="line-cells">每期返佣</div>
                                                    <div class="line-cells">分期数量</div>
                                                </div>
                                            </div>
                                            @foreach($level as $levelItem => $levelValue)
                                                <div class="commission-box">
                                                    {{--经销商等级--}}
                                                    <div class="level-title">{{$levelValue['level_name']}}</div>
                                                    {{--规格及佣金设置--}}
                                                    <div class="commission-line-content">
                                                        @foreach($goods_label as $goodsLabelItem => $goodsLabelValue)
                                                            <div class="commission-line">
                                                                <div class="line-cells">{{$goodsLabelValue}}</div>
                                                                <div class="line-cells">
                                                                    <input type="number"
                                                                           step="0.01"
                                                                           class="form-control"
                                                                           placeholder="请输入首次返佣金额"
                                                                           value="{{$set['commission'][$levelValue['id']][$goodsLabelValue]['independent_first_money']}}"
                                                                           name="weigh_value[commission][{{$levelValue['id']}}][{{$goodsLabelValue}}][independent_first_money]"
                                                                    />
                                                                </div>
                                                                <div class="line-cells">
                                                                    <input type="number"
                                                                           step="0.01"
                                                                           class="form-control"
                                                                           placeholder="请输入每期返佣金额"
                                                                           value="{{$set['commission'][$levelValue['id']][$goodsLabelValue]['independent_cycle_money']}}"
                                                                           name="weigh_value[commission][{{$levelValue['id']}}][{{$goodsLabelValue}}][independent_cycle_money]"
                                                                    />
                                                                </div>
                                                                <div class="line-cells">
                                                                    <input type="number"
                                                                           class="form-control"
                                                                           placeholder="请输入分期数量"
                                                                           value="{{$set['commission'][$levelValue['id']][$goodsLabelValue]['independent_cycle_number']}}"
                                                                           name="weigh_value[commission][{{$levelValue['id']}}][{{$goodsLabelValue}}][independent_cycle_number]"
                                                                    />
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="区域提成结算" name="area_set">
                            {{--计算金额--}}
                            <div class="form-group">
                                <label class="col-xs-12  col-md-2 control-label">计算金额</label>
                                <div class="col-sm-9 col-xs-12">
                                    <div class="input-group">
                                        <div class="input-group">
                                            <div class="input-group-addon">G10</div>
                                            <input type="number" step="0.01" name='weigh_value[money][g10]' class="form-control" value="{{$set['money']['g10']}}"/>
                                            <div class="input-group-addon">元</div>
                                            <div class="input-group-addon">G15</div>
                                            <input type="number" step="0.01" name='weigh_value[money][g15]' class="form-control" value="{{$set['money']['g15']}}"/>
                                            <div class="input-group-addon">元</div>
                                            <div class="input-group-addon">G20</div>
                                            <input type="number" step="0.01" name='weigh_value[money][g20]' class="form-control" value="{{$set['money']['g20']}}"/>
                                            <div class="input-group-addon">元</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{--默认比例--}}
                            <div class="form-group">
                                <label class="col-xs-12  col-md-2 control-label">默认比例</label>
                                <div class="col-sm-9 col-xs-12">
                                    <div class="input-group">
                                        <div class="input-group">
                                            <div class="input-group-addon">省</div>
                                            <input type="number" step="0.01" name='weigh_value[area][default_province]' class="form-control" value="{{$set['area']['default_province']}}"/>
                                            <div class="input-group-addon">%</div>
                                            <div class="input-group-addon">市</div>
                                            <input type="number" step="0.01" name='weigh_value[area][default_city]' class="form-control" value="{{$set['area']['default_city']}}"/>
                                            <div class="input-group-addon">%</div>
                                            <div class="input-group-addon">区</div>
                                            <input type="number" step="0.01" name='weigh_value[area][default_district]' class="form-control" value="{{$set['area']['default_district']}}"/>
                                            <div class="input-group-addon">%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{--独立比例--}}
                            <div class="form-group">
                                <label class="col-xs-12  col-md-2 control-label">独立规则</label>
                                <div class="col-sm-9 col-xs-12">
                                    {{--添加按钮--}}
                                    <div class="input-group">
                                        <el-button type="primary" icon="el-icon-plus" @click="areaSelectShow = true">添加地区</el-button>
                                    </div>
                                    {{--独立规则列表--}}
                                    <el-table :data="config_list" style="width:100%">
                                        <el-table-column prop="id" align="center" label="ID" width="50"></el-table-column>
                                        <el-table-column prop="address_text" align="center" label="地区"></el-table-column>
                                        <el-table-column prop="ratio" align="center" label="提成比例"></el-table-column>
                                        <el-table-column prop="created_at" align="center" label="添加时间"></el-table-column>
                                        <el-table-column label="操作">
                                            <template slot-scope="scope">
                                                <el-button size="mini" @click="editInfo(scope.row)">编辑</el-button>
                                                <el-button size="mini" type="danger" @click="delSelfConfigInfo(scope.row.id)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-pagination
                                            background
                                            layout="prev, pager, next"
                                            :page-count="config_total_page"
                                            :current-page="config_page"
                                            @current-change="paging"
                                    ></el-pagination>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    {{--提交按钮--}}
                    <div class="form-group"></div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 col-md-2 control-label"></label>
                        <div class="col-sm-9 col-xs-12">
                            <input type="submit" name="submit" value="保存" class="btn btn-primary col-lg-1"/>
                        </div>
                    </div>
                </div>
            </form>
            {{--地区选择器--}}
            <el-dialog title="添加地区" :visible.sync="areaSelectShow" :close-on-click-modal="false"  @close="closeAddDialog">
                <el-form :model="areaInfo">
                    <el-form-item v-if="Object.keys(province_list).length > 0" label="省" :label-width="areaSelectShowLabelWidth">
                        <el-select v-model="areaInfo.province_id" @change="getArea($event,'city')" placeholder="请选择省">
                            <el-option v-for="(item,index) in province_list" :key="index" :label="item.areaname" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="Object.keys(city_list).length > 0" label="市" :label-width="areaSelectShowLabelWidth">
                        <el-select v-model="areaInfo.city_id" @change="getArea($event,'district')" placeholder="请选择市">
                            <el-option v-for="(item,index) in city_list" :key="index" :label="item.areaname" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="Object.keys(district_list).length > 0" label="区" :label-width="areaSelectShowLabelWidth">
                        <el-select v-model="areaInfo.district_id" placeholder="请选择区">
                            <el-option v-for="(item,index) in district_list" :key="index" :label="item.areaname" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="提成比例" :label-width="areaSelectShowLabelWidth">
                        <el-input v-model="areaInfo.ratio" max="100" min="0"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="areaSelectShow = false">取 消</el-button>
                    <el-button type="primary" @click="confirmAdd">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data(){
                return {
                    config_list: [],
                    config_page: 1,
                    config_total_page: 1,
                    areaSelectShow: false,
                    areaSelectShowLabelWidth: '120px',
                    areaInfo: {
                        id: 0,
                        province_id: '',// 省id
                        city_id: '',// 市id
                        district_id: '',// 区id
                        ratio: 0,
                    },
                    province_list: [],// 省
                    city_list: [],// 市
                    district_list: [],// 区
                }
            },
            mounted () {
                this.getArea();
                this.getAreaSetList();
            },
            methods: {
                // 获取信息列表
                getAreaSetList(){
                    const loading = this.selfLoading();
                    let _this = this;
                    $.ajax({
                        url: "{!! yzWebUrl('plugin.weight-value.admin.AreaSet.getList') !!}",
                        data:{
                            page: _this.config_page,
                        },
                        success: function (result) {
                            if(result.result){
                                let data = result.data;
                                _this.config_list = data.data;
                                _this.config_total_page = data.last_page;
                            }

                            loading.close();
                        },
                        error:function (error) {
                            loading.close();
                            console.log("失败：",error);
                        }
                    })
                },
                // 数据分页
                paging(val){
                    this.config_page = val;
                    this.getAreaSetList();
                },
                // 获取地址
                getArea(parentid = '',type = 'province',is_init = true){
                    const loading = this.selfLoading();
                    let _this = this;
                    $.ajax({
                        url: "{!! yzWebUrl('address.get-address') !!}",
                        data:{
                            type: type,
                            parentid: parentid
                        },
                        cache: false,
                        success: function (result) {
                            if(type === 'province') {
                                _this.province_list = JSON.parse(result);
                                if(is_init){
                                    _this.city_list = _this.district_list = [];
                                    _this.areaInfo = {
                                        province_id: '',
                                        city_id: '',
                                        district_id: '',
                                    };
                                }
                            }
                            else if(type === 'city') {
                                _this.city_list = JSON.parse(result);
                                if(is_init){
                                    _this.district_list = [];
                                    _this.areaInfo.city_id = '';
                                    _this.areaInfo.district_id = '';
                                }
                            }
                            else if(type === 'district') {
                                _this.district_list = JSON.parse(result);
                                if(is_init) _this.areaInfo.district_id = '';
                            }

                            loading.close();
                        },
                        error:function (error) {
                            loading.close();
                            console.log("地区获取失败：",error);
                        }
                    })
                },
                // 提交 添加信息|修改信息
                confirmAdd(){
                    let _this = this;
                    let areaInfo = _this.areaInfo;
                    // 信息验证
                    let defaultRule = [
                        {name: 'province_id', checkType: 'required', errorMsg: '请选择省'},
                        {name: 'ratio', checkType: 'required', errorMsg: '请输入独立提成比例'},
                        {name: 'ratio', checkType: 'between', errorMsg: '独立提成比例必须在1 ~ 100之间',checkRule: "0,100"},
                    ];
                    let result = util.validate(areaInfo,defaultRule);
                    if(result !== true){
                        _this.$alert(result);
                        return false;
                    }
                    // 信息提交
                    areaInfo.province_name = areaInfo.province_id > 0 ? _this.getAreaDesc(_this.province_list,areaInfo.province_id,'areaname') : '';
                    areaInfo.city_name = areaInfo.city_id > 0 ? _this.getAreaDesc(_this.city_list,areaInfo.city_id,'areaname') : '';
                    areaInfo.district_name = areaInfo.district_id > 0 ? _this.getAreaDesc(_this.district_list,areaInfo.district_id,'areaname') : '';
                    const loading = this.selfLoading();
                    $.ajax({
                        url: "{!! yzWebUrl('plugin.weight-value.admin.AreaSet.editInfo') !!}",
                        data: areaInfo,
                        cache: false,
                        success: function (result) {
                            loading.close();
                            _this.$alert(result.msg);

                            // 操作成功  关闭并且刷新
                            if(parseInt(result.result) === 1) {
                                _this.getAreaSetList();
                                _this.areaSelectShow = false;
                            }
                        },
                        error:function (error) {
                            loading.close();
                            console.log("失败：",error);
                        }
                    })
                },
                // 循环获取对应地区的信息
                getAreaDesc(list,id,key = ''){
                    let info = {};
                    Object.values(list).some(function(res){
                        if(parseInt(res.id) === parseInt(id)){
                            info = res;
                            return true;
                        }
                    });

                    return key ? info[key] : info;
                },
                // 关闭添加弹框后  初始化部分内容
                closeAddDialog(){
                    // 初始化内容
                    let _this = this;
                    _this.city_list = _this.district_list = [];
                    _this.areaInfo = {
                        province_id: '',
                        city_id: '',
                        district_id: '',
                    };
                },
                // 点击删除当前独立规则
                delSelfConfigInfo(id){
                    let _this = this;
                    _this.$confirm('是否确认删除当前地区独立规则？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 请求删除
                        const loading = this.selfLoading();
                        $.ajax({
                            url: "{!! yzWebUrl('plugin.weight-value.admin.AreaSet.delInfo') !!}",
                            data: {
                                id: id
                            },
                            success: function (result) {
                                loading.close();
                                _this.$alert(result.msg).then(() => {
                                    _this.getAreaSetList();
                                });
                            },
                            error:function (error) {
                                loading.close();
                                console.log("失败：",error);
                            }
                        })
                    }).catch(()=>{});
                },
                // 公共加载动画
                selfLoading(){
                    return this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                },
                // 编辑信息
                editInfo(info){
                    let _this = this;
                    _this.areaInfo = Object.assign({},info);
                    _this.getArea(info.province_id,'city',!info.city_id > 0);
                    _this.getArea(info.city_id,'district',!info.district_id > 0);
                    _this.areaSelectShow = true;
                },



            },
        })
    </script>
@endsection