<style>
    @media screen and (max-width: 500px) {
        .link-items{
            flex-wrap: wrap;
        }
        .link-items>a{
            margin:10px 0;
            width: 100%;
            box-sizing: border-box;
        }
    }
</style>
<section class="admin-main">
    <div class="container-fluid">
        <div class="page-container">
            <div class="card">
                <div class="card-body">
                    <!-- class="col-lg-1 col-md-12 col-sm-12" -->
                    <div class="card-title row">
                        <div class="pl-4 pr-4">{$Title}</div>
                        <div class="col-lg-8 col-md-12 col-sm-12">
                            {foreach $PluginsAdminMenu as $v}
                                {if $v['custom']}
                                    <span  class="ml-2"><a  class="h5" href="{$v.url}" target="_blank">{$v.name}</a></span>
                                {else/}
                                    <span  class="ml-2"> <a  class="h5" href="{$v.url}">{$v.name}</a></span>
                                {/if}
                            {/foreach}
                        </div>
                    </div>

                    <div class="tab-content mt-4">

                        <div class="table-tools">
                            <a href="javascript:;" class="btn btn-success w-sm nohide add-activity">
                                <i class="fas fa-plus-circle"></i> 添加销售地区
                            </a>
                            <input type="text" name="v-menu-name" class="form-control" placeholder="" value="{$gzhx_domain_rebet}">
                            <button type="button" class="btn btn-primary w-xs set-menu-name"><i class="fas fa-cogs"></i> 官方折扣模式设置</button>
                            <a href="javascript:;" class="btn btn-success w-sm nohide btn-update-products">
                                <i class="fas fa-plus-circle"></i> 批量同步机器到本地
                            </a>

                        </div>

                        <div style="height: 30px;line-height: 30px;">计费说明：官方给你的折扣价格+（官方价格-官方给你的折扣价格）x上方折扣/100,如官方价格 100，你的折扣价格 70，设定折扣 80，最终价格为：70+(100-70)*80/100=94</div>
                        <div id="renewMsg" style="color: #ff0000;height: 30px;line-height: 30px;"></div>
                        <div class="table-body auto-login-content" style="margin-top: 10px;">
                            <table class="table table-bordered table-hover activity-table">
                                <thead class="thead-light">
                                <tr>

                                    <th class="center t1" data-name="id" data-type="text" data-readonly="readonly">ID </th>
                                    <th data-name="name" data-type="select">地址</th>
                                    <th data-type="select" data-name="config_option1" data-list="手动开通" style="width: 150px;">开通方式</th>
                                    <th>机器数量</th>
                                    <th data-name="retired">上架<span style="display: none"><div class="custom-control custom-switch" dir="ltr">
                                                <input type="checkbox" data-switch class="custom-control-input" id="customSwitchsizemd@{id}" data-id="@{id}" name="retired" @{status}>
                                                <label class="custom-control-label" for="customSwitchsizemd@{id}"></label>
                                            </div></span></th>

                                    <th data-type="set" class="center t5">操作<span style="display: none;">
                                            <a href="javascript:;" class="btn btn-link get-md5 edit"><i class="fas fa-edit"></i> 编辑</a>
                                       </span></th>
                                </tr>
                                </thead>
                                <tbody>
                                {foreach $list as $key=>$item}
                                    <tr data-data='{$item|json_encode}'>
                                        <td class="center">{$item.id}</td>

                                        <td>{$item.name}</td>
                                        <td>{$item.config_option1}</td>
                                        <td>{$item.TotalCount}</td>
                                        <td><div class="custom-control custom-switch" dir="ltr">
                                                <input type="checkbox" data-switch class="custom-control-input" id="customSwitchsizemd{$item.id}" data-id="{$item.id}" name="status"  {eq name="item.retired" value="0"}checked{/eq}>
                                                <label class="custom-control-label" for="customSwitchsizemd{$item.id}"></label>
                                            </div></td>
                                        <td>
                                            <a href="javascript:;" class="btn btn-link get-md5 edit"><i class="fas fa-edit"></i> 编辑</a>

                                        </td>
                                    </tr>
                                {/foreach}
                                </tbody>
                            </table>
                        </div>

                        <div class="table-body">文档说明：<a href="https://html5code.org/type/zjmf.html" target="_blank">https://html5code.org/type/zjmf.html</a> </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    let ProductGroups={$Groups|json_encode};
    let config_option2={$config_option2|json_encode};
    let RegionSet={$RegionSet|json_encode};
    $(function () {
        let queryToJson=function (hash){
            let str=hash?window.location.hash:window.location.search
            if( !str ) return { };
            if(str) str=str.substr(1);
            if( !str ) return { };
            let arr = str.split('&');
            let data={ };
            $.each( arr, function (k,v) {

                if(v.indexOf("=")>-1){
                    let d=v.indexOf("=");
                    data[ decodeURIComponent(v.substr(0,d)) ]=decodeURIComponent(v.substr(d+1));

                }

            } );
            return data;
        }
        let jsonToQuery=function (json){
            return  Object.keys(json).map(function (key) {
                return json[key]? (key + "=" + encodeURIComponent(json[key])):"";
            }).join("&");
        }
        let ajax=function (option){
            $.ajax({
                    dataType: "json",
                    type: option.type||"post",

                    headers: {
                        "X-Requested-With": "XMLHttpRequest",

                    },
                    url: option.url||"",
                    data:option.data,
                    async:true,
                    success: function (t) {



                        if( t.status==1 ){
                            if(option.success)  option.success(t.info);
                        }else{
                            if(option.error){
                                option.error(t.info)
                            }else{
                                $('#renewMsg').html(t.info);
                            }
                        }
                    },

                    error: function (request, status, errorThrown) {
                        if(option.error){ option.error("网络错误，请重试") }else{
                            $('#renewMsg').html("网络错误，请重试");
                        }
                    }
                }
            );
        }

        $('.set-menu-name').off("click").on("click",function (){
            let val=$('input[name="v-menu-name"]').val();
            if(!val){
                $('input[name="v-menu-name"]').css({
                    borderColor:'#ff0000'
                });
                return false;
            }
            $('input[name="v-menu-name"]').css({
                borderColor:'#000000'
            });
            ajax({
                data:{
                    action:'setmenu',
                    name:val
                },success:function (res){
                    $('#renewMsg').html(res);
                }
            })
        })

        let _setTable=function (table,val){

            let setVal=function (dom,item){
                let type=dom.attr('data-type'),name=dom.attr('data-name');
                if(!type){
                    return '<td>-</td>'
                }else if(type=='text'){

                    return '<td data-item="'+item+'"><input type="text"  class="form-control" name="'+name+'" value="'+(val&&val[name]?val[name]:'')+'" '+(dom.attr('data-readonly')?dom.attr('data-readonly'):'')+' placeholder="'+(val&&dom.attr('data-placeholder')?dom.attr('data-placeholder'):'')+'"></td>'
                }else if(type=='select'){
                    let s='<select class="form-control" name="'+name+'">';
                    if(name=="name"){
                        $.each(RegionSet,function (k,v){
                            if(!val){
                                if(!config_option2.hasOwnProperty(k)){
                                    s +='<option value="'+k+'" '+(val&&val[name]&&val[name]==k?'selected':'')+'>'+v+'</option>';
                                }
                            }else{
                                if(k==val.config_option2){
                                    s +='<option value="'+k+'" '+(val&&val[name]&&val[name]==k?'selected':'')+'>'+v+'</option>';
                                }
                            }


                        })
                    }else{
                        $.each( dom.attr('data-list').split(','),function (k,v){

                            s +='<option value="'+v+'" '+(val&&val[name]&&val[name]==v?'selected':'')+'>'+v+'</option>';
                        } )
                    }

                    s +='</select>';
                    return '<td data-item="'+item+'">'+s+'</td>'
                }else if(type=='set'){
                    return '<td><a href="javascript:;" class="add"><i class="fas fa-check"></i> 保存</a> <a href="javascript:;" class="exit" style="margin-left: 10px;color: #ff0000!important;"><i class="fas fa-times"></i> 取消</a></td>'
                }else if(type=='date'){
                    return '<td data-item="'+item+'"><input type="text"  class="form-control v-input-date" name="'+name+'" value="'+(val&&val[name]?val[name]:'')+'" autocomplete="off"></td>'
                }
            }
            let html='';
            table.each(function (item){

                html +=setVal($(this),item);
            });
            return html;
        }
        let replaceHtml=function (tmp,val){
            let reg = /@\{(.+?)\}/g;
            let res = tmp.match(reg);
            if(res){
                $.each(res,function (k,v){
                    let id=v.replace(/\@{(.+?)\}/,"$1");
                    tmp=tmp.replace(v,val[ id ]);
                })
            }
            return tmp;


        }
        let _setHtml=function (table,data){
            let html='';
            table.each(function (item){
                let name=$(this).attr('data-name');
                if(name&&data.hasOwnProperty(name)){
                    if($(this).find('span').length>0){
                        if(name=="retired"&&data.hasOwnProperty('retired')&&data.retired.toString()=='0'){
                            data.status="checked";
                        }else{
                            data.status="";
                        }

                        html +='<td data-name="'+name+'">'+replaceHtml($(this).find('span').html(),data)+'</td>';
                    }else{
                        html +='<td data-name="'+name+'">'+data[name]+'</td>';
                    }

                }else{
                    if($(this).find('span').length>0){
                        html +='<td>'+replaceHtml($(this).find('span').html(),data)+'</td>';
                    }else{
                        html +='<td></td>';
                    }

                }
            });


            return html;
        },_save=function (table,object,callback){
            ajax({
                data:{
                    action:table,
                    data:object,
                    RegionSet:RegionSet
                },
                success:function (res){

                    if(!config_option2.hasOwnProperty(res.config_option2)){
                        config_option2[res.config_option2]=res;
                    }

                    callback(res);
                }
            })
        }

        let _prizesetting=function (){

            $('.activity-table>tbody [data-switch]').off('change').on('change', function () {
                let checked=$(this).prop('checked'),id=$(this).data('id'),self=$(this);
                ajax({
                    data:{
                        action:'status',
                        id:id,
                        status:checked?0:1
                    },
                    success:function (res){
                        $('#renewMsg').html(res);
                    },error:function (res){
                        $('#renewMsg').html(res);
                        self.prop('checked',!checked)
                    }
                })
            });


            $('.add-activity').off('click').on('click',function (){
                $('.activity-table>tbody').append('<tr data-add>'+(_setTable($('.activity-table>thead>tr>th')))+'</tr>');
                $('input.v-input-date').datetimepicker({
                    minView: "month", //选择日期后，不会再跳转去选择时分秒
                    language:  'zh-CN',
                    format: 'yyyy-mm-dd',
                    todayBtn:  1,
                    autoclose: 1,
                });
                $('.activity-table>tbody>tr[data-add] .exit').off("click").on("click",function (){
                    $(this).closest('tr').remove();
                })
                $('.activity-table>tbody>tr[data-add] .add').off("click").on("click",function (){
                    let self=$(this),object={ };
                    $(this).closest('tr').children('td[data-item]').each(function (){
                        let s=$(this).children('[name]')
                        object[ s.attr('name')  ]=s.val();
                    })
                    _save('prizesetting',object,function (res){
                        self.closest('tr').remove();
                        $('.activity-table>tbody').append('<tr data-data=\''+JSON.stringify(res)+'\'>'+(_setHtml($('.activity-table>thead>tr>th'),res))+'</tr>');
                        _prizesetting();
                    });
                })




            })
            $('.activity-table>tbody .edit').off('click').on('click',function (){

                let tr=$(this).closest('tr'),object=JSON.parse(tr.attr("data-data"));

                tr.hide().after( '<tr data-edit>'+(_setTable($('.activity-table>thead>tr>th'),object))+'</tr>' );
                $('input.v-input-date').datetimepicker({
                    minView: "month", //选择日期后，不会再跳转去选择时分秒
                    language:  'zh-CN',
                    format: 'yyyy-mm-dd',
                    todayBtn:  1,
                    autoclose: 1,
                });
                $('.activity-table>tbody>tr[data-edit] .exit').off("click").on("click",function (){
                    $(this).closest('tr').prev('tr').show();
                    $(this).closest('tr').remove();

                })
                $('.activity-table>tbody>tr[data-edit] .add').off("click").on("click",function (){
                    let self=$(this),object={ };
                    $(this).closest('tr').children('td[data-item]').each(function (){
                        let s=$(this).children('[name]')
                        object[ s.attr('name')  ]=s.val();
                    })
                    _save('prizesetting',object,function (res){
                        res.password="";
                        self.closest('tr').prev('tr').attr('data-data',JSON.stringify(res)).show().html(_setHtml($('.activity-table>thead>tr>th'),res));;

                        self.closest('tr').remove();
                        _prizesetting();
                    });
                })
            })
        }
        _prizesetting();
        let _getProduct=function (page,info,callback){
            let maxpage=Math.ceil(info.TotalCount/100);
            if(page>maxpage){
                callback();
                return false;
            }
            $('.btn-update-products').html('正在同步'+info.name+'第'+page+'页');
            ajax({
                data:{
                    action:'product',
                    page:page,
                    id:info.config_option2
                },
                error:function (){
                    setTimeout(function (){
                        page++;
                        _getProduct(page,info,callback);
                    },300)
                },success:function (){
                    setTimeout(function (){
                        page++;
                        _getProduct(page,info,callback);
                    },300)
                }
            })
        }
        let _updateProducts=function (i){
            let dom=$('tr[data-data]'),max=dom.length;
            console.log(i,max);
            if(i>=max){
                $('.btn-update-products').html('<i class="fas fa-check"></i> 同步完成');
                return false;
            }
            let info=$('tr[data-data]:eq('+i+')').data('data'),count=info.TotalCount;
            if(count>0){

                _getProduct(1,info,function (){
                    setTimeout(function (){
                        i++;
                        _updateProducts(i);
                    },300)
                });
            }else{
                i++;
                _updateProducts(i);
            }

        }
        $('.btn-update-products').off('click').on('click',function (){
            _updateProducts(0);
        })
    })
</script>