<!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]),// spuId storeId
                storeId: unescape(r2[2]),
                spuId: unescape(r3[2])
            };
            let datas = [];
            $.ajax({
                url: '/goblin/marketing/zhengzai/sku?marketId=' + unescape(r[2])+ '&storeId=' + unescape(r2[2]) + '&spuId=' + unescape(r3[2]),
                type: 'get',
                // contentType: 'application/json',
                success: function(res) {
                    console.log(params)
                    let column = [
                        // {
                        //     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: 'price',
                            title: '原价',
                            width: '100',
                            align: 'center'
                        },
                        {
                            field: 'bindType',
                            title: '其他活动占用库存',
                            width: '120',
                            align: 'center'
                        },
                        {
                            field: 'bindType',
                            // title: `线下售价<a onclick="setPrice(1)">批量</a>`,
                            title: `线下售价`,
                            width: '150',
                            align: 'center'
                        },
                        {
                            field: 'buyLimit',
                            // title: '库存限量<a onclick="setPrice(2)">批量</a>',
                            title: '库存限量',
                            width: '150',
                            align: 'center'
                        },
                        {
                            field: 'buyRoster',
                            // title: '用户限购<a onclick="setPrice(3)">批量</a>',
                            title: '用户限购',
                            width: '150',
                            align: 'center',
                            formatter: function (value, row) {

                            }
                        },
                        {
                            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'
                            }
                            columnsData.forEach((item,index) => {
                                obj.field = 'specVname'+index+'';
                                obj.title = item.specName;
                                column.unshift({...obj})
                            })
                        }
                        datas = data.map(item => {
                            item.skuSpecList.forEach((d,i) => [
                                item['specVname'+i+''] = d.specVname
                            ])
                            return item
                        })
                        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: column
                        };
                        console.log(options)
                        $.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>