<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('设置商品规则')" />
	<th:block th:include="include :: bootstrap-editable-css" />
    <style>
        .fixed-table-toolbar {
            height: 42px;
        }
    </style>
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">
			<div class="col-sm-12 select-table table-striped">
				<table id="setTable"></table>
                <div class="popover fade top in editable-container editable-popup" role="tooltip" id="setAll" style="top: 10px;">
                    <div class="arrow" style="left: 50%;"></div>
                    <div class="popover-content">
                        <div>
                            <div class="editableform-loading" style="display: none;"></div>
                            <form class="form-inline editableform" style="">
                                <div class="control-group form-group">
                                    <div>
                                        <div class="editable-input" style="position: relative;">
                                            <input id="setIpt" type="text" class="form-control input-sm" style="padding-right: 24px;">
                                            <span class="editable-clear-x"></span>
                                        </div>
                                        <div class="editable-buttons">
                                            <button type="button" class="btn btn-primary btn-sm" onclick="set()">
                                                <i class="glyphicon glyphicon-ok"></i>
                                            </button>
                                            <button type="button" class="btn btn-default btn-sm" onclick="closeIpt()">
                                                <i class="glyphicon glyphicon-remove"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="editable-error-block help-block" style="display: none;"></div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
			</div>
		</div>
	</div>
	
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: bootstrap-table-editable-js" />
	
    <script th:inline="javascript">
        var dicCouponBusiType = [[${@dict.getType('zhengzai_coupon_busi_type')}]];
        var dicCouponBindType = [[${@dict.getType('zhengzai_coupon_bind_type')}]];
        var platformUrl = [[${platformUrl}]];
        var prefix = ctx + "candy/coupon/mgt";
        var prefix2 = ctx + "local";

        var viewMgtCouponFlag = [[${@permission.hasPermi('candy:coupon:mgt:detail')}]];
        var cancelMgtCouponFlag = [[${@permission.hasPermi('candy:coupon:mgt:cancel')}]];
        var pickNumber = 0;
        var couType = [[${couType}]];
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1', //指定元素
                type: 'datetime'
            });
        });
        $(function () {
            let marketId = 'marketId';
            let storeId = 'storeId';
            let marketSpuId = 'marketSpuId';
            var reg = new RegExp("(^|&)"+ marketId +"=([^&]*)(&|$)");
            var reg2 = new RegExp("(^|&)"+ storeId +"=([^&]*)(&|$)");
            var reg3 = new RegExp("(^|&)"+ marketSpuId +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            var r2 = window.location.search.substr(1).match(reg2);
            var r3 = window.location.search.substr(1).match(reg3);
            let params = {
                marketId: unescape(r[2]),
                storeId: unescape(r2[2]),
                marketSpuId: unescape(r3[2])
            };
            let datas = [];
            $.ajax({
                url: '/goblin/marketing/zhengzai/sku',
                type: 'post',
                data: params,
                success: function(res) {
                    console.log(params)
                    var options = {
                        id: 'setTable',
                        // url: '/goblin/marketing/zhengzai/sku',
                        createUrl: prefix2 + "/addNewActivity",
                        detailUrl: prefix2 + "/addNewActivity?id={id}",
                        removeUrl: prefix + "/cancel/{id}",
                        openTab: prefix2 + "/activityStoreList/id={id}",
                        // exportUrl: prefix + "/export",
                        sortName: "createdAt",
                        sortOrder: "desc",
                        modalName: "活动",
                        showSearch: false,
                        showRefresh: false,
                        showColumns: false,
                        showToggle: false,
                        pagination: false,
                        data: datas,
                        columns: [
                            // {
                            //     field: 'valFace',
                            //     title: '颜色',
                            //     width: '100',
                            //     align: 'center',
                            //     formatter: function(value) {
                            //         return '七彩湛蓝色'
                            //     }
                            // },
                            // {
                            //     field: 'bindType',
                            //     title: '尺寸',
                            //     align: 'center',
                            //     formatter: function(value, row, index) {
                            //         // $('.pull-right').hide()
                            //         return 'XXXL'
                            //     },
                            //     width: '80'
                            // },
                            {
                                field: 'bindType',
                                title: '原价',
                                width: '100',
                                align: 'center',
                                formatter: function(value, row, index) {
                                    return '299999999'
                                }
                            },
                            {
                                field: 'bindType',
                                title: '其他活动占用库存',
                                width: '120',
                                align: 'center',
                                formatter: function(value, row, index) {
                                    return '2021'
                                }
                            },
                            {
                                field: 'bindType',
                                title: `线下售价<a onclick="setPrice(1)">批量</a>`,
                                width: '150',
                                align: 'center',
                                formatter: function(value, row, index) {
                                    return `<input id="price${index}" class='form-control' type='text' name='' value=''>`
                                }
                            },
                            {
                                field: 'bindType',
                                title: '库存限量<a onclick="setPrice(2)">批量</a>',
                                width: '150',
                                align: 'center',
                                formatter: function(value, row, index) {
                                    return `<input id="goodsNum${index}" class='form-control' type='text' name='' value=''>`
                                }
                            },
                            {
                                field: 'bindType',
                                title: '用户限购<a onclick="setPrice(3)">批量</a>',
                                width: '150',
                                align: 'center',
                                formatter: function(value, row, index) {
                                    return `<input id="purchasing${index}" class='form-control' type='text' name='' value=''>`
                                }
                            },
                            {
                                title: '购买条件',
                                align: 'center',
                                align: 'center',
                                formatter: function (value, row, index) {
                                    return `<div style="display:flex;">
                                        <label style="margin-right:12px;">
                                            <input type="radio" checked value="1" id="optionsRadios1" name="optionsRadios${index}"><span>全部用户</span></label>
                                        <label style="margin-right:12px;">
                                            <input type="radio" value="2" id="optionsRadios1" name="optionsRadios${index}"><span>仅支持会员购买</span></label>
                                        <label style="margin-right:12px;">
                                            <input type="radio" value="3" id="optionsRadios1" name="optionsRadios${index}"><span>指定用户购买</span></label>
                                        </div>`
                                }
                            }]
                    };
                    if (res.code == 0) {
                        let { data } = res;
                        let columnsData = data[0].skuSpecList
                        if (columnsData && columnsData.length > 0) {
                            let obj = {
                                field: '',
                                title: '',
                                align: 'center',
                                formatter: function(value, row) {
                                    return '七彩湛蓝色'
                                }
                            }
                            columnsData.forEach((item,index) => {
                                obj.field = 'specVname'+index+'';
                                obj.title = item.specName;
                                options.columns.unshift(obj)
                            })
                        }
                        datas = data.map(item => {
                            item.skuSpecList.forEach((d,i) => [
                                item['specVname'+index+''] = d.specName
                            ])
                            return item
                        })
                    }
                    $.table.init(options);
                }
            })
            return
            
        });
        function setPrice (num) {
            pickNumber = num;
            let ipt = $("#setAll");
            $("#setAll input").val('');
            switch (num) {
                case 1:
                    ipt.css('left', '376px');
                    break;
                case 2:
                    ipt.css('left', '526px');
                    break;
                default:
                    ipt.css('left', '676px');
            }
            ipt.show();
        }
        function set () {
            var data = $("#" + table.options.id).bootstrapTable('getData');
            let iptValue = $("#setIpt").val();
            switch (pickNumber) {
                case 1:
                    data.forEach((item, index) => {
                        $("#price"+index+"").val(iptValue)
                    })
                    break;
                case 2:
                    data.forEach((item, index) => {
                        $("#goodsNum"+index+"").val(iptValue)
                    })
                    break;
                default:
                    data.forEach((item, index) => {
                        $("#purchasing"+index+"").val(iptValue)
                    })
            }
            $("#setAll").hide();
        }
        function closeIpt () {
            $("#setAll").hide();
        }
        function submitHandler() {
			var data = $("#" + table.options.id).bootstrapTable('getData');
            console.log(data, 'data')
		}
        /* 查询表格所有数据值 */
        function getData(){
        	var data = $("#" + table.options.id).bootstrapTable('getData');
            alert(JSON.stringify(data))
        }
        
        /* 查询表格选择行数据值 */
        function getSelections(){
        	var data = $("#" + table.options.id).bootstrapTable('getSelections');
        	alert(JSON.stringify(data))
        }
    </script>
</body>
</html>