@{layout module_layout}
@set header{
    <link href="/static/module_extend.css" rel="stylesheet" />
    <link href="/static/product.css" rel="stylesheet" />
@}
@set body{
<form method="POST">
    <div class="TextContentTitle">
        <ul class="_AttrTitle">
            @if d.ID{
                <li class="_AttrName">编辑产品</li>
            }else{
                <li class="_AttrName">添加产品</li>
            @}
            @if d.P{
                <li class="_AttrReturn"><a class="_action" href="/module/ProductPage?ID=@{d.ModuleID}">返回<img src="/static/images/return.png" /></a></li>
            }else{
                <li class="_AttrReturn"><a class="_action" href="/module/Product?ID=@{d.ModuleID}">返回<img src="/static/images/return.png" /></a></li>
            @}
            
        </ul>
    </div>
    <div id="tabs_edit">
        @{Html.Hidden("ID",d.ID)}
        @{Html.Hidden("Images",d.Images)}
        @{Html.Hidden("ModuleID",d.ModuleID)}
        <div class="_t_nav">
            <ul class="_t_nav_item _t_nav_item_cur" tg="#_t_basic">基本信息</ul>
            <ul class="_t_nav_item" tg="#_t_detail">详细内容</ul>
        </div>
        <div class="_t_nav_tab" id="_t_basic">
            <div class="_t_row">
                <ul class="_t_row_title">产品名称：</ul><input class="_t_text" value="@{d.Name}" id="_pro_Name" name="Name" type="text"></div>
            <div class="_t_row">
                <ul class="_t_row_title">URL别名：</ul><input class="_t_text" value="@{d.Alias}" id="_pro_Alias" name="Alias" type="text"></div>
            <div class="_t_row">
                <ul class="_t_row_title">产品类别：</ul>
                <div>
                    <select name="CateID">
                        @for n in d.CateSource {
                            <option
                                @if n.ID==d.CateID{
                                    selected="selected"
                                @}
                             value="@{n.ID}">@{n.Name}</option>
                        @}
                    </select>
                </div>
            </div>

            <div class="_t_row">
                <ul class="_t_row_title">产品属性：</ul>
                <ul style="height: 25px;line-height: 25px;">
                    @{Html.Check("Top",d.Top)}置顶
                    @{Html.Check("Top",d.Top)}最新
                </ul>
            </div>
            <div class="_t_row">
                <ul class="_t_row_title">产品标签：</ul>
                <div>
                    <input id="_pro_Tag" name="Tag" value="@{d.Tag}" class="_t_text" type="text">
                </div>
            </div>
            <div class="_t_row">
                <ul class="_t_tag">
                    @for n in d.TagSource {
                    <li>@{n}</li>
                    @}
                </ul>
                <ul style="clear:both;"></ul>
            </div>
            <div class="_t_row">
                <ul class="_t_row_title">产品概述：</ul>
                <div>
                    <textarea name="Introduce" cols="20" rows="2" style="height: 110px;width: 530px;border: 1px solid #ccc;background: #f6f6f6;">@{d.Introduce}</textarea>
                </div>
            </div>
        </div>
        <div id="myEdit" style="display:none"></div>
        <div class="_t_nav_tab" style="display:none" id="_t_detail">
            <div class="_t_row">
                <ul class="_t_row_title">产品图片：</ul>
                <ul class="_t_image_panel">
                    <li class="_t_image_add">
                        <div><img src="/static/images/addimage.png"></div>
                        <div>点击添加图</div>
                    </li>
                </ul>
                <ul style="clear:both;"></ul>
            </div>
            <div class="_t_row">
                <ul class="_t_row_title">产品详细：</ul>
                <div style="height:300px">
                    <textarea id="_pro_Body" name="Body" style="height:240px">@{d.Body}</textarea>
                </div>
            </div>
        </div>
        <div class="_BtnItem" style="margin-top: 15px;">
            <ul class="BtnSubmit"><input class="subBtn" value="提交" type="submit" /></ul>
            <ul class="BtnReset" style="float:right;"><input id="_pro_back" value="返回" type="reset" /></ul>
        </div>
    </div>
</form>

<script>
     //产品编辑
    var beforEditTabName;

    $("._t_nav_item").click(function () {
        $("._t_nav_item").removeClass("_t_nav_item_cur");
        $(this).addClass("_t_nav_item_cur");
        $("._t_nav_tab").hide();
        $($(this).attr("tg")).show();
    });

    UE.delEditor('_pro_Body');
    var pro_ue = UE.getEditor('_pro_Body', {
        toolbars: [
            [
                'help',
                'undo',
                'redo',
                'bold',
                'indent',
                'italic',
                'underline',
                'strikethrough',
                'pasteplain',
                'selectall',
                'link',
                'unlink',
                'fontfamily',
                'fontsize',
                'insertimage',
                'forecolor',
                'backcolor',
                'lineheight',
                'print',
                'source',
            ]
        ],
        autoHeightEnabled: false,
        initialFrameWidth: null,
        zIndex: 123456789,
        UEDITOR_HOME_URL: "/static/scripts/ueditor/",
        serverUrl: "/api/Ueditor"
    });
    var _pro_image_item_template =
    '<li class="_t_image">' +
    '<img class="_t_image_delete" title="点击删除" src="/static/images/delimg.png">' +
    '<img class="_t_pro_image" style="width:112px; height:112px" src="{0}">' +
    '</li>';
    UE.delEditor('myEdit');
    var myEdit = UE.getEditor("myEdit", {
        zIndex: 123456789,
        UEDITOR_HOME_URL: "/static/scripts/ueditor/",
        serverUrl: "/api/Ueditor"
    });
    myEdit.ready(function () {
        myEdit.addListener("beforeInsertImage", function (t, arg) {
            for (var i = 0; i < arg.length; i++) {
                $("._t_image_add").before($.format(_pro_image_item_template, arg[i].src));
            }
            image_delete_Event();
            bindImgVal();
        });
    });
    imgs = $("#Images").val().split(",")
    for(var i=0;i<imgs.length;i++){
        if (imgs[i]!=""){
            $("._t_image_add").before($.format(_pro_image_item_template, imgs[i]));
        }
    }
    function bindImgVal(){
        imgs=""
        $("._t_pro_image").each(function(){
            imgs+=$(this).attr("src")+","
        })
        $("#Images").val(imgs)
    }
    image_delete_Event();
    $("._t_image_add").click(function () {
        var d = myEdit.getDialog("insertimage", { zIndex: 9999999999 });
        d.render();
        d.open();
    });
    image_delete_Event();
    function image_delete_Event() {
        $("._t_image_delete").off("click");
        $("._t_image_delete").click(function () {
            $(this).parent().remove();
            bindImgVal();
        });
        
    }

    $("#_pro_Name").off("blur");
    $("#_pro_Name").blur(function () {
        if ($.trim($(this).val()) != "") {
            var py = pinyin.getFullChars($.trim($(this).val())).toLowerCase();
			if (py.length>30){
                py = pinyin.getCamelChars($.trim($(this).val())).toLowerCase();
            }
            $("#_pro_Alias").val(py);
        }
    });
</script>
@}