@extends('admin/site/side_layout')
@section('header_extend')

    <link rel="stylesheet" href="{{asset('js/plugins/zTree_v3-master/css/zTreeStyle/zTreeStyle.css')}}">

    <style type="text/css">
        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle
        }

        .ztree li span.button.reset {
            margin-right: 2px;
            background-position: -110px -48px;
            vertical-align: top;
            *vertical-align: middle
        }

        /* 喜欢的颜色 */
        .radio-label,
        .radio-check {
            display: inline-block;
            position: relative;
        }

        .radio-label input[type="checkbox"] {
            appearance: none; /*清楚默认样式*/
            -webkit-appearance: none;
            /* opacity: 0; */
            outline: none;
            position: absolute;
            z-index: 2;
            width: 6px;
            height: 6px;
            top: 10px;
            left: 10px;
            border-radius: 50%;
            background: #b4b4b4;
        }

        .radio-label label {
            display: inline-block;
            min-width: 50px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            padding-right: 10px;
            border-radius: 5px;
            padding-left: 25px;
            color: #fff;
            background-color: #c9c9c9;
        }

        .radio-label input[type="checkbox"]:checked {
            opacity: 0;
        }

        .radio-label input[type="checkbox"]:checked + label {
            color: #fff;
            background-color: #3597db;
        }

        .radio-label input[type="checkbox"]:checked + label::after {
            content: "";
            position: absolute;
            left: 12px;
            top: 5px;
            width: 5px;
            height: 12px;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            transform: rotate(45deg);
        }

    </style>
@endsection

@section('right')
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    平台页面
                </div>
                <div class="ibox-content">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>

        <div class="col-sm-9">
            <div class="ibox float-e-margins">
                <div class="ibox-title">概要
                    {{--<button class="btn btn-info" type="button" style="float: right;margin: 0 5px;padding: 4px 12px"--}}
                    {{--onclick="units.batchDelete()">删除--}}
                    {{--</button>--}}

                    {{--<button class="btn btn-info" type="button" style="float: right;margin: 0 5px;padding: 4px 12px"--}}
                    {{--onclick="units.saveView(0)">添加--}}
                    {{--</button>--}}
                </div>
                <div class="ibox-content">
                    <form id="form">
                        <div class="form-group">
                            <label>主标题</label>
                            <input type="text" placeholder="" class="form-control" id="title" name="title">
                            <input type="hidden" name="titleId">
                        </div>
                        {{--<div class="form-group">--}}
                        {{--<label>副标题</label>--}}
                        {{--<input type="text" placeholder="" class="form-control" id="subtitle" name="subtitle">--}}
                        {{--</div>--}}
                        <div class="form-group">
                            <label>uri地址</label>
                            <input type="text" placeholder="" class="form-control" id="uri" name="uri">
                        </div>

                        <div class="form-group">
                            <label>缩略图 </label>

                            <img
                                src="https://admin.yinqingli.com/storage/202011/jpg/I9LOpRKjyfwVgAgSXHddYrkcDjsBxwDkyR2n2lKZ.jpg"
                                alt="" style="height: 100px" id="thumb">

                        </div>

                        <div class="form-group">
                            <label>内容摘要</label>
                            <textarea class="form-control" rows="5" placeholder="" id="summary"
                                      name="summary"></textarea>
                        </div>

                        {{--              <div class="radio-label">
                                          <input type="checkbox" id="color1" name="color">
                                          <label for="color1">蓝色</label>
                                      </div>
                                      <div class="radio-label">
                                          <input type="checkbox" id="color2" name="color">
                                          <label for="color2">红色22</label>
                                      </div>
                                      <div class="radio-label">
                                          <input type="checkbox" id="color3" name="color">
                                          <label for="color3">绿色333</label>
                                      </div>--}}

                        @foreach($labelList as $key=>$value)
                            <div class="radio-label">
                                <input class="checkbox-class" type="checkbox" id="color3_{{$key}}" name="color_{{$key}}"
                                       onclick="units.checkboxOnclick({{$key}})" data-key="{{$value}}" value="{{$key}}">
                                <label for="color3_{{$key}}">{{$value}}</label>
                            </div>
                        @endforeach

                        <button type="button" class="btn btn-md btn-primary"
                                onclick="units.import()" style="margin-left: 10px">
                            导入标签词
                        </button>
                        <button type="button" class="btn btn-md btn-success"
                                onclick="units.publish(0)" style="margin-left: 10px">
                            自定义发布
                        </button>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label>需填内容</label>
                        </div>
                        <div class="form-group">
                            <label for="release_at">发布日期：</label>

                            <div>
                                <div class="input-group m-b">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" id="release_at" name="release_at">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="release_interval">发布间隔：</label>
                            <div>
                                <div class="input-group m-b">
                                    <input type="text" class="form-control" name="release_interval"
                                           id="release_interval">
                                    <span class="input-group-addon">天</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label>社交账号类型</label>
                            <div>
                                <select name="social_ids" class="form-control" multiple>
                                    @foreach($socialProfiles as $item)
                                        <option value="{{$item['id']}}">{{$item['type']}}
                                            -{{$item['socialNetworkUsername']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{--<div class="form-group">--}}
                        {{--<label for="release_interval">linkedIn组织ID：</label>--}}

                        {{--<div>--}}
                        {{--<div class="input-group m-b">--}}
                        {{--{{$linkedInOrgId}}--}}
                        {{--</div>--}}
                        {{--</div>--}}
                        {{--</div>--}}

                        {{--<div class="form-group">--}}
                        {{--<label for="pin_board">pinterest board：</label>--}}

                        {{--<div>--}}
                        {{--<div class="input-group m-b">--}}

                        {{--@if($boardsErr==null)--}}
                        {{--<select name="pin_board" id="pin_board" class="form-control">--}}
                        {{--<option value="">请选择board</option>--}}
                        {{--@foreach($boards as $board)--}}
                        {{--<option value="{{$board}}">{{$board}}</option>--}}
                        {{--@endforeach--}}
                        {{--</select>--}}
                        {{--@else--}}
                        {{--<input type="hidden" name="pin_board" id="pin_board" value="">--}}
                        {{--{{$boardsErr}}--}}
                        {{--@endif--}}
                        {{--</div>--}}
                        {{--</div>--}}
                        {{--</div>--}}

                        <button class="btn btn-info btn-sm" type="button" onclick="units.syncSocial()"
                                style="margin-top: 5px">同步社交
                        </button>

                    </form>
                </div>
            </div>
        </div>

    </div>
@endsection


@section('footer_extend')
    <script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.core.min.js')}}"></script>
    {{--<script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.exedit.min.js')}}"></script>--}}
    <script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.excheck.min.js')}}"></script>
    <script src="{{asset('js/plugins/layDate-v5.0.9/laydate/laydate.js')}}"></script>
    <script>

        laydate.render({
            elem: '#release_at', //指定元素
            type: 'datetime'
        });
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            check: {
                enable: true,
                chkboxType: {"Y": "s", "N": "s"}
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode) {
                    // config.otherParams = {parentId: treeNode.id};
                    console.log(treeNode);

                    $("#title").val(treeNode.name);
                    // $("#subtitle").val(treeNode.subtitle);

                    if (treeNode.isParent === true || treeNode.parent_id === 0) {
                        $("#summary").val(treeNode.summary + '  ' + "{{$site->webmaster_domain}}" + treeNode.uri + '/');
                    } else {
                        $("#summary").val(treeNode.summary + '  ' + "{{$site->webmaster_domain}}" + treeNode.uri + ".html");
                    }

                    $("#thumb").attr('src', '{{sprintf('http://%s',$site->domain)}}' + treeNode.thumb);
                    $("#uri").val(treeNode.uri);
                    // tips.tableRefresh();
                }
            }
            // edit: {
            //     enable: true,
            //     showRenameBtn: false,
            //     showRemoveBtn: false
            // }
            // view: {
            //     addHoverDom: units.addHoverDom,
            //     removeHoverDom: function (treeId, treeNode) {
            //         $("#addBtn_" + treeNode.tId).unbind().remove();
            //         $("#resetBtn_" + treeNode.tId).unbind().remove();
            //     },
            //     selectedMulti: false
            // }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）

        var trees = JSON.parse('{!! addslashes(json_encode($trees)) !!}');
        console.log(trees);

        $(document).ready(function () {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, trees);
        });

        var units = {
            checkboxOnclick: function (id) {
                var ids = "#color3_" + id;
                var label = ' #' + $(ids).data('key');
                var summary = $("#summary").val();
                if ($(ids).is(':checked')) {
                    $("#summary").val(summary + label);
                } else {
                    $("#summary").val($("#summary").val().replace(label, ''))
                }
            },

            import: function () {

                var str = '<div class="ibox-content" id="importLayer">' +
                    '<form class="form-horizontal">' +
                    '<div class="form-group">' +
                    '<label class="col-sm-3 control-label">请选择excel文件：</label>' +

                    '<div class="col-sm-6">' +

                    '<input type="file" id="excel_file" class="form-control">' +
                    '<input type="hidden" id="excel_path">' +
                    '</div>' +
                    '<div class="col-sm-2"><button class="btn btn-info" type="button" onclick="units.fileUpload()">上传</button></div>' +
                    '</div>' +
                    ' <div class="form-group">' +
                    '<div class="col-sm-6 col-sm-offset-3">' +

                    '<a href="{{asset('tpl/social_tag.xls')}}">请下载导入模板</a>' +
                    '</div>' +
                    '</div>' +

                    '</form>' +
                    '</div>';

                openIndex = layer.open({
                    type: 1,
                    content: str,
                    area: ['60%', '30%'],
                    title: '导入关键词'
                });
            },
            publish: function (id) {
                var url = '/admin/sites/social-queue/' + id + '?siteId={{$siteId}}';
                layer.open({
                    type: 2,
                    content: url,
                    area: ['70%', '90%'],
                    title: '保存'
                });
            },
            fileUpload: function () {
                var config = {
                    url: '/admin/tool/excel-upload'
                };
                config.success = function (result) {
                    var data = {excel_path: result.data.file_url, siteId: "{{$siteId}}"};
                    var config = {
                        url: '/admin/sites/' + {{$siteId}} +'/social-template-import',
                        type: 'post',
                        data: data,
                        success: function (result) {
                            layer.msg(result.message, {icon: 6, time: 1500}, function () {
                                layer.close(openIndex);
                                window.location.reload();
                            });
                        }
                    };
                    tips.ajax(config);
                };
                tips.fileUpload($("#excel_file"), config);
            },

            syncSocial: function () {
                    {{--var data = tips.getFormValues('#form');--}}
                    {{--data.thumb = $("#thumb").attr('src');--}}
                    {{--var ajaxConfig = {--}}
                    {{--url: '/admin/sites/' + {{$siteId}} +'/social-publish',--}}
                    {{--type: 'post',--}}
                    {{--data: data--}}
                    {{--};--}}
                    {{--tips.ajax(ajaxConfig);--}}

                var checkedNodes = zTreeObj.getCheckedNodes();
                var nodeIds = [];
                $.each(checkedNodes, function (inx, val) {
                    nodeIds.push(val.id);
                });

                var checkbox = [];
                $(".checkbox-class").each(function () {
                    if ($("#color3_" + $(this).val()).is(':checked')) {
                        checkbox.push($(this).val())
                    }
                });

                var ajaxConfig = {
                    url: '/admin/sites/' + {{$siteId}} +'/social-publish',
                    type: 'post',
                    data: {
                        checkIds: nodeIds,
                        release_at: $("#release_at").val(),
                        release_interval: $("#release_interval").val(),
                        pin_board: $("#pin_board").val(),
                        social_ids: $("[name=social_ids]").val(),
                        label_id: checkbox,
                    }
                };
                tips.ajax(ajaxConfig);
            },
        };
    </script>
@endsection