@extends('layouts.base')
@section('title', trans('基础设置'))
@section('content')
    <style>
        .input{
            width: 700px;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 0 15px;
            line-height: 40px;
            font-size: 14px;
            color: #000;
            outline: none;
            overflow: hidden;
            white-space: nowrap;
            display: block;
        }
        .input:empty::before{
            color:#ADADAD;
            content:attr(placeholder);
            font-size: 14px;
        }
        .input:focus{
            border-color: #409eff;
        }
    </style>
    <div class="w1200 m0a">
        <div class="main">
            <form id="baseform" method="post" class="form-horizontal form">
                <div class="rightlist">
                    <div class="right-titpos">
                        <ul class="add-snav">
                            <li class="active">基础设置</li>
                        </ul>
                    </div>
                    <div class="panel panel-default">
                        <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-9 col-xs-12">
                                    <label class="radio-inline">
                                        <input type="radio" name="form_data[is_open]" value="0"
                                               @if($set['is_open'] == 0) checked="checked" @endif /> 否</label>
                                    <label class="radio-inline">
                                        <input type="radio" name="form_data[is_open]" value="1"
                                               @if($set['is_open'] == 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" na  me="form_data[diy_title]">
                                    <input type="hidden" name="list" value="{{$set['diy_title_list']}}">
                                    <input type="hidden" name="form_data[diy_title]" value="@if($set['diy_title']){{$set['diy_title']}}@else分享会员昵称向您分享优惠券名称(分享张数张)@endif">
                                    <div id="title"  class="input" contenteditable oninput="change(this)" >

                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-xs-12 col-sm-3 col-md-2 control-label"></div>
                                <div class="col-sm-9" >
                                    <a href='JavaScript:' onclick="addvar(this)" style="color:#30cac9">分享会员昵称</a>
                                    <a href='JavaScript:' onclick="addvar(this)" style="color:#30cac9;margin-left:10px;">优惠券名称</a>
                                    <a href='JavaScript:' onclick="addvar(this)" style="color:#30cac9;margin-left:10px;">分享张数</a>
                                </div>
                            </div>
                        </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="submit" name="submit" value="保存设置" class="btn btn-primary"
                                   data-original-title="" title="">
                            <input type="hidden" name="token" value="{$_W['token']}">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        $(document).ready(function(){
            let val = $("input[name='list']").val()
            if(val=='[]'){
                let html="<span contenteditable='false' style='color:#30cac9'>分享会员昵称</span>"
                html+="向您分享"
                html+="<span contenteditable='false' style='color:#30cac9'>优惠券名称</span>"
                html+="("
                html+="<span contenteditable='false' style='color:#30cac9'>分享张数</span>"
                html+="张)"
                $("#title").append(html)
            }else{
                let list = JSON.parse(val)
                for (let i = 0; i < list.length; i++) {
                    if(list[i]['type']=='string'){
                        $("#title").append(list[i]['value'])
                    }else{
                        $("#title").append("<span contenteditable='false' style='color:#30cac9'>"+list[i]['value']+"</span>")
                    }
                }
            }

        })
        function addvar(obj){
            $("#title").append("<span contenteditable='false' style='color:#30cac9'>"+$(obj).text()+"</span>")
            var title= $("input[name='form_data[diy_title]']").val()
            $("input[name='form_data[diy_title]']").val(title+$(obj).text())
        }
        function change(obj){
            $("input[name='form_data[diy_title]']").val($(obj).text())
        }

    </script>
@endsection