@using MySystem.Models;
@{ProductFareTemp editData = ViewBag.data as ProductFareTemp;}
@{
    string RightInfo = ViewBag.RightInfo as string;
    string right = ViewBag.right 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="@editData.Id" />
        <input type="hidden" name="MerchantId" value="@MerchantId" />
        <input type="hidden" id="SeoDescription" name="SeoDescription" value="@editData.SeoDescription" />
        <div class="layui-card">
          <div class="layui-card-body">
        <div class="layui-tab" lay-filter="mytabbar">
            <div class="layui-tab-content mt20">
                <div class="layui-tab-item layui-show" id="app">
                    <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" lay-verify="required|" autocomplete="off" placeholder="请输入名称">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发货地区</label>
                        <input type="hidden" id="SendAreas" name="SendAreas" value="@editData.SendAreas" />
                        <div class="layui-input-inline">
                            <select id="SendAreasProvince" lay-search="" lay-filter="SendAreasProvince">
                                <option value="">省</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select id="SendAreasCity" lay-search="" lay-filter="SendAreasCity">
                                <option value="">市</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select id="SendAreasArea" lay-search="" lay-filter="SendAreasArea">
                                <option value="">县/区</option>
                            </select>
                        </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="SendAddress" name="SendAddress" value="@editData.SendAddress" maxlength="50" lay-verify="" autocomplete="off" placeholder="请输入发货地址">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发货时间</label>
                        <div class="layui-input-inline">
                            <select id="SendDate" name="SendDate" lay-search="">
                                <option value="">请选择</option>
                                <option value="0">当天</option>
                                @for (int day = 2; day <= 100; day++)
                                {
                                <option value="@day">@(day)天</option>
                                }
                            </select>
                            <script>$("#SendDate").val("@editData.SendDate");</script>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否包邮</label>
                        <div class="layui-input-block">
                            <input type="checkbox" id="IsFree" name="IsFree" value="1" @(editData.IsFree == 1 ? "checked=checked" : "") lay-skin="switch" lay-filter="IsFree" title="开关">
                        </div>
                    </div>
                    <div class="layui-form-item" v-if="!isFree">
                        <label class="layui-form-label">计价方式</label>
                        <div class="layui-input-inline">
                            <select id="MeterMode" name="MeterMode" lay-search="">
                                <option value="">请选择</option>
                                <option value="1">按件数</option>
                            </select>
                            <script>$("#MeterMode").val("@editData.MeterMode");</script>
                        </div>
                    </div>
                    <div class="layui-form-item" v-if="!isFree">
                        <div class="layui-inline">
                            <label class="layui-form-label">运送方式</label>
                            <div class="layui-input-inline">
                                <select id="TransportMode" name="TransportMode" lay-search="">
                                    <option value="">请选择</option>
                                    <option value="1">快递</option>
                                    <option value="2">EMS</option>
                                    <option value="3">平邮</option>
                                </select>
                                <script>$("#TransportMode").val("@editData.TransportMode");</script>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" v-if="!isFree">
                        <label class="layui-form-label">费用配置</label>
                        <div class="layui-input-block">
                            <div style="background-color:#eee;">
                                <table>
                                    <thead>
                                        <tr style="height:30px; line-height:30px;">
                                            <th style="padding:10px;">默认运费</th>
                                            <th style="padding:10px;">
                                                <input class="layui-input" style="width:90px;" type="text" maxlength="20" id="FirstAmount" name="FirstAmount" value="@editData.FirstAmount">
                                            </th>
                                            <th style="padding:10px;">件内</th>
                                            <th style="padding:10px;">
                                                <input class="layui-input" style="width:90px;" type="text" maxlength="20" id="FirstFee" name="FirstFee" value="@editData.FirstFee">
                                            </th>
                                            <th style="padding:10px;">元，每增加</th>
                                            <th style="padding:10px;">
                                                <input class="layui-input" style="width:90px;" type="text" maxlength="20" id="MoreAmount" name="MoreAmount" value="@editData.MoreAmount">
                                            </th>
                                            <th style="padding:10px;">件，增加运费</th>
                                            <th style="padding:10px;">
                                                <input class="layui-input" style="width:90px;" type="text" maxlength="20" id="MoreFee" name="MoreFee" value="@editData.MoreFee">
                                            </th>
                                            <th style="padding:10px;">元</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <table width="100%">
                                <thead>
                                    <tr style="height:30px; line-height:30px; background-color:#eee;">
                                        <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 areaList">
                                        <td style="padding:10px;">
                                            {{item.area}}
                                        </td>
                                        <td style="padding:10px;">
                                            <input class="layui-input" type="text" maxlength="20" v-model="item.firstAmount">
                                        </td>
                                        <td style="padding:10px;">
                                            <input class="layui-input" type="text" maxlength="20" v-model="item.firstFee">
                                        </td>
                                        <td style="padding:10px;">
                                            <input class="layui-input" type="text" maxlength="20" v-model="item.moreAmount">
                                        </td>
                                        <td style="padding:10px;">
                                            <input class="layui-input" type="text" maxlength="20" v-model="item.moreFee">
                                        </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?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) {
            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();
        }

        function AreasProvinceSelected(tagId, areasVal, form, value) {
            $("#" + 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());
        }

        function AreasCitySelected(tagId, areasVal, form, value) {
            $("#" + 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());
        }

        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;
        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.$
                    , 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;

                form.on('switch(IsFree)', function (data) {
                    app.isFree = data.elem.checked;
                    setTimeout(function () {
                        form.render();
                    }, 50);
                });

                //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，比如权限管理


                //省市区
                form.on('select(SendAreasProvince)', function (data) {
                    AreasProvinceSelected("SendAreas", "@editData.SendAreas", form, data.value);
                });
                form.on('select(SendAreasCity)', function (data) {
                    AreasCitySelected("SendAreas", "@editData.SendAreas", form, data.value)
                });
                form.on('select(SendAreasArea)', function (data) {
                    AreasAreaSelected("SendAreas", form)
                });
                setTimeout(function () {
                    AreasProvinceInit("SendAreas", "@(Html.Raw(editData.SendAreas))", form);
                    AreasProvinceSelected("SendAreas", "@(Html.Raw(editData.SendAreas))", form, $("#SendAreasProvince").val());
                    AreasCitySelected("SendAreas", "@(Html.Raw(editData.SendAreas))", form, $("#SendAreasCity").val());
                    AreasAreaSelected("SendAreas", form);
                }, 1000);

            });
        }


        //加载vue
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    areaList: @Html.Raw(editData.SeoDescription),
                    isFree: @(editData.IsFree == 1 ? "true" : "false"),
                };
            },
            mounted() {
                init_layui();
            },
            methods: {
                showTemplate() {
                },
            }
        });
    </script>
</body>
</html>