@using WX.CRM.WebHelper;
@using WX.CRM.Model
@using WX.CRM.WEB.Handler
@model WX.CRM.Model.MAP.WX_FriendScirclePhone
@{
    ViewBag.Title = "发送朋友圈";
    Layout = "~/Views/Shared/_Index_LayoutEdit.cshtml";

}
@*<link href="~/Scripts/layer/css/layui.css" rel="stylesheet" />*@

@*<script src="~/Scripts/layer/layer.min.js"></script>*@
@*<script src="~/Scripts/layer/layui.js"></script>*@
<link href="~/Scripts/layui-v2.3.0/css/layui.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/layui-v2.3.0/layui.all.js"></script>
<script src="~/Scripts/layui-v2.3.0/layui.js"></script>
<style>
    .hiddenClass {
        display: none;
    }

    .attention {
        color: red;
        padding: 5px;
    }

    .movestyle {
    }
</style>
<style type="text/css">
    .WoCao td {
        padding: 3px;
    }

    .layim-face-list {
        position: relative;
        width: 372px;
        padding: 10px;
        border: 1px solid #D9D9D9;
        background-color: #fff;
        box-shadow: 0 0 20px rgba(0,0,0,.2);
    }

        .layim-face-list li {
            cursor: pointer;
            float: left;
            border: 1px solid #e8e8e8;
            height: 22px;
            width: 26px;
            overflow: hidden;
            /*margin: -1px 0 0 -1px;*/
            padding: 4px 2px;
            text-align: center;
        }

    .face_onMouseOver {
        border: 1px solid red;
    }

    .MsgCount {
        width: 14px;
        background-color: red;
        color: white;
        line-height: 14px;
        margin-top: 5px;
        text-align: center;
        height: 14px;
        border-radius: 14px;
        border: red solid 2px;
    }

    .Imggray {
        -webkit-filter: grayscale(100%);
    }

    .nEmpty {
    }

    .msgCountCs {
        display: block;
        height: 25px;
        padding: 0px;
        margin: 0px;
    }

    .msgIsGuoQi {
        display: block;
        height: 25px;
        width: 40px;
        line-height:14px;
        padding: 2px 0px 0px 0px;
        margin: 0px;
        color: gray;
    }

    body .demo-class .layui-layer-title {
        background: #c00;
        color: #fff;
        border: none;
    }

    body .demo-class .layui-layer-btn {
        border-top: 1px solid #E9E7E7;
    }

        body .demo-class .layui-layer-btn a {
            background: #333;
        }

        body .demo-class .layui-layer-btn .layui-layer-btn1 {
            background: #999;
        }

    #ChatCore_chatmore .ChatCore_chatlist li {
        padding: 0 20px 0 5px;
    }

    .Hidden {
        display: none;
    }

    .nmnimage {
        max-height: 120px;
        max-width: 120px;
    }

    #nubl {
        position: relative;
        width: 440px;
        height: auto;
        padding: 5px;
        /*border: 1px solid #D9D9D9;*/
        background-color: #fff;
    }

        #nubl li {
            float: left;
            border: 1px solid #e8e8e8;
            height: 130px;
            width: 130px;
            overflow: hidden;
            /* margin: -1px 0 0 -1px; */
            padding: 2px 1px;
            text-align: center;
        }

    .listyle {
        box-shadow: 0 0 10px 0px #FF5722 inset;
    }

    .nfloat {
        /*z-index: 999;*/
        position: absolute;
        /*left: 47px;
        top: 4px;*/
        cursor: pointer;
    }
</style>

