<!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">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <style type="text/css">
        .seach_items {
            float: right;
            margin-left: 10px;
        }
    </style>

</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" pad15>
            <div class="layui-row layui-col-space15">

                <div class="layui-col-md4">
                    <div class="LAY-btns" style="margin-bottom: 10px;">
                        <div class="layui-col-xs2">
                            <button class="layui-btn" id="level_add"><i
                                    class="layui-icon layui-icon-add-circle"></i>添加大类
                            </button>
                        </div>
                        <form class="layui-form" lay-filter="query-form-element1">
                            <div class="seach_items">
                                <button class="layui-btn" lay-submit lay-filter="query-form-element1"><i
                                        class="layui-icon layui-icon-search"></i>查询
                                </button>
                            </div>
                            <div class="seach_items">
                                <input type="text" name="name" autocomplete="off" class="layui-input"
                                       placeholder="大类名称"/>
                            </div>
                        </form>
                        <div style="clear: both;"></div>
                    </div>
                    <table class="layui-hide" id="level_datagrid" lay-filter="level-operate"></table>

                    <script type="text/html" id="level-operate-bar">
                        <div class="layui-btn-group">
                            <a class="layui-btn layui-btn-xs" lay-event="level_edit"
                            >修改</a>
                        </div>
                    </script>
                </div>

                <div class="layui-col-md4">
                    <div class="LAY-btns" style="margin-bottom: 10px;">
                        <div class="layui-col-xs2">
                            <button class="layui-btn" id="category_add"><i
                                    class="layui-icon layui-icon-add-circle"></i>添加品种
                            </button>
                        </div>

                        <form class="layui-form" lay-filter="query-form-element2">
                            <div class="seach_items">
                                <button class="layui-btn" lay-submit lay-filter="query-form-element2"><i
                                        class="layui-icon layui-icon-search"></i>查询
                                </button>
                            </div>
                            <div class="seach_items">
                                <input type="text" name="category_name" autocomplete="off" class="layui-input"
                                       placeholder="大类名称"/>
                            </div>
                        </form>
                        <div style="clear: both;"></div>
                    </div>

                    <table class="layui-hide" id="category_datagrid" lay-filter="category-operate"></table>

                    <script type="text/html" id="category-operate-bar">
                        <div class="layui-btn-group">
                            <a class="layui-btn layui-btn-xs" lay-event="category_edit"
                            >修改</a>
                        </div>
                    </script>
                </div>

                <div class="layui-col-md4">
                    <div class="LAY-btns" style="margin-bottom: 10px;">
                        <div class="layui-col-xs2">
                            <button class="layui-btn" id="subject_add"><i
                                    class="layui-icon layui-icon-add-circle"></i>添加科目
                            </button>
                        </div>

                        <form class="layui-form" lay-filter="query-form-element3">
                            <div class="seach_items">
                                <button class="layui-btn" lay-submit lay-filter="query-form-element3"><i
                                        class="layui-icon layui-icon-search"></i>查询
                                </button>
                            </div>
                            <div class="seach_items">
                                <input type="text" name="category_name" autocomplete="off" class="layui-input"
                                       placeholder="品种名称"/>
                            </div>
                        </form>
                        <div style="clear: both;"></div>
                    </div>

                    <table class="layui-hide" id="subject_datagrid" lay-filter="subject-operate"></table>

                    <script type="text/html" id="subject-operate-bar">
                        <div class="layui-btn-group">
                            <a class="layui-btn layui-btn-xs" lay-event="subject_edit"
                            >修改</a>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="id_level" style="display: none">
    <div class="layui-card-body" pad15>
        <form class="layui-form" lay-filter="form-level">
            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg6">
                    <label class="layui-form-label"><font color='red' size="4">*</font>大类名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入名称"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-col-lg6">
                    <label class="layui-form-label">是否在用：</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="enable" lay-skin="switch" lay-text="是|否" checked=""
                               value="1">
                    </div>
                </div>
                <div class="layui-form-item" style="text-align:right">
                    <button class="layui-btn" lay-submit id="level_btn" lay-filter="form-level"
                            style="display: none">保存
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="id_category" style="display: none">
    <div class="layui-card-body" pad15>
        <form class="layui-form" lay-filter="form-category">
            <div class="layui-row layui-col-space10 layui-form-item">
                <div>
                    <label class="layui-form-label"><font color='red' size="4">*</font>大类：</label>
                    <div class="layui-input-block">
                        <select id="id_category_select" name="category" lay-verify="required">
                        </select>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label"><font color='red' size="4">*</font>品种名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入名称"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div>
                    <label class="layui-form-label">首页显示：</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="home_show" lay-skin="switch" lay-text="是|否" checked=""
                               value="1">
                    </div>
                </div>

                <div>
                    <label class="layui-form-label">是否在用：</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="enable" lay-skin="switch" lay-text="是|否" checked=""
                               value="1">
                    </div>
                </div>
                <div class="layui-form-item" style="text-align:right">
                    <button class="layui-btn" lay-submit id="category_btn" lay-filter="form-category"
                            style="display: none">保存
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="id_subject" style="display: none">
    <div class="layui-card-body" pad15>
        <form class="layui-form" lay-filter="form-subject">
            <div class="layui-row layui-col-space10 layui-form-item">
                <div>
                    <label class="layui-form-label"><font color='red' size="4">*</font>品种：</label>
                    <div class="layui-input-block">
                        <select id="id_subject_select" name="category" lay-verify="required">
                        </select>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label"><font color='red' size="4">*</font>科目名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入名称"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div>
                    <label class="layui-form-label">是否在用：</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="enable" lay-skin="switch" lay-text="是|否" checked=""
                               value="1">
                    </div>
                </div>
                <div class="layui-form-item" style="text-align:right">
                    <button class="layui-btn" lay-submit id="subject_btn" lay-filter="form-subject"
                            style="display: none">保存
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="../../layuiadmin/layui/layui.js?t=1"></script>
<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form'], function () {
        var $ = layui.$;
        var table = layui.table
            , form = layui.form
            , admin = layui.admin;
        admin.req({
            url: '/option/get_category/',
            done: function (res) {
                var level = res.data.level;
                var level_node = $('#id_category_select');
                for (var i in level) {
                    var pid = level[i].id;
                    var value = level[i].value;
                    level_node.append("<option value='" + pid + "'>" + value + "</option>");
                }
                var category = res.data.category;
                var category_node = $('#id_subject_select');
                for (var i in category) {
                    var pid = category[i].id;
                    var value = category[i].value;
                    category_node.append("<option value='" + pid + "'>" + value + "</option>");
                }
                form.render();
            }
        });

        // 大类级别
        table.render({
            elem: '#level_datagrid'
            , url: '/option/category/?level=1'
            , cols: [[
                {field: 'name', title: '名称', width: 150}
                , {field: 'enable_text', title: '在用', width: 80}
                , {width: 110, align: 'center', fixed: 'right', toolbar: '#level-operate-bar'}
            ]]
            , page: true
            , height: 'full-108'
            , done: function () {
                layui.index.removeNoPermButtons()
            }
        });
        // 品种
        table.render({
            elem: '#category_datagrid'
            , url:  '/option/category/?level=2'
            , cols: [[
                {field: 'name', title: '名称', width: 150}
                , {field: 'category_text', title: '大类', width: 120}
                , {field: 'enable_text', title: '在用', width: 60}
                , {field: 'home_show_text', title: '首页显示', width: 100}
                , {width: 80, align: 'center', fixed: 'right', toolbar: '#category-operate-bar'}
            ]]
            , page: true
            , height: 'full-108'
            , done: function () {
                layui.index.removeNoPermButtons()
            }
        });
        // 科目
        table.render({
            elem: '#subject_datagrid'
            , url:  '/option/category/?level=3'
            , cols: [[
                {field: 'name', title: '名称', width: 150}
                , {field: 'category_text', title: '品种', width: 150}
                , {field: 'enable_text', title: '在用', width: 80}
                , {width: 110, align: 'center', fixed: 'right', toolbar: '#subject-operate-bar'}
            ]]
            , page: true
            , height: 'full-108'
            , done: function () {
                layui.index.removeNoPermButtons()
            }
        });

        var level_id = '', category_id = '', subject_id = ''
        //级别大类
        table.on('tool(level-operate)', function (obj) {
            // table.editdata = obj.data;
            form.val("form-level", obj.data);
            level_id = obj.data.id
            if (obj.event === 'level_edit') {
                layer.open({
                    type: 1,
                    title: '编辑大类',
                    area: ['40%', '60%'],
                    btn: ['保存', '取消'],
                    yes: function (index, dom) {
                        $('#level_btn').click();
                    },
                    btn2: function (index, layero) {
                        layer.close(index);//关闭当前按钮
                    },
                    content: $('#id_level')
                });
            }
        });
        form.on('submit(form-level)', function (data) {
            data.field.level = 1
            if (level_id) {
                var url = '/option/category/' + level_id + '/'
                var type = 'put'
            } else {
                var url = '/option/category/'
                var type = 'post'
            }
            admin.req({
                url: url
                , data: data.field
                , type: type
                , done: function (res) {
                    layer.closeAll();
                    table.reload('level_datagrid', {});
                }
            });
            return false;
        });
        //品种
        table.on('tool(category-operate)', function (obj) {
            form.val("form-category", obj.data);
            category_id = obj.data.id
            if (obj.event === 'category_edit') {
                layer.open({
                    type: 1,
                    title: '编辑品种',
                    area: ['40%', '60%'],
                    btn: ['保存', '取消'],
                    yes: function (index, dom) {
                        $('#category_btn').click();
                    },
                    btn2: function (index, layero) {
                        layer.close(index);//关闭当前按钮
                    },
                    content: $('#id_category')
                });
            }
        });
        form.on('submit(form-category)', function (data) {
            data.field.level = 2
            if (category_id) {
                var url = '/option/category/' + category_id + '/'
                var type = 'put'
            } else {
                var url = '/option/category/'
                var type = 'post'
            }
            admin.req({
                url: url
                , data: data.field
                , type: type
                , done: function (res) {
                    layer.closeAll();
                    table.reload('category_datagrid');
                }
            });
            return false;
        });
        // 科目
        table.on('tool(subject-operate)', function (obj) {
            form.val("form-subject", obj.data);
            subject_id = obj.data.id
            if (obj.event === 'subject_edit') {
                layer.open({
                    type: 1,
                    title: '编辑科目',
                    area: ['40%', '60%'],
                    btn: ['保存', '取消'],
                    yes: function (index, dom) {
                        $('#subject_btn').click();
                    },
                    btn2: function (index, layero) {
                        layer.close(index);//关闭当前按钮
                    },
                    content: $('#id_subject')
                });
            }
        });
        form.on('submit(form-subject)', function (data) {
            data.field.level = 3
            if (subject_id) {
                var url = '/option/category/' + subject_id + '/'
                var type = 'put'
            } else {
                var url = '/option/category/'
                var type = 'post'
            }
            admin.req({
                url: url
                , data: data.field
                , type: type
                , done: function (res) {
                    layer.closeAll();
                    table.reload('subject_datagrid', {});
                }
            });
            return false;
        });

        form.on('submit(query-form-element1)', function (data) {
            data.field.level=1
            table.reload('level_datagrid', {
                where: data.field
                , page: {curr: 1}
            });
            layer.closeAll();
            return false
        });

        form.on('submit(query-form-element2)', function (data) {
            data.field.level=2
            table.reload('category_datagrid', {
                where: data.field
                , page: {curr: 1}
            });
            layer.closeAll();
            return false
        });

        form.on('submit(query-form-element3)', function (data) {
            data.field.level=3
            table.reload('subject_datagrid', {
                where: data.field
                , page: {curr: 1}
            });
            layer.closeAll();
            return false
        });
        $('#level_add').on('click', function () {
            form.render(null, 'form-level');
            layer.open({
                type: 1,
                title: '编辑大类',
                area: ['40%', '60%'],
                btn: ['保存', '取消'],
                yes: function (index, dom) {
                    $('#level_btn').click();
                },
                btn2: function (index, layero) {
                    layer.close(index);//关闭当前按钮
                },
                content: $('#id_level')
            });
        });
        $('#category_add').on('click', function () {
            form.val('form-category', {});
            layer.open({
                type: 1,
                title: '添加品种',
                area: ['40%', '60%'],
                btn: ['保存', '取消'],
                yes: function (index, dom) {
                    $('#category_btn').click();
                },
                btn2: function (index, layero) {
                    layer.close(index);//关闭当前按钮
                },
                content: $('#id_category')
            });

        });
        $('#subject_add').on('click', function () {
            form.render(null, 'form-subject');
            layer.open({
                type: 1,
                title: '添加科目',
                area: ['40%', '60%'],
                btn: ['保存', '取消'],
                yes: function (index, dom) {
                    $('#subject_btn').click();
                },
                btn2: function (index, layero) {
                    layer.close(index);//关闭当前按钮
                },
                content: $('#id_subject')
            });

        });
    });

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