<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('店铺活动详情')" />
    <th:block th:include="include :: select2-css" />
    <link rel="stylesheet" href="">
    <style>
        
        .required {
            font-style: normal;
            color: red;
        }
        .content_item {
            padding: 20px;
        }
        /* .content_item .content_title {
            display: flex;
        } */
        .content_item .content_title h3 span {
            display: inline-block;
            width: 4px;
            height: 18px;
            background: skyblue;
            margin-right: 6px;
            vertical-align: top;
        }
        .content_item .content_store_name, .content_item .content_papers_type {
            display: flex;
            align-items: center;
            height: 56px;
            font-size: 16px;
            padding-left: 12px;
            
        }
        .content_item .content_store_name input {
            margin-left: 12px;
        }
        /* .content_item .content_store_name span {
            display: inline-block;
            width: 150px;
            text-align: right;
        } */
        .content_store_logo, .content_store_introduce {
            font-size: 16px;
            padding-left: 12px;
            margin-top: 20px;
        }
        .content_store_logo span, .content_store_introduce span {
            font-size: 16px;
            display: inline-block;
            margin-right: 12px;
            width: 150px;
            text-align: right;
            vertical-align: top;
        }
        .content_store_logo img {
            border: 1px #ccc dashed;
            padding: 5px;
            vertical-align: top;
            border-radius: 5px;
        }
        .content_store_introduce textarea {
            display: inline-block;
            width: 80%;
            height: 200px;
        }
        .content_papers_photo {
            display: flex;
            padding-left: 12px;
            margin: 20px 0;
        }
        .content_papers_photo .photo_content {
            display: flex;
            flex: 1;
        }
        .content_papers_photo .photo_content div {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 150px;
        }
        .content_papers_photo .photo_content div p {
            font-size: 14px;
        }
        .content_papers_photo .photo_content div img {
            padding: 6px;
            border: 1px dashed #ccc;
            border-radius: 5px;
        }
        .content_store_name p {
            margin: 0;
        }
        .content_papers_photo span {
            font-size: 16px;
            vertical-align: top;
            margin-right: 12px;
            width: 150px;
            text-align: right;
        }
        .content_footer {
            display: flex;
            align-items: center;
            padding: 20px 0 20px 186px;
        }
        .content_footer input {
            width: 60%;
            height: 34px;
        }
        .content_store_name label {
            margin: 0;
            font-size: 14px;
            display: flex;
        }
        .content_store_name label input {
            margin-right: 4px;
        }
        .goodsTable {
            padding: 0 12px 20px;
        }
    </style>
</head>
<body>
<form id=""  class="layui-form">
    <div class="content_item">
        <div class="content_title">
            <h3><span></span>基础信息</h3>
        </div>
        <div class="content_store_name">
            <span>项目名称：</span><p id="titleName">2022北京草莓音乐节</p>
        </div>
        
        <div class="content_store_name">
            <span>有效期：</span><p id="time"></p>
        </div>
        <input type="hidden" name="storeId" id="storeId">
        <input type="hidden" name="marketId" id="marketId">
    </div>
    <div class="content_item">
        <div class="content_title">
            <h3><span></span>认证信息</h3>
        </div>
        <!-- <div class="content_store_name"> -->
            <!-- <span><em class="required">*</em>证件类型：</span>
            <label>
                <input type="radio" checked value="1" id="optionsRadios1" name="optionsRadios"><span>全部商品</span></label>
            <label>
                <input type="radio" value="2" id="optionsRadios1" name="optionsRadios"><span>部分商品参与</span></label>
            <label>
                <input type="radio" value="3" id="optionsRadios1" name="optionsRadios"><span>部分商品不参与</span></label> -->
        <!-- </div> -->
        <div class="goodsTable">
            <!-- <div class="selectGoods">
                <button type="button" class="btn btn-warning" onclick="selectGoodsTab()">选择商品</button>
            </div> -->
            <div class="goodsList select-table table-striped" style="padding: 0 12px;">
                <table id="tabList"></table>
            </div>
        </div>
        
    </div>
    <div class="content_footer">
        <button class="btn btn-primary">保存</button>
        <button class="btn" style="margin: 0 12px">取消</button>
    </div>
</form>
<th:block th:include="include :: footer" />
</body>
<script th:inline="javascript">
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    $(function () {
        let name = 'storeId';
        let time = 'time';
        let marketId = 'marketId';
        let activityName = 'activityName';
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var reg2 = new RegExp("(^|&)"+ time +"=([^&]*)(&|$)");
        var reg3 = new RegExp("(^|&)"+ marketId +"=([^&]*)(&|$)");
        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);
        $("#time").html(unescape(r2[2]));
        $("#titleName").text(getQueryVariable(activityName));
        $("#storeId").val(unescape(r[2]));
        $("#marketId").val(unescape(r3[2]));
        let data = {
            marketId: unescape(r3[2]),
            storeId: unescape(r[2]),
            // pageSize: 10,
            pageNum: 1
        }
        $.ajax({
            url: '/goblin/marketing/zhengzai/spu',
            type: 'post',
            data,
            success:function(res) {
                // let data = [
                //     {
                //     "marketSpuId": "string",
                //     "coverPic": "https://img.zhengzai.tv/other/2021/12/09/dd3259aaa66e4c3995ce2ab0ce38856c.png",
                //     "name": "这是一个名字这是一个名字这是一个名字",
                //     "priceGe": 2,
                //     "priceLe": 10
                //     }
                // ]
                var options = {
                    id: 'tabList',
                    // url: '/goblin/marketing/zhengzai/spu',
                    createUrl: prefix2 + "/addNewActivity",
                    detailUrl: prefix2 + "/storeDetail?id={id}",
                    // exportUrl: prefix + "/export",
                    onCheck: onCheck,
                    showSearch: false,
                    showRefresh: false,
                    showColumns: false,
                    showToggle: false,
                    data: res.data,
                    columns: [
                        {
                            field: 'name',
                            title: '商品',
                            width: '400',
                            formatter:function (value, row, index) {
                                let str = `<div class="titleBox" style="display:flex;align-items:center;">
                                    <img src="${row.coverPic}" alt="" style="height:60px">
                                    <div class="titleData">
                                        <p style="margin:0">${value}</p>
                                        <p style="margin:0">￥${row.priceGe} - ￥${row.priceLe}</p>
                                    </div>
                                </div>`
                                return str;
                            }
                        },
                        {
                            field: 'valFace',
                            title: '线下售价',
                            // formatter: function (value, row, index) {
                            //     let btns = [];
                            //     if (index % 2 == 0) {
                            //         btns.push(`<a class="" href="javascript:;" onclick="setGoodsRole()">设置商品规则</a>`)
                            //     } else {
                            //         btns.push(`<span class="" href="javascript:;" onclick="$.operate.detailTab('${row.itemId}', 7, '确定下架此商品吗？')">已设置商品规则</span>
                            //         <a class="" href="javascript:;" style="margin-left:12px" onclick="$.operate.detailTab('${row.itemId}', 7, '确定下架此商品吗？')">修改</a>`)
                            //     }
                            //     return btns.join('')
                            // }
                            formatter: function(value, row, index) {
                                return `<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="setGoodsRole('${$("#marketId").val()}', '${$("#storeId").val()}', '${row.marketSpuId}')">查看</a>`
                            }
                        },
                        {
                            title: '操作',
                            align: 'center',
                            formatter: function (value, row, index) {
                                return `<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="delItem('${$("#marketId").val()}', '${$("#storeId").val()}', '${row.marketSpuId}')">删除</a>`
                            }
                        }]
                };
                console.log(options, 'options')
                $.table.init(options);
            }
        })
    });
    var dicCouponBusiType = [[${@dict.getType('zhengzai_coupon_busi_type')}]];
    var dicCouponBindType = [[${@dict.getType('zhengzai_coupon_bind_type')}]];
    var prefix = ctx + "candy/coupon/mgt";
    var prefix2 = ctx + "local";
    function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    function setGoodsRole (marketId, storeId, marketSpuId) {
        let url = prefix2 + '/setGoodsRole?marketId=' + marketId + '&storeId=' + storeId + '&marketSpuId=' + marketSpuId;
        console.log(url)
        $.modal.open("标题内容", url, '1280', '680');
    }
    function onCheck (row, $element) {
        console.log(row, $element)
    }
    function delItem (marketId,storeId,marketSpuId) {
        $.ajax({
            url: '/goblin/marketing/zhengzai/sku/del',
            type: 'post',
            data: {
                marketId,
                storeId,
                skuId: marketSpuId
            },
            success: function(res) {
                console.log(res)
                refreshItem()
            }
        })
    }
    function selectGoodsTab () {
        let url = prefix2 + '/selectGoddsTab'
        console.log(url)
        $.modal.open("选择商品", url, '1280', '680');
    }
</script>
</html>