<script>
    var face = [{ name: "[微笑]", imgpath: "0.png" }, { name: "[撇嘴]", imgpath: "1.png" }, { name: "[色]", imgpath: "2.png" }, { name: "[发呆]", imgpath: "3.png" },
    { name: "[得意]", imgpath: "4.png" }, { name: "[流泪]", imgpath: "5.png" }, { name: "[害羞]", imgpath: "6.png" }, { name: "[闭嘴]", imgpath: "7.png" },
    { name: "[睡]", imgpath: "8.png" }, { name: "[大哭]", imgpath: "9.png" }, { name: "[尴尬]", imgpath: "10.png" }, { name: "[发怒]", imgpath: "11.png" },
    { name: "[调皮]", imgpath: "12.png" },
    { name: "[呲牙]", imgpath: "13.png" }, { name: "[惊讶]", imgpath: "14.png" }, { name: "[难过]", imgpath: "15.png" },
    { name: "[囧]", imgpath: "17.png" }, { name: "[抓狂]", imgpath: "18.png" }, { name: "[吐]", imgpath: "19.png" }, { name: "[偷笑]", imgpath: "20.png" },
    { name: "[愉快]", imgpath: "21.png" }, { name: "[白眼]", imgpath: "22.png" }, { name: "[傲慢]", imgpath: "23.png" },
    { name: "[困]", imgpath: "25.png" }, { name: "[惊恐]", imgpath: "26.png" },
    { name: "[流汗]", imgpath: "27.png" }, { name: "[憨笑]", imgpath: "28.png" }, { name: "[悠闲]", imgpath: "29.png" }, { name: "[奋斗]", imgpath: "30.png" },
    { name: "[咒骂]", imgpath: "31.png" }, { name: "[疑问]", imgpath: "32.png" }, { name: "[嘘]", imgpath: "33.png" }, { name: "[晕]", imgpath: "34.png" },
    { name: "[衰]", imgpath: "36.png" }, { name: "[骷髅]", imgpath: "37.png" },
    { name: "[敲打]", imgpath: "38.png" }, { name: "[再见]", imgpath: "39.png" }, { name: "[擦汗]", imgpath: "40.png" },
    { name: "[抠鼻]", imgpath: "41.png" }, { name: "[鼓掌]", imgpath: "42.png" },
    { name: "[坏笑]", imgpath: "44.png" }, { name: "[左哼哼]", imgpath: "45.png" },
    { name: "[右哼哼]", imgpath: "46.png" }, { name: "[哈欠]", imgpath: "47.png" },
    { name: "[鄙视]", imgpath: "48.png" }, { name: "[委屈]", imgpath: "49.png" },
    { name: "[快哭了]", imgpath: "50.png" }, { name: "[阴险]", imgpath: "51.png" },
    { name: "[亲亲]", imgpath: "52.png" },
    { name: "[可怜]", imgpath: "54.png" }, { name: "[菜刀]", imgpath: "55.png" },
    { name: "[西瓜]", imgpath: "56.png" }, { name: "[啤酒]", imgpath: "57.png" },
    { name: "[咖啡]", imgpath: "60.png" },
    { name: "[猪头]", imgpath: "62.png" }, { name: "[玫瑰]", imgpath: "63.png" },
    { name: "[凋谢]", imgpath: "64.png" }, { name: "[嘴唇]", imgpath: "65.png" },
    { name: "[爱心]", imgpath: "66.png" }, { name: "[心碎]", imgpath: "67.png" },
    { name: "[蛋糕]", imgpath: "68.png" }, { name: "[炸弹]", imgpath: "70.gif" }, { name: "[便便]", imgpath: "71.gif" },
    { name: "[月亮]", imgpath: "72.gif" }, { name: "[太阳]", imgpath: "73.gif" }, { name: "[拥抱]", imgpath: "74.png" }, { name: "[强]", imgpath: "75.gif" },
    { name: "[弱]", imgpath: "76.gif" },
    { name: "[握手]", imgpath: "77.gif" }, { name: "[胜利]", imgpath: "78.gif" }, { name: "[抱拳]", imgpath: "79.gif" }, { name: "[勾引]", imgpath: "80.gif" },
    { name: "[拳头]", imgpath: "81.gif" }, { name: "[OK]", imgpath: "82.gif" }, { name: "[跳跳]", imgpath: "83.gif" }, { name: "[发抖]", imgpath: "84.gif" },
    { name: "[怄火]", imgpath: "85.png" }, { name: "[转圈]", imgpath: "86.gif" }, { name: "😄", imgpath: "87.png" },
    { name: "😷", imgpath: "90.png" }, { name: "😂", imgpath: "91.png" }, { name: "😝", imgpath: "92.png" }, { name: "😳", imgpath: "93.png" },
    { name: "[嘿哈]", imgpath: "97.png" }, { name: "[捂脸]", imgpath: "98.png" }, { name: "[奸笑]", imgpath: "99.png" },
    { name: "[机智]", imgpath: "100.png" }, { name: "[皱眉]", imgpath: "101.png" }, { name: "[耶]", imgpath: "102.png" },
    { name: "[红包]", imgpath: "108.png" }
    ];

</script>
<script type="text/javascript">
    (function ($) {
        $.fn.extend({
            insertAtCaret: function (myValue) {
                var $t = $(this)[0];
                //IE
                if (document.selection) {
                    this.focus();
                    sel = document.selection.createRange();
                    sel.text = myValue;
                    this.focus();
                } else
                    //!IE
                    if ($t.selectionStart || $t.selectionStart == "0") {
                        var startPos = $t.selectionStart;
                        var endPos = $t.selectionEnd;
                        var scrollTop = $t.scrollTop;
                        $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
                        this.focus();
                        $t.selectionStart = startPos + myValue.length;
                        $t.selectionEnd = startPos + myValue.length;
                        $t.scrollTop = scrollTop;
                    } else {
                        this.value += myValue;
                        this.focus();
                    }
            }
        })
    })(jQuery);

    layui.use(['layer'], function () {
        var layer = layui.layer; //独立版的layer无需执行这一句
    });
    $(function () {
        $("#btnSave").click(function () {
            var hllomsg = $("#content").val();
            if (hllomsg.length < 4) {
                alert("字数不能少于4个字!");
                return;
            }
            var imgPath = "";
            $("#nubl").find("[imgfile]").each(function (x, i) {
                if (x == 0)
                    imgPath += $(this).attr("imgfile");
                else
                    imgPath += ";"+$(this).attr("imgfile");
            });
            $("#imgPath").val(imgPath);
            $.r_ajax({
                url: "/TS/Friendscircle/SendFriendScircleSave",
                type: "Post",
                data: $("#CreateForm").serialize(),
                dataType: "json",
                loading: true,
                success: function (data) {
                    if (data.type == 1) {
                        window.parent.frameReturnByMes('发送成功！');
                        window.parent.frameReturnByReload(true);
                        window.parent.frameReturnByClose();
                    }
                    else {
                        window.parent.frameReturnByMes(data.message);
                    }
                }
            });
            return false;
        });
        $("#timeType").change(function () {
            var sltValue = $(this).val();
            if (sltValue == "2") {
                $("#hiddTime").removeClass("hiddenClass");
            } else {
                $("#hiddTime").addClass("hiddenClass");
            }
        });

        ChatCore = {};
        ChatCore.showFace = function () {
            var nhtml = "<ul id=\"layimFace\" class='layui-clear layim-face-list'>";
            $(face).each(function (e, x) {
                nhtml += "<li title=\"" + x.name + "\" code=\"" + x.name + "\" ><img src=\"/Face/" + x.imgpath + "\"></li>";
            });
            nhtml += "</ul>";
            layer.open({
                title: '选择表情',
                type: 1,
                skin: 'layui-layer-rim',
                area: ['410px', '400px'],
                content: nhtml
            });
            $(".layim-face-list li").mouseover(function () {
                $(this).attr("style", "border: 1px solid red;");
            }).mouseout(function () {
                $(this).removeAttr("style");
            }).click(function () {
                var imwriht = $("#content");
                //imwriht.val(imwriht.val() + $(this).attr("code"));
                $(imwriht).insertAtCaret($(this).attr("code"));

                //var indexs = $("#layimFace").parent().parent().attr("times");
                //layer.close(indexs);
            });
        };
        $("#btn_ShowFace").click(function () {
            ChatCore.showFace();
        });

        layui.use('upload', function () {
            var upload = layui.upload;
            //var form = layui.form();
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                , url: '/TS/Friendscircle/UploadImage' //上传接口
                , accept: 'images'
                , size: 500 //最大允许上传的文件大小
                , done: function (res) {
                    if (res.result) {
                        $("#nubl").removeAttr("style");
                        //<span class=\"layui-badge nfloat\">X</span>
                        var liid = "li_" + RndNum(6);
                        var imageli = "<li id='" + liid + "' class='movestyle' imgfile='" + res.filename + "'><img clas='nmnimage' style='max-height:120px;max-width:120px;padding-top:10px;'src='/fsfile/" + res.filename + "' /></li>";
                        $("#nubl").append(imageli);
                        if ($("#nubl").find("li").length >= 9) {
                            $("#test1").attr("style", "display:none;");
                        }
                        $("#" + liid).hover(
                            function () {
                                $(this).addClass("listyle");
                                var xspanid = "span_" + liid;
                                var imgfile1 = $(this).attr("imgfile");
                                $(this).children("img").before("<span spimgfile='" + imgfile1 + "' id=\"" + xspanid + "\" class=\"layui-badge nfloat\">X</span>");
                                $("#" + xspanid).click(function () {
                                    var mf = $(this).attr("spimgfile");
                                    $(this).parent().remove();
                                    if ($("#nubl").find("li").length < 9) {
                                        $("#test1").removeAttr("style");
                                    }
                                    $.ajax({
                                        type: "POST",
                                        url: "/TS/Friendscircle/DeleteImag?imagefile=" + mf,
                                        dataType: "json",
                                        success: function (data) {
                                        }
                                    });
                                });
                            },
                            function () {
                                $(this).removeClass("listyle");
                                $(this).find(".nfloat").remove();
                            }
                        );
                    } else {

                    }
                }
                , error: function () {
                    //请求异常回调
                }
            });
        });

    });
    function RndNum(n) {
        var rnd = "";
        for (var i = 0; i < n; i++)
            rnd += Math.floor(Math.random() * 10);
        return rnd;

    }
</script>
<div class="mvctool bgb">
    @Html.ToolButtonPlain("btnSave", "icon-save", "发送", false, "")
</div>
<div class="formContent">
    @using (Html.BeginForm("SendFriendScircleSave", "Friendscircle", null, FormMethod.Post, new { Id = "CreateForm" }))
    {
        @Html.ValidationSummary(true)
        <table class="fromEditTable ">
            <tbody>
                <tr>
                    <td style="width:80px;">
                        内容：
                    </td>
                    <td style="width:580px">
                        @Html.TextAreaFor(m => m.content, new { rows = "20", cols = "70" })
                        <img id="btn_ShowFace" style="cursor:pointer" src="~/Content/Images/biaoqing.png" width="25px" height="25px" />
                    </td>
                    <td>
                        @Html.ValidationMessageFor(m => m.content)
                    </td>
                </tr>
                <tr>
                    <td style="width:80px;height:100px;">
                        图片：
                    </td>
                    <td style="width:580px" class="nmalgeb">
                        <input name="imgPath" id="imgPath" type="hidden" />
                        <ul id="nubl" style="display:none"></ul>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td style="20px;"></td>
                    <td colspan="2">
                        <button type="button" class="layui-btn" id="test1">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                    </td>
                </tr>

                <tr>
                    <td style="width:80px;">
                        执行时间：
                    </td>
                    <td style="width:580px">
                        <select name="timeType" id="timeType">
                            <option value="1">2~3分钟左右执行</option>
                            <option value="2">自定义时间</option>
                        </select>
                        <span id="hiddTime" class="hiddenClass">
                            <input name="exe_date" type="text" style="width:100px;" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" value="@Html.Raw(DateTime.Now.ToString("yyyy-MM-dd"))" />
                            <input name="exe_time" type="text" style="width:60px;" class="Wdate" onclick="WdatePicker({dateFmt:'HH:mm'})" value="@Html.Raw(DateTime.Now.ToString("HH:mm"))" />
                        </span>
                    </td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    }
</div>