<script>
    layui.use(['table', 'form', 'element', 'layer', 'Split', 'admin', 'xmSelect'], function () {
        let $ = layui.jquery;
        let Split = layui.Split;
        // 水平分割,需要分割的元素(id)、默认大小(百分比)、最小值(单位px)
        Split(['#s1', '#s2', '#s3'], {sizes: [7, 12, 8], minSize: 70});
        let table = layui.table;
        let form = layui.form;
        let admin = layui.admin;
        let xmSelect = layui.xmSelect;
        let initCondition = {source_type: 'all'};
        let whereCondition = initCondition;
        let type = 'all';

        //点击罗盘筛选
        $('.main_filter').click(function () {
            $('.main_filter').attr('class', 'main_filter');
            $(this).attr('class', 'main_filter layui-badge layui-bg-green');
            type = $(this).attr('id');
            whereCondition.source_type = type
            console.log(whereCondition)
            table.reload('skuList', {
                page: {
                    curr: 1
                }
                , where: whereCondition
            });
            let buttonName = $(this).attr('id');
            if (buttonName === 'off_shelf') {
                //同时还要去联动下面的状态筛选
                let id = 'goods_status\\/condition';
                $('#' + id).val(3);
                form.render('select')
            }

        });

        @if (request()->get('search')==1)
        setTimeout(function () {
            $('#getSupplierListButton').click();
        }, 500);
        @endif

        let cols = [
            {type: 'checkbox'},
            {field: 'goods_id', title: 'SKUID', align: 'center', width: 180},
            {
                field: 'status_name', title: '状态', align: 'center', width: 70, templet: function (d) {
                    return d.goods_status == 1 ? "<a class='layui-btn layui-btn-xs'>上架</a>" :
                        "<a class='layui-btn layui-btn-xs layui-btn-danger'>下架</a>";
                }
            },
            {
                field: 'canal', title: '供应商编码', align: 'center', width: 120, templet: function (data) {
                    if (data.canal) {
                        let supplierId = data.canal.replace(/\D/g, '');
                        return "<a ew-href='/supplier/SupplierDetail?view=iframe&supplier_id=" + supplierId +
                            "' class='list-href' ew-title='供应商详情 - " + data.canal + "'>" + data.canal + "</a>";
                    } else {
                        return data.canal;
                    }
                }
            },
            {field: 'encoded_user_name', title: '内部采购', align: 'center', width: 100},
            {
                field: 'goods_name', title: '型号', align: 'center', width: 200, templet: function (data) {
                    return "<a href='{{config('website.FootstoneUrl')}}/web/sku/saveSku?goods_id=" + data.goods_id + "' style='color:blue' target='_blank'>"
                        + data.goods_name + "</href>"
                }
            },
            {
                field: 'brand_name', title: '品牌', align: 'center', width: 120
            },
            {field: 'stock', title: '库存数量', align: 'center', width: 80},
            {
                field: 'cn_price', title: '人民币成本价(¥)', align: 'left', width: 150, templet: function (data) {
                    if (data.ladder_price) {
                        let ladder = data.ladder_price[data.ladder_price.length - 1];
                        if (ladder) {
                            return '<div  class="view_ladder_price_cn layui-row"><div class="layui-col-xs5"><span>'+ (ladder.purchases)  + '+</span></div><div class="layui-col-xs7"><span>¥' + (ladder.price_cn) + '</span></div></div>';
                        }else{
                            return '';
                        }

                    }
                    return '';
                }
            },
            {
                field: 'us_price', title: '美金成本价($)', align: 'left', width: 150, templet: function (data) {
                    if (data.ladder_price) {
                        let ladder = data.ladder_price[data.ladder_price.length - 1];
                        if (ladder.hasOwnProperty('price_us')) {
                            return '<div  class="view_ladder_price_us layui-row""><div class="layui-col-xs5"><span>'+ (ladder.purchases)  + '+</span></div><div class="layui-col-xs7"><span>$' + (ladder.price_us) + '</span></div></div>';
                        }

                    }
                    return '';
                }
            },
            {field: 'mpq', title: '标准包装量', align: 'center', width: 120},
            {
                field: 'multiple', title: '递增量', align: 'center', width: 90, templet: function (d) {
                    return d.multiple ? d.multiple : 0;
                }
            },
            {field: 'encap', title: '封装', align: 'center', width: 80},
            {field: 'batch_sn', title: '批次', align: 'center', width: 80},
            {field: 'goods_label_name', title: 'SKU显示类型', align: 'center', width: 120},
            {field: 'cn_delivery_time', title: '大陆交期', align: 'center', width: 100},
            {field: 'hk_delivery_time', title: '香港交期', align: 'center', width: 100},
            {
                field: 'is_prefer', title: '精选', align: 'center', width: 70, templet: function (d) {
                    return d.is_prefer ? "是" : "否";
                }
            },
            {
                field: 'sku_tags', title: '标签', align: 'center', width: 150, templet: function (data) {
                    if (data.invalid_sku_tags) {
                        return `<span>${data.valid_sku_tags}</span>` + ` <span style="color: #D7D7D7">${data.invalid_sku_tags}</span>`;
                    } else {
                        return `<span>${data.valid_sku_tags}</span>`
                    }
                }
            },
            {
                field: 'source_name', title: '接入方式', align: 'center', width: 150
            },
            {field: 'audit_user', title: '审核人', align: 'center', width: 100},
            {field: 'update_time', title: '最近修改时间', align: 'center', width: 150},
            {field: 'audit_time', title: '审核时间', align: 'center', width: 150},
            {field: 'cp_time', title: '上架有效期', align: 'center', width: 180},
        ];
        let currentPage = 0;
        table.render({
            elem: '#skuList'
            , url: '/api/sku/GetSkuList'
            , method: 'post'
            , size: 'sm'
            , limit: 20
            , cellMinWidth: 50 //全局定义常规单元格的最小宽度
            , where: whereCondition
            , loading: true
            , first: true //不显示首页
            , last: false //不显示尾页
            , cols: [cols]
            , id: 'skuList'
            , page: {}
            , done: function (res, curr, count) {
                currentPage = curr;
            }
        });

        //渲染多选
        let brandSelect = xmSelect.render({
            el: '#brandSelect',
            name: 'brand_id',
            searchTips: '请输入要查找的制造商',
            paging: true,
            empty: '没有查找到数据',
            prop: {
                name: 'brand_name',
                value: 'brand_id'
            },
            height: "1300px",
            remoteSearch: true,
            autoRow: true,
            pageRemote: true,
            filterable: true,
            remoteMethod: function (val, cb, show, pageIndex) {
                //val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页
                $.ajax({
                    url: '/api/common/SearchBrand',
                    type: 'post',
                    data: {
                        brand_ids: $('#brand_ids').val(),
                        brand_name: val,
                        page: pageIndex
                    },
                    dataType: 'json',
                    timeout: 10000,
                    success: function (res) {
                        if (!res) return layer.msg('网络错误,请重试', {icon: 5});
                        if (res.errcode === 0) {
                            cb(res.data, res.last_page);
                        } else {
                            layer.msg(res.errmsg, {icon: 6});
                        }
                    },
                    error: function () {
                        return layer.msg('网络错误,请重试', {icon: 5});
                    }
                });
            },
            on: function (data) {
                let brandIds = '';
                for (let x in data.arr)  // x 为属性名
                {
                    brandIds = brandIds + data.arr[x].brand_id + ',';
                }
                $("#brand_id_condition").val(brandIds);
            }
        });
        brandSelect.setValue(JSON.parse($('#brand_id_condition').attr('select_value')));

        //批量上架
        $("#batch_putaway").click(function () {
            let checkStatus = table.checkStatus('skuList');
            let data = checkStatus.data;
            let skuIds = [];
            $.each(data, function (index, value) {
                skuIds.push(value.goods_id);
            });
            if (skuIds.length === 0) {
                layer.msg('请选择要操作的sku', {icon: 5});
                return;
            }
            batchUpdateGoodsStatus(skuIds, 'passed');
        })

        //批量下架
        $("#batch_off_shelf").click(function () {
            let checkStatus = table.checkStatus('skuList');
            let data = checkStatus.data;
            let skuIds = [];
            $.each(data, function (index, value) {
                skuIds.push(value.goods_id);
            });
            if (skuIds.length === 0) {
                layer.msg('请选择要操作的sku', {icon: 5});
                return;
            }
            batchUpdateGoodsStatus(skuIds, 'offshelf');
        })

        //批量下架
        $("#set_prefer").click(function () {
            let checkStatus = table.checkStatus('skuList');
            let data = checkStatus.data;
            let skuIds = [];
            $.each(data, function (index, value) {
                skuIds.push(value.goods_id);
            });
            if (skuIds.length === 0) {
                layer.msg('请选择要操作的sku', {icon: 5});
                return;
            }
            batchSetSkuPrefer(skuIds, 'set_prefer');
        })

        //批量下架
        $("#cancel_set_prefer").click(function () {
            let checkStatus = table.checkStatus('skuList');
            let data = checkStatus.data;
            let skuIds = [];
            $.each(data, function (index, value) {
                skuIds.push(value.goods_id);
            });
            if (skuIds.length === 0) {
                layer.msg('请选择要操作的sku', {icon: 5});
                return;
            }
            batchSetSkuPrefer(skuIds, 'cancel_set_prefer');
        })

        //根据供应商编码已经品牌等去基石调用接口下架
        $("#remote_batch_off_shelf").click(function () {
            layer.open({
                type: 2,
                content: '/sku/BatchOffShelf?view=iframe',
                area: ['800px', '600px'],
                title: '批量下架SKU',
                end: function () {
                    table.reload('skuList');
                    // supplierStatistics();
                }
            });
        });

        //批量修改内部编码
        $("#batch_update_encoded").click(function () {
            layer.open({
                type: 2,
                content: '/sku/BatchUpdateEncoded?view=iframe',
                area: ['800px', '600px'],
                title: '批量修改内部编码',
                end: function () {
                    table.reload('skuList');
                    // supplierStatistics();
                }
            });
        });

        $('#sync_erp_rate').click(function () {
            $.ajax({
                type: 'post',
                url: '/api/sku/syncErpRate',
                timeout: 30000, //超时时间设置,单位毫秒
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    if (res.err_code === 0) {
                        layer.msg(res.err_msg, {icon: 6});
                    } else {
                        layer.msg(res.err_msg, {icon: 5});
                        return false;
                    }
                }
            });
        });

        //批量上下架操作
        function batchUpdateGoodsStatus(skuIds, status) {
            let statusName = status === 'offshelf' ? '下架' : '上架';
            let operateType = status === 'offshelf' ? '-1' : '1';
            if (status !== 'offshelf') {
                layer.open({
                    type: 2,
                    area: ['600px', '500px'],
                    offset: '100px',
                    fixed: false, //不固定
                    maxmin: true,
                    content: '/sku/BatchUpdateSkuStatus?view=iframe&sku_ids=' + skuIds + '&operate_type=' + operateType,
                    title: statusName + '商品',
                    end: function () {
                        table.reload('skuList', {
                            page: {
                                curr: currentPage
                            },
                        });
                    }
                });
            } else {
                layer.confirm('确定要下架选中的商品吗', function (index) {
                    $.ajax({
                        type: 'post',
                        url: '/api/sku/batchUpdateSkuStatus',
                        timeout: 30000, //超时时间设置,单位毫秒
                        data: {
                            'sku_ids': skuIds.join(','),
                            'operate_type': -1,
                        },
                        dataType: 'json',
                        success: function (res) {
                            console.log(res);
                            if (res.err_code === 0) {
                                layer.msg(res.err_msg, {icon: 6});
                                table.reload('skuList', {
                                    page: {
                                        curr: currentPage
                                    },
                                });
                            } else {
                                layer.msg(res.err_msg, {icon: 5});
                                return false;
                            }
                        }
                    });
                });

            }

        }

        //批量设置精选
        function batchSetSkuPrefer(skuId, isPrefer) {
            let label = isPrefer === 'set_prefer' ? '设置精选' : '取消设置精选';
            let prefer = isPrefer === 'set_prefer' ? 1 : -1;
            layer.confirm('确定要将选中的这些商品' + label + '吗', function (index) {
                $.ajax({
                    type: 'post',
                    url: '/api/sku/SetPreferSku',
                    timeout: 30000, //超时时间设置,单位毫秒
                    data: {
                        sku_id: skuId,
                        prefer: prefer
                    },
                    dataType: 'json',
                    success: function (resp) {
                        close();
                        if (!resp) {
                            layer.msg('网络连接失败', {icon: 5});
                            return false;
                        }
                        if (resp.err_code === 0) {
                            layer.msg('操作成功', {icon: 6});
                            table.reload('skuList', {
                                page: {
                                    curr: currentPage
                                },
                            });
                        } else {
                            return false;
                        }
                    }
                });
                layer.closeAll();
            });
        }

        form.on('submit(load)', function (data) {
            $('.main_filter').attr('class', 'main_filter');
            $('#all').attr('class', 'main_filter layui-badge layui-bg-green');
            initCondition.source_type = 'all';
            whereCondition = $.extend(false, initCondition, data.field);
            //执行重载
            table.reload('skuList', {
                page: {
                    curr: 1
                }
                , where: whereCondition
            });
            supplierStatistics();
            return false;
        });

        form.on('submit(reset)', function (data) {
            layer.load(1);
            location.reload();
        });

        $("#set_sku_tag").click(function () {
            let checkStatus = table.checkStatus('skuList');
            let data = checkStatus.data;
            let skuIds = Array.from(data, ({goods_id}) => goods_id);
            skuIds = skuIds.join(',');
            layer.open({
                type: 2,
                content: '/sku/BatchAddSkuTag?view=iframe&sku_ids=' + skuIds,
                area: ['800px', '600px'],
                title: '批量设置SKU标签',
                end: function () {
                    table.reload('skuList');
                    // supplierStatistics();
                }
            });
        });

        $("#set_sku_cp_time_ruler").click(function () {
            layer.open({
                type: 2,
                content: '/sku/SetSupplierSkuCpTimeLimit?view=iframe',
                area: ['800px', '600px'],
                title: '商品有效期配置',
                end: function () {
                }
            });
        });


        //划过显示成本价格
        let ladderPriceTipsVal = '';
        $(document).on('mouseenter', '.view_ladder_price_cn', function () {
            let self = this;
            let rowIndex = $(this).parent().parent().parent().attr('data-index');
            let data = table.cache['skuList'][rowIndex].ladder_price;
            console.log(data)
            if (!data) {
                return false;
            }
            let htmlArr = [];
            let color = 'green';
            if (data.length > 0) {
                htmlArr.push('<table class="layui-table table-status"><thead>' +
                    '<tr><th style="text-align: center">数量</th>' +
                    '<th style="text-align: center">人民币成本价(¥)</th>' +
                    '</tr></thead><tbody>')
                for (let i = 0; i < data.length; i++) {
                    htmlArr.push(
                        '<tr>' +
                        '  <td style="text-align: center">' + data[i].purchases + '+</td>' +
                        '  <td style="text-align: center">' + (data[i].price_cn ? data[i].price_cn : '') + '</td>' +
                        '</tr>');
                }
                htmlArr.push('</tbody></table>')
                ladderPriceTipsVal = layer.tips(htmlArr.join(''), self, {
                    tips: [3, "#009688"],
                    time: 1000000,
                    area: ['250px', 'auto'],
                    skin: 'custom'
                });
            }
        }).on('mouseleave', '.view_ladder_price_cn', function () {
            layer.close(ladderPriceTipsVal);
        });

        let ladderPriceTipsValUs = '';
        $(document).on('mouseenter', '.view_ladder_price_us', function () {
            let self = this;
            let rowIndex = $(this).parent().parent().parent().attr('data-index');
            let data = table.cache['skuList'][rowIndex].ladder_price;
            console.log(data)
            if (!data) {
                return false;
            }
            let htmlArr = [];
            let color = 'green';
            if (data.length > 0) {
                htmlArr.push('<table class="layui-table table-status"><thead>' +
                    '<tr><th style="text-align: center">数量</th>' +
                    '<th style="text-align: center">美金成本价($)</th>' +
                    '</tr></thead><tbody>')
                for (let i = 0; i < data.length; i++) {
                    htmlArr.push(
                        '<tr>' +
                        '  <td style="text-align: center">' + data[i].purchases + '+</td>' +
                        '  <td style="text-align: center">' + (data[i].price_us ? data[i].price_us : '') + '</td>' +
                        '</tr>');
                }
                htmlArr.push('</tbody></table>')
                ladderPriceTipsValUs = layer.tips(htmlArr.join(''), self, {
                    tips: [3, "#009688"],
                    time: 1000000,
                    area: ['250px', 'auto'],
                    skin: 'custom'
                });
            }
        }).on('mouseleave', '.view_ladder_price_us', function () {
            layer.close(ladderPriceTipsValUs);
        });
    });
</script>