layui.use(['laytpl', 'table', 'jquery', 'form', 'miniTab', 'xmSelect', 'laydate'], function () {
    let $ = layui.jquery,
        table       = layui.table,
        xmSelect    = layui.xmSelect,
        miniTab     = layui.miniTab,
        laydate     = layui.laydate,
        form        = layui.form;
    /**** index begin ***/
    if ($('.location-index-page').length > 0) {
        miniTab.listen();
        let modifyUrl = $('#row-modify').data('url');

        // 渲染表格
        let listUrl = $('#table-container').data('url');
        let insTb = table.render({
            elem: '#table-container',
            title: 'SKU商品列表',
            defaultToolbar: ['filter', 'exports', {
                title: '搜索' //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                , layEvent: 'search'
                , icon: 'layui-icon-search'
            }],
            toolbar: '#toolbar-tpl',
            method: 'POST',
            url: listUrl,
            page: true,
            limit: 20,
            limits: [20,50,100,200,500,1000],
            request: {
                pageName: 'page',
                limitName: 'size',
            },
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            },
            cols: [[
                {type: 'checkbox'},
                {field: 'name', title: '商品名称', minWidth: 200},
                {field: 'activity_begin_at', title: '开始时间', minWidth: 150},
                {field: 'activity_end_at', title: '结束时间', minWidth: 150},
                {field: 'stock', title: '活动库存', minWidth: 100},
                // {field: 'amount', title: '成团订单数', minWidth: 100},
                // {field: 'amount', title: '成团人数', minWidth: 100},
                {field: 'status_text', title: '状态', width: 100},
                {templet: '#row-check', field: 'is_check', minWidth: 120,align: 'center', title: '商品审核'},
                {templet: '#row-operate', width: 350, title: '操作'}
            ]],
            done: function () {
                Tools.setInsTb(insTb);
            }
        });

        //监听工具条 注意区别toolbar和tool  toolbar是表头上的工具条 tool是行中的工具条
        table.on('toolbar(table-container)', function (obj) {
            let layEvent = obj.event;
            let insTb = Tools.getInsTb();
            let url = $($(this).context).data('href')
            let title = $($(this).context).data('title')
            let width = $($(this).context).data('width') ? $($(this).context).data('width') : '100%';
            let height = $($(this).context).data('height') ? $($(this).context).data('height') : '100%';

            let checkStatus = table.checkStatus('table-container');
            let selected = checkStatus.data;
            let ids = [];

            // debugger;
            switch (layEvent) {
                case 'check':
                    if (checkStatus.data.length <= 0) {
                        layer.msg('请先选择数据');
                        return false;
                    }

                    $.each(selected, function (index, val) {
                        ids.push(val.id);
                    })

                    if (ids.length > 500) {
                        layer.msg('一次操作请不要超过500条');
                        return false;
                    }

                    url += '?id=' + ids;
                    openLayer(url, title, width, height);
                    return false;
                // toolbar 删除
                case 'del':
                    if (checkStatus.data.length <= 0) {
                        layer.msg('请先选择数据');
                        return false;
                    }
                    // let selected = checkStatus.data;
                    // let ids = [];

                    $.each(selected, function (index, val) {
                        ids.push(val.id);
                    })
                    delRow(url, ids, insTb);
                    return false;
                // toolbar 立即结束
                case 'end':
                    if (checkStatus.data.length <= 0) {
                        layer.msg('请先选择数据');
                        return false;
                    }

                    $.each(selected, function (index, val) {
                        ids.push(val.id);
                    })
                    delRow(url, ids, insTb, '确认立即结束？');
                    return false;
                // toolbar 刷新
                case 'refresh':
                    refreshTab(insTb);
                    return false;
                // toolbar 搜索
                case 'search':
                    let search = $('.table-search-fieldset');
                    if (search.hasClass('div-show')) {
                        search.css('display', 'none').removeClass('div-show');
                    } else {
                        search.css('display', 'block').addClass('div-show');
                    }
                    return false;
                // 其他 默认为打开弹出层
                default:
                    if (layEvent !== 'LAYTABLE_COLS' && layEvent !== 'LAYTABLE_EXPORT') {
                        openLayer(url, title, width, height);
                        return false;
                    }
            }
        });

        //监听行工具条
        table.on('tool(table-container)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event;
            let url = $($(this).context).data('href');
            let title = $($(this).context).data('title');
            let width = $($(this).context).data('width') ? $($(this).context).data('width') : '100%';
            let height = $($(this).context).data('height') ? $($(this).context).data('height') : '100%';
            let insTb = Tools.getInsTb();

            switch (layEvent) {
                // 行 删除
                case 'del':
                    let ids = [data.id];
                    delRow(url, ids, insTb);
                    return false;
                // 复制小程序路径
                case 'path':
                    let path = $($(this).context).data('path');
                    let categoryId = $($(this).context).data('category');
                    // layer.msg('路径复制成功 '+ path + '?id='+data.id+'&category_id='+categoryId+'&is_activity=1');

                    new ClipboardJS('.clipboard-btn', {
                        text: function() {
                            return path + '?id='+data.id+'&category_id='+categoryId+'&is_activity=1';
                        }
                    });
                    layer.msg('路径复制成功！');
                    return false;
                //其他 默认为打开弹出层
                default:
                    openLayer(url, title, width, height);
                    return false;
            }
        });

        // switch变更
        function changeSwitch(filter) {
            form.on('switch(' + filter + ')', function (obj) {
                let val = obj.elem.checked ? 1 : 0;
                $.post(modifyUrl, {id: this.value, field: this.name, value: val}, function (res) {
                    layer.msg(res.msg)
                    if (res.code !== 0) {
                        //操作不成功则刷新页面
                        insTb.reload();
                    }
                })
            });
        }

        changeSwitch('changeCheck');//监听内容审核

        // 病种筛选
        let diseaseSearch  = $('#search-disease-list');
        let diseaseSearchJson = diseaseSearch.data('menu') ? diseaseSearch.data('menu') : [];
        xmSelect.render({
            el: '#search-disease-list',
            paging: false,
            autoRow: true,
            radio: true,
            clickClose: true,
            name: 'disease_id',
            tips: '请选择病种',
            direction: 'auto',
            height: 'auto',
            model: {
                icon: 'hidden',
            },
            prop: {
                name: 'name',
                value: 'id',
            },
            theme: {
                color: '#1e84ff',
            },
            tree: {
                show: true,
                showFolderIcon: true,
                showLine: true,
                indent: 20,
                expandedKeys: true,
                strict: false,
            },
            data: diseaseSearchJson,
        });

        table.on('edit(table-container)', function (obj) {
            let id = obj.data.id;
            $.ajax(modifyUrl, {
                data: {"id": id, "field": obj.field, "value": obj.value}
                ,dataType : 'json'
                ,type: 'POST'
            })
            .done(function (res) {
                if (res.code === 0) {
                    insTb.reload();
                }
            })
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            table.reload('table-container', {
                page: {curr: 1}
                , where: data.field
            }, 'data');

            return false;
        });

    }
    /*** index end ***/

    if ($('.location-operate-page').length > 0) {
        // 添加规格
        $('.panel-sku-add').on('click', function () {
            let panelNum = $('.panel-sku').length;
            let html = `
                <hr>
                <div class="panel-sku">
                    <div class="layui-inline">
                        <label class="layui-form-label required">商品规格</label>
                        <div class="layui-input-block">
                            <input type="text" name="sku[${panelNum}][title]" lay-verify="required" lay-reqtext="商品规格不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label required">活动库存</label>
                        <div class="layui-input-inline">
                            <input type="number" name="sku[${panelNum}][stock]" lay-verify="required" lay-reqtext="商品库存不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label required">商品原价</label>
                        <div class="layui-input-inline">
                            <input type="number" name="sku[${panelNum}][original_price]" lay-verify="required" lay-reqtext="商品原价不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label required">活动价</label>
                        <div class="layui-input-inline">
                            <input type="number" name="sku[${panelNum}][price]" lay-verify="required" lay-reqtext="商品价格不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">默认规格</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="sku[${panelNum}][is_default]" value="1" title="是">
                            <input type="radio" name="sku[${panelNum}][is_default]" value="0" title="否" checked="">
                        </div>
                    </div>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm panel-sku-del"><i class="fa fa-trash"></i></button>
                </div>
            `;
            $('.panel-sku-list').append(html);
            form.render('radio');
            panelNum++;
        });

        // 渲染规格列表
        function renderSku(data) {
                let html = '';
                $.each(data, function (index, item) {
                    let defaultHtml = `
                        <input type="radio" name="sku[${index}][is_default]" value="1" title="是">
                        <input type="radio" name="sku[${index}][is_default]" value="0" title="否" checked="">
                    `;
                    if (item.is_default === 1) {
                        defaultHtml = `
                        <input type="radio" name="sku[${index}][is_default]" value="1" title="是" checked="">
                        <input type="radio" name="sku[${index}][is_default]" value="0" title="否">
                    `;
                    }
                    html += `
                        <hr>
                        <div class="panel-sku">
                            <input type="hidden" name="sku[${index}][id]" value="${item.id}">
                            <div class="layui-inline">
                                <label class="layui-form-label required">商品规格</label>
                                <div class="layui-input-block">
                                    <input type="text" name="sku[${index}][title]" lay-verify="required" lay-reqtext="商品规格不能为空" value="${item.title}" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label required">活动库存</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="sku[${index}][stock]" lay-verify="required" lay-reqtext="商品库存不能为空" value="${item.stock}" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label required">商品原价</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="sku[${index}][original_price]" autocomplete="off" class="layui-input" value="${item.price}" disabled>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label required">活动价</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="sku[${index}][price]" lay-verify="required" lay-reqtext="活动价不能为空" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">默认规格</label>
                                <div class="layui-input-inline">
                                    ${defaultHtml}
                                </div>
                            </div>
                            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm panel-sku-del"><i class="fa fa-trash"></i></button>
                        </div>
                        `;

                    })
                $('.panel-sku-list').html(html);
                form.render('radio');
        }

        //删除规格
        $('body').on('click', '.panel-sku-del', function () {
            if ($('.panel-sku').length <= 1) {
                layer.msg('不能再删了，最少要有一个规格！');
                return false;
            }

            $(this).parents('.panel-sku').remove();
        })

        let spuEle  = $('#spu-list');
        let spuJson = spuEle.data('data') ? spuEle.data('data') : [];
        xmSelect.render({
            el: '#spu-list',
            paging: true,
            autoRow: true,
            radio: true,
            clickClose: true,
            name: 'spu_id',
            tips: '请选择商品',
            direction: 'auto',
            height: 'auto',
            model: {
                icon: 'hidden',
            },
            prop: {
                name: 'name',
                value: 'id',
            },
            tree: {
                show: true,
                strict: false,
                clickCheck: true,
                expandedKeys: true,
                clickExpand: false
            },
            theme: {
                color: '#1e84ff',
            },
            filterable: true,
            toolbar: {show: true},
            remoteSearch: true,
            data: spuJson,
            on: function (data) {
                //arr:  当前多选已选中的数据
                let arr = data.arr;
                //change, 此次选择变化的数据,数组
                let change = data.change;
                //isAdd, 此次操作是新增还是删除

                // 病种名称
                if (arr.length > 0) {
                    $.post('/manager/mall/spu/get-sku-list', {id: arr[0].id}, function (res) {
                        if (res.code === 0) {
                            renderSku(res.data);
                        }
                    });
                }
            },
            remoteMethod: function (val, cb, show) {
                $.post('/manager/mall/spu/get-spu-list', {keyword: val}, function (res) {
                    if (res.code === 0) {
                        cb(res.data.list, res.data.total);
                    }
                });
            },
        });

        laydate.render({
            elem: '#begin-at',
            type: 'datetime',
        });

        laydate.render({
            elem: '#end-at',
            type: 'datetime',
        });
    }

    if ($('.location-detail-page').length > 0) {
        miniTab.listen();

        //监听行工具条
        table.on('tool(table-container)', function (obj) {
            let layEvent = obj.event;
            let insTb = Tools.getInsTb();

            switch (layEvent) {
                // 行 删除
                case 'check-sku':
                    layer.confirm('本次操作将核销剩余所有数量，请确认操作', {icon: 3}, function(index) {
                        $.post('/manager/mall/order/check-sku', {coding: obj.data.coding, id:obj.data.id, num: obj.data.not_check_num}, function (res) {
                            layer.msg(res.msg);
                            if (res.code === 0) {
                                refreshTab(insTb);
                            }
                        });
                        layer.close(index)
                    })
                    return false;
                //其他 默认为打开弹出层
                default:
                    openLayer(url, title, width, height);
                    return false;
            }
        });

        // 渲染表格
        let listUrl = $('#table-container').data('url');
        let insTb = table.render({
            elem: '#table-container',
            toolbar: '#toolbar-tpl-detail',
            defaultToolbar: [],
            url: listUrl,
            method: 'post',
            even: true,
            limits: [10, 20, 50, 100, 200, 500, 1000, 2000],
            request: {
                pageName: 'page',
                limitName: 'size',
            },
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            },
            page: true,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'nickname', title: '昵称', minWidth: 150},
                {field: 'real_name', title: '真实姓名', minWidth: 150},
                {field: 'phone', title: '手机号', minWidth: 150},
                {field: 'created_at', title: '下单时间', minWidth: 180},
                {field: 'status_text', title: '订单状态', minWidth: 180},
                {field: 'num', title: '数量', minWidth: 165},
                // {minWidth: 100, fixed:'right', title: '操作', templet: '#child-row-operate'}
            ]],
            done: function () {
                Tools.setInsTb(insTb);
            }
        });

        // 渲染表格
        let groupListUrl = $('#table-container-group').data('url');
        let groupInsTb = table.render({
            elem: '#table-container-group',
            toolbar: '#toolbar-tpl-detail',
            defaultToolbar: [],
            url: groupListUrl,
            method: 'post',
            even: true,
            limits: [10, 20, 50, 100, 200, 500, 1000, 2000],
            request: {
                pageName: 'page',
                limitName: 'size',
            },
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            },
            page: true,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'nickname', title: '昵称', minWidth: 150},
                {field: 'real_name', title: '真实姓名', minWidth: 150},
                {field: 'phone', title: '手机号', minWidth: 150},
                {field: 'created_at', title: '下单时间', minWidth: 180},
                {field: 'status_text', title: '参团状态', minWidth: 180},
                {field: 'group_done_num', title: '成团人数', minWidth: 180},
                {field: 'is_virtual', title: '发起人是否虚拟', templet: function (d) {
                        return d.is_virtual === 1 ? '是' : '否';
                    }},
                // {minWidth: 100, fixed:'right', title: '操作', templet: '#child-row-operate'}
            ]],
            done: function () {
                Tools.setInsTb(groupInsTb);
            }
        });
    }


});