@using MySystem.Models;
@{ProductNormTemp editData = ViewBag.data as ProductNormTemp;}
@{
    string RightInfo = ViewBag.RightInfo as string;
    string right = ViewBag.right as string;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品规格模板(修改)</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <script src="/admin/js/jquery-1.10.1.min.js"></script>
    <script src="/admin/js/LAreaData2.js"></script>
    <script src="/admin/js/vue.min.js"></script>
</head>
<body>

    <div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin">
        <input type="hidden" name="Id" value="@editData.Id" />
        <input type="hidden" id="TempJsonData" name="TempJsonData" value="@editData.TempJsonData" />
        <div class="layui-card">
          <div class="layui-card-body">
        <div class="layui-tab" lay-filter="mytabbar">
            <div class="layui-tab-content mt20" id="app">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">模板名称</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" id="Name" name="Name" value="@editData.Name" maxlength="50" autocomplete="off" placeholder="请输入模板名称">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品规格</label>
                        <div class="layui-input-block">
                            <div>
                                <table width="100%" v-for="item,i in itemList">
                                    <thead>
                                        <tr style="height:30px; line-height:30px; background-color:#eee;">
                                            <th style="padding:10px;width:60px;">规格名：</th>
                                            <th style="padding:10px;">
                                                <input class="layui-input" style="width:150px;" type="text" maxlength="20" lay-verify="" autocomplete="off" placeholder="请输入规格名" v-model="item.name">
                                            </th>
                                            <th style="padding:10px;width:150px;">
                                                <input type="button" value="上移" v-on:click="toup(i)" />
                                                <input type="button" value="下移" v-on:click="todown(i)" />
                                                <input type="button" value="删除" v-on:click="del(i)" />
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr style="height:30px; line-height:30px;">
                                            <td style="padding:10px;width:60px;">规格值：</td>
                                            <td style="padding:10px;">
                                                <div style="float:left;width:150px;margin-right:5px;" v-for="subitem,j in item.vallist">
                                                    <input class="layui-input" type="text" maxlength="20" lay-verify="" autocomplete="off" placeholder="请输入规格值" v-model="subitem.name">
                                                    <input type="button" value="左移" v-on:click="toleftsub(item,j)" />
                                                    <input type="button" value="右移" v-on:click="torightsub(item,j)" />
                                                    <input type="button" value="删除" v-on:click="delsub(item,j)" />
                                                </div>
                                            </td>
                                            <td style="padding:10px;">
                                                <input type="button" class="layui-btn" value="增加" v-on:click="addsub(item)" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <table width="100%">
                                <tr style="height:30px; line-height:30px;">
                                    <td style="padding:10px;">
                                        <input type="button" class="layui-btn" value="添加项" v-on:click="add" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">网页标题</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" id="SeoTitle" name="SeoTitle" value="@editData.SeoTitle" maxlength="50" autocomplete="off" placeholder="请输入网页标题">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">网页关键字</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" id="SeoKeyword" name="SeoKeyword" value="@editData.SeoKeyword" maxlength="50" autocomplete="off" placeholder="请输入网页关键字">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">网页描述</label>
                        <div class="layui-input-block">
<textarea class="layui-textarea" name="SeoDescription" id="SeoDescription" placeholder="请输入网页描述">@editData.SeoDescription</textarea>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="LAY-list-front-submit" id="LAY-list-front-submit" value="确认">
        </div>
    </div>
    </div>
    </div>

    <script src="/layuiadmin/layui/layui.js"></script>
    <script src="/other/oss/upload-min@(MySystem.OssHelper.Instance.OssStatus ? "-oss" : "").js?r=@DateTime.Now.ToString("yyyyMMddHHmmss")"></script>
    <script src="/other/mybjq/kindeditor-min.js"></script>
    <script src="/other/mybjq/lang/zh_CN.js"></script>
    <script>//编辑器
        KindEditor.ready(function (K) {

        });

        var ids = "";
        function getChildren(obj) {
            $.each(obj, function (index, value) {
                var id = obj[index].id;
                ids += id + ",";
                var children = obj[index].children;
                if (children) {
                    getChildren(children);
                }
            });
        }

        function AreasProvinceInit(tagId, areasVal, form, func) {
            for (var i = 0; i < provs_data.length; i++) {
                var sel = "";
                if (areasVal.indexOf(provs_data[i].text) > -1) {
                    sel = " selected=selected";
                }
                $("#" + tagId + "Province").append('<option value="' + provs_data[i].value + '"' + sel + '>' + provs_data[i].text + '</option>');
            }
            form.render();
            func();
        }

        function AreasProvinceSelected(tagId, areasVal, form, value, func) {
            $("#" + tagId + "City").html('<option value="">市</option>');
            var list = citys_data[value];
            for (var i = 0; i < list.length; i++) {
                var sel = "";
                if (areasVal.indexOf(list[i].text) > -1) {
                    sel = " selected=selected";
                }
                $("#" + tagId + "City").append('<option value="' + list[i].value + '"' + sel + '>' + list[i].text + '</option>');
            }
            $("#" + tagId + "Area").html('<option value="">县/区</option>');
            form.render();
            $("#" + tagId + "").val($("#" + tagId + "Province option:selected").text() + "," + $("#" + tagId + "City option:selected").text() + "," + $("#" + tagId + "Area option:selected").text());
            func();
        }

        function AreasCitySelected(tagId, areasVal, form, value, func) {
            $("#" + tagId + "Area").html('<option value="">县/区</option>');
            var list = dists_data[value];
            for (var i = 0; i < list.length; i++) {
                var sel = "";
                if (areasVal.indexOf(list[i].text) > -1) {
                    sel = " selected=selected";
                }
                $("#" + tagId + "Area").append('<option value="' + list[i].value + '"' + sel + '>' + list[i].text + '</option>');
            }
            form.render();
            $("#" + tagId + "").val($("#" + tagId + "Province option:selected").text() + "," + $("#" + tagId + "City option:selected").text() + "," + $("#" + tagId + "Area option:selected").text());
            func();
        }

        function AreasAreaSelected(tagId, form) {
            form.render();
            $("#" + tagId + "").val($("#" + tagId + "Province option:selected").text() + "," + $("#" + tagId + "City option:selected").text() + "," + $("#" + tagId + "Area option:selected").text());
        }
        function movePrev(obj, tagId) {
            $(obj).parent().prev().insertAfter($(obj).parent());
            checkPics(tagId);
        }
        function moveNext(obj, tagId) {
            $(obj).parent().next().insertBefore($(obj).parent());
            checkPics(tagId);
        }
        function deletePic(obj, tagId) {
            $(obj).parent().remove();
            checkPics(tagId);
        }
        function checkPics(tagId) {
            var pics = "";
            var texts = "";
            $("#" + tagId + "Image div img").each(function (i) {
                pics += $(this).attr("src").replace(osshost, '') + "|";
            });
            $("#" + tagId + "Image div input").each(function (i) {
                texts += $(this).val() + "|";
            });
            if (pics == "") {
                $("#" + tagId).val("");
            } else {
                pics = pics.substring(0, pics.length - 1);
                texts = texts.substring(0, pics.length - 1);
                $("#" + tagId).val(pics + "#cut#" + texts);
            }
        }
        function checkBox(tagId) {
            var text = "";
            $("input[type=checkbox][name=" + tagId + "List]:checked").each(function (i) {
                text += $(this).val() + ",";
            });
            $("#" + tagId).val(text);
        }
        function showBigPic(picpath) {
            parent.layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true,
                area: ['auto', 'auto'],
                content: '<img src="' + picpath + '" style="max-width:800px; max-height:800px;" />'
            });
        }

        var app;
        var tree;
        layui.config({
            base: '/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form', 'upload', 'layedit', 'laydate', 'element', 'croppers', 'transfer', 'tree', 'util'], function () {
            var $ = layui.$
                , form = layui.form
                , element = layui.element
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , croppers = layui.croppers
                , upload = layui.upload
                , transfer = layui.transfer
                , util = layui.util;
            tree = layui.tree;

            //Hash地址的定位
            var layid = location.hash.replace(/^#test=/, '');
            element.tabChange('test', layid);
            element.on('tab(test)', function (elem) {
                location.hash = 'test=' + $(this).attr('lay-id');
            });

            //日期


            //上传文件


            //穿梭框


            //TreeView，比如权限管理


            //省市区



            //加载vue
            app = new Vue({
                el: '#app',
                data() {
                    return {
                        itemList: @(Html.Raw(editData.TempJsonData)),
                    };
                },
                mounted() {
                },
                methods: {
                    add() {
                        this.itemList.push({
                            id: '0',
                            name: '',
                            vallist: [
                                {
                                    id: '0',
                                    name: '',
                                }
                            ],
                        });
                    },
                    toup(index) {
                        if (index > 0) {
                            var sub = this.itemList[index - 1];
                            this.itemList[index - 1] = this.itemList[index];
                            this.itemList[index] = sub;
                            this.$forceUpdate();
                        }
                    },
                    todown(index) {
                        if (index < this.itemList.length-1) {
                            var sub = this.itemList[index + 1];
                            this.itemList[index + 1] = this.itemList[index];
                            this.itemList[index] = sub;
                            this.$forceUpdate();
                        }
                    },
                    del(index) {
                        if (this.itemList.length > 1) {
                            this.itemList.splice(index, 1);
                        }
                    },
                    addsub(item) {
                        item.vallist.push({
                            id: '0',
                            name: '',
                        });
                    },
                    toleftsub(item, index) {
                        if (index > 0) {
                            var sub = item.vallist[index - 1];
                            item.vallist[index - 1] = item.vallist[index];
                            item.vallist[index] = sub;
                            this.$forceUpdate();
                        }
                    },
                    torightsub(item, index) {
                        if (index < item.vallist.length-1) {
                            var sub = item.vallist[index + 1];
                            item.vallist[index + 1] = item.vallist[index];
                            item.vallist[index] = sub;
                            this.$forceUpdate();
                        }
                    },
                    delsub(item, index) {
                        if (item.vallist.length > 1) {
                            item.vallist.splice(index, 1);
                        }
                    },
                }
            });
        })

    </script>
</body>
</html>