<!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>2022北京草莓音乐节</p>
        </div>
        
        <div class="content_store_name">
            <span>有效期：</span><p>2021年12月24日11:24</p>  至  <p>2021年12月28日11:24</p>
        </div>
    </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">
    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 () {
        var options = {
            id: 'tabList',
            url: prefix + "/list",
            createUrl: prefix2 + "/addNewActivity",
            detailUrl: prefix2 + "/storeDetail?id={id}",
            // exportUrl: prefix + "/export",
            onCheck: onCheck,
            sortName: "createdAt",
            sortOrder: "desc",
            modalName: "活动",
            showSearch: false,
            showRefresh: false,
            showColumns: false,
            showToggle: false,
            columns: [
                {
                    field: 'valFace',
                    title: '商品'
                },
                {
                    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('')
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return `<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.detailTab('${row.itemId}', 7, '确定下架此商品吗？')">删除</a>`
                    }
                }]
        };
        $.table.init(options);
    });
    function setGoodsRole () {
        let url = prefix2 + '/setGoodsRole'
        console.log(url)
        $.modal.open("标题内容", url, '1280', '680');
    }
    function onCheck (row, $element) {
        console.log(row, $element)
    }
    function selectGoodsTab () {
        let url = prefix2 + '/selectGoddsTab'
        console.log(url)
        $.modal.open("选择商品", url, '1280', '680');
    }
</script>
</html>
