@using MySystem.Models;
@{
    string RightInfo = ViewBag.RightInfo as string;
    string right = ViewBag.right as string;
    string Id = ViewBag.Id as string;
    string MerchantId = ViewBag.MerchantId 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="@Id" />
        <input type="hidden" name="MerchantId" value="@MerchantId" />
        <input type="hidden" id="ItemList" name="ItemList" value="" />
        <input type="hidden" id="DetailList" name="DetailList" value="" />
        <div class="layui-card">
          <div class="layui-card-body">
        <div class="layui-tab" lay-filter="mytabbar">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="1">规格项</li>
                <li lay-id="2">规格明细</li>
            </ul>
            <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-inline">
                            <select id="TempId" name="TempId" lay-filter="tempid" lay-search="">
                                <option value="">请选择</option>
                                <option v-for="item in tempList" :value="item.id">{{item.name}}</option>
                            </select>
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            <a href="###" v-on:click="showTemplate">刷新</a>
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            <a href="###" lay-href="/Admin/ProductNormTemp/Index?MerchantId=@MerchantId&right=@right">模板管理</a>
                        </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" v-on:keyup="showDetail">
                                                    <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">
                            <table width="100%">
                                <thead>
                                    <tr style="height:30px; line-height:30px; background-color:#eee;">
                                        <th style="padding:10px;" v-for="item in itemList">{{item.name}}</th>
                                        <th style="padding:10px;">价格</th>
                                        <th style="padding:10px;">积分抵扣</th>
                                        <th style="padding:10px;">创客价格</th>
                                        <th style="padding:10px;">创客积分抵扣</th>
                                        <th style="padding:10px;">库存</th>
                                        <th style="padding:10px;">规格编码</th>
                                        <th style="padding:10px;">成本价</th>
                                        <th style="padding:10px;">限购数量</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr style="height:30px; line-height:30px;" v-for="item in detailList">
                                        <td style="padding:10px;width:80px;" v-for="subitem in item.title">{{subitem.name}}</td>
                                        <td style="padding:10px;">
                                            <input class="layui-input" type="text" maxlength="20" lay-verify="" autocomplete="off" placeholder="请输入价格" v-model="item.price">
                                        </td>
                                        <td style="padding:10px;">
                                            <input class="layui-input" type="text" maxlength="20" lay-verify="" autocomplete="off" placeholder="请输入积分抵扣" v-model="item.integral">
                                        </td>
                                        <td style="padding:10px;">
                                            <input class="layui-input" type="text" maxlength="20" lay-verify="" autocomplete="off" placeholder="请输入创客价格" v-model="item.userprice">
                                        </td>
                                        <td style="padding:10px;">
                                            <input class="layui-input" type="text" maxlength="20" lay-verify="" autocomplete="off" placeholder="请输入创客积分抵扣" v-model="item.userintegral">
                                        </td>
                                        <td style="padding:10px;">
                                            <input class="layui-input" type="text" maxlength="20" lay-verify="" autocomplete="off" placeholder="请输入库存" v-model="item.stock">
                                        </td>
                                        <td style="padding:10px;">
                                            <input class="layui-input" type="text" maxlength="20" lay-verify="" autocomplete="off" placeholder="请输入规格编码" v-model="item.code">
                                        </td>
                                        <td style="padding:10px;">
                                            <input class="layui-input" type="text" maxlength="20" lay-verify="" autocomplete="off" placeholder="请输入成本价" v-model="item.costprice">
                                        </td>
                                        <td style="padding:10px;">
                                            <input class="layui-input" type="text" maxlength="20" lay-verify="" autocomplete="off" placeholder="请输入限购数量" v-model="item.limitcount">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </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"></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 tree;
        var form;
        function init_layui() {
            layui.config({
                base: '/layuiadmin/' //静态资源所在路径
            }).extend({
                index: 'lib/index' //主入口模块
            }).use(['index', 'form', 'upload', 'layedit', 'laydate', 'element', 'croppers', 'transfer', 'tree', 'util'], function () {
                var $ = layui.$
                    , 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;
                form = layui.form;

                form.on('select(tempid)', function (data) {
                    app.showTemplateDetail(data.value);
                });

                //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
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    itemList: @Html.Raw(ViewBag.ItemList),
                    detailList: @Html.Raw(ViewBag.DetailList),
                    tempList: [],
                    TempId: 0,
                };
            },
            mounted() {
                this.showTemplate();
                init_layui();
            },
            methods: {
                showTemplate() {
                    let that = this;
                    $.ajax({
                        url: "/Admin/ProductNorm/GetTemplate?r=" + Math.random(1),
                        data: "MerchantId=@MerchantId",
                        dataType: "json",
                        success: function (data) {
                            that.tempList = data;
                            setTimeout(function () {
                                form.render();
                            }, 1000);
                        }
                    });
                },
                showTemplateDetail(id) {
                    let that = this;
                    $.ajax({
                        url: "/Admin/ProductNorm/GetTemplateDetail?r=" + Math.random(1),
                        data: "Id=" + id,
                        dataType: "json",
                        success: function (data) {
                            that.itemList = JSON.parse(data.tempJsonData);
                            that.showDetail();
                        }
                    });
                },
                add() {
                    this.itemList.push({
                        id: '0',
                        name: '',
                        vallist: [
                            {
                                id: '0',
                                name: '',
                            }
                        ],
                    });
                    this.showDetail();
                },
                toup(index) {
                    if (index > 0) {
                        var sub = this.itemList[index - 1];
                        this.itemList[index - 1] = this.itemList[index];
                        this.itemList[index] = sub;
                        this.showDetail();
                    }
                },
                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.showDetail();
                    }
                },
                del(index) {
                    if (this.itemList.length > 1) {
                        this.itemList.splice(index, 1);
                        this.showDetail();
                    }
                },
                addsub(item) {
                    item.vallist.push({
                        id: '0',
                        name: '',
                    });
                    this.showDetail();
                },
                toleftsub(item, index) {
                    if (index > 0) {
                        var sub = item.vallist[index - 1];
                        item.vallist[index - 1] = item.vallist[index];
                        item.vallist[index] = sub;
                        this.showDetail();
                    }
                },
                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.showDetail();
                    }
                },
                delsub(item, index) {
                    if (item.vallist.length > 1) {
                        item.vallist.splice(index, 1);
                        this.showDetail();
                    }
                },
                showDetail() {
                    var array1 = [];
                    var array2 = [];
                    var array3 = [];
                    var array4 = [];
                    var array5 = [];
                    for (var i = 0; i < this.itemList.length; i++) {
                        var num = i + 1;
                        for (var j = 0; j < this.itemList[i].vallist.length; j++) {
                            var sub = {
                                id: this.itemList[i].vallist[j].id,
                                name: this.itemList[i].vallist[j].name,
                            };
                            if (num == 1) {
                                array1.push(sub);
                            } else if (num == 2) {
                                array2.push(sub);
                            } else if (num == 3) {
                                array3.push(sub);
                            } else if (num == 4) {
                                array4.push(sub);
                            } else if (num == 5) {
                                array5.push(sub);
                            }
                        }
                    }
                    this.checkTitle();
                    //this.detailList = [];
                    for (var i = 0; i < array1.length; i++) {
                        if (array2.length > 0) {
                            for (var j = 0; j < array2.length; j++) {
                                if (array3.length > 0) {
                                    for (var k = 0; k < array3.length; k++) {
                                        if (array4.length > 0) {
                                            for (var l = 0; l < array4.length; l++) {
                                                if (array5.length > 0) {
                                                    for (var m = 0; m < array5.length; m++) {
                                                        if (!this.isTitle(JSON.stringify([array1[i], array2[j], array3[k], array4[l], array5[m]]))) {
                                                            this.detailList.push({
                                                                title: [array1[i], array2[j], array3[k], array4[l], array5[m]],
                                                                price: 0,
                                                                integral: 0,
                                                                userprice: 0,
                                                                userintegral: 0,
                                                                stock: 0,
                                                                code: '',
                                                                costprice: 0,
                                                                limitcount: 0,
                                                            });
                                                        }
                                                    }
                                                } else {
                                                    if (!this.isTitle(JSON.stringify([array1[i], array2[j], array3[k], array4[l]]))) {
                                                        this.detailList.push({
                                                            title: [array1[i], array2[j], array3[k], array4[l]],
                                                            price: 0,
                                                            integral: 0,
                                                            userprice: 0,
                                                            userintegral: 0,
                                                            stock: 0,
                                                            code: '',
                                                            costprice: 0,
                                                            limitcount: 0,
                                                        });
                                                    }
                                                }
                                            }
                                        } else {
                                            if (!this.isTitle(JSON.stringify([array1[i], array2[j], array3[k]]))) {
                                                this.detailList.push({
                                                    title: [array1[i], array2[j], array3[k]],
                                                    price: 0,
                                                    integral: 0,
                                                    userprice: 0,
                                                    userintegral: 0,
                                                    stock: 0,
                                                    code: '',
                                                    costprice: 0,
                                                    limitcount: 0,
                                                });
                                            }
                                        }
                                    }
                                } else {
                                    if (!this.isTitle(JSON.stringify([array1[i], array2[j]]))) {
                                        this.detailList.push({
                                            title: [array1[i], array2[j]],
                                            price: 0,
                                            integral: 0,
                                            userprice: 0,
                                            userintegral: 0,
                                            stock: 0,
                                            code: '',
                                            costprice: 0,
                                            limitcount: 0,
                                        });
                                    }
                                }
                            }
                        } else {
                            if (!this.isTitle(JSON.stringify([array1[i]]))) {
                                this.detailList.push({
                                    title: [array1[i]],
                                    price: 0,
                                    integral: 0,
                                    userprice: 0,
                                    userintegral: 0,
                                    stock: 0,
                                    code: '',
                                    costprice: 0,
                                    limitcount: 0,
                                });
                            }
                        }
                    }
                    this.$forceUpdate();
                },
                checkTitle() {
                    var array1 = [];
                    var array2 = [];
                    var array3 = [];
                    var array4 = [];
                    var array5 = [];
                    for (var i = 0; i < this.itemList.length; i++) {
                        var num = i + 1;
                        for (var j = 0; j < this.itemList[i].vallist.length; j++) {
                            var sub = {
                                id: this.itemList[i].vallist[j].id,
                                name: this.itemList[i].vallist[j].name,
                            };
                            if (num == 1) {
                                array1.push(sub);
                            } else if (num == 2) {
                                array2.push(sub);
                            } else if (num == 3) {
                                array3.push(sub);
                            } else if (num == 4) {
                                array4.push(sub);
                            } else if (num == 5) {
                                array5.push(sub);
                            }
                        }
                    }
                    var arr = [];
                    for (var i = 0; i < array1.length; i++) {
                        if (array2.length > 0) {
                            for (var j = 0; j < array2.length; j++) {
                                if (array3.length > 0) {
                                    for (var k = 0; k < array3.length; k++) {
                                        if (array4.length > 0) {
                                            for (var l = 0; l < array4.length; l++) {
                                                if (array5.length > 0) {
                                                    for (var m = 0; m < array5.length; m++) {
                                                        for (var num = 0; num < this.detailList.length; num++) {
                                                            if (JSON.stringify(this.detailList[num].title) == JSON.stringify([array1[i],array2[j],array3[k],array4[l],array5[m]]) && !this.isTitle(JSON.stringify([array1[i],array2[j],array3[k],array4[l],array5[m]]))) {
                                                                arr.push(this.detailList[num]);
                                                            }
                                                        }
                                                    }
                                                } else {
                                                    for (var num = 0; num < this.detailList.length; num++) {
                                                        if (JSON.stringify(this.detailList[num].title) == JSON.stringify([array1[i],array2[j],array3[k],array4[l]]) && !this.isTitle(JSON.stringify([array1[i],array2[j],array3[k],array4[l]]))) {
                                                            arr.push(this.detailList[num]);
                                                        }
                                                    }
                                                }
                                            }
                                        } else {
                                            for (var num = 0; num < this.detailList.length; num++) {
                                                if (JSON.stringify(this.detailList[num].title) == JSON.stringify([array1[i],array2[j],array3[k]]) && !this.isTitle(JSON.stringify([array1[i],array2[j],array3[k]]))) {
                                                    arr.push(this.detailList[num]);
                                                }
                                            }
                                        }
                                    }
                                } else {
                                    for (var num = 0; num < this.detailList.length; num++) {
                                        if (JSON.stringify(this.detailList[num].title) == JSON.stringify([array1[i],array2[j]]) && !this.isTitle(JSON.stringify([array1[i],array2[j]]))) {
                                            arr.push(this.detailList[num]);
                                        }
                                    }
                                }
                            }
                        } else {
                            for (var num = 0; num < this.detailList.length; num++) {
                                if (JSON.stringify(this.detailList[num].title) == JSON.stringify([array1[i]]) && !this.isTitle(JSON.stringify([array1[i]]))) {
                                    arr.push(this.detailList[num]);
                                }
                            }
                        }
                    }
                    this.detailList = arr;
                },
                isTitle(title) {
                    for (var num = 0; num < this.detailList.length; num++) {
                        if (JSON.stringify(this.detailList[num].title) == title) {
                            return true;
                        }
                    }
                    return false;
                },
            }
        });
    </script>
</body>
</html>