<!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>
        .layui-form {
            padding: 20px;
        }
        .main_title, .main_type, .money, .scope_application, .sendType,.phoneNumber,.playMethod {
            margin-bottom: 20px;
        }

        .scope_application,.sendType,.phoneNumber,#test1,.playMethod {
            display: none;
        }

        .scope_application {
            display: flex;
        }
        .scope_application .input-group-btn {
            top: 33px;
        }
        #test1 {
            display: none;
        }
        .labelName {
            display: inline-block;
            width: 100px;
            text-align: right;
        }
        input {
            border: 1px solid #ddd;
            border-radius: 4px;
            background: transparent;
            outline: none;
            padding-left: 5px;
            height: 30px;
        }
        .main_title input {
            width: 200px;
        }
        .prompt {
            margin-left: 100px !important;
        }

        .main_type input, .sendType input,.playMethod input {
            margin-top: -2px;
            margin-right: 5px;
        }
        .main_type span, .sendType span, .playMethod span {
            margin-right: 12px;
            line-height: 28px;
        }
        .layui-form .money input {
            width: 60px;
        }
        .changeData .dataOne {
            margin-bottom: 20px;
        }
        .changeData .dataOne p {
            margin: 12px 0 0 20px;
            color: #ccc;
        }
        .changeData .dataOne input {
            width: 60px;
        }
        .main_bottom .describe, .main_bottom .sendTime {
            margin-bottom: 20px;
        }
        .describe,.main_type {
            display: flex;
        }
        .describe textarea,.phoneNumber textarea {
            width: 400px;
        }
        .sendTime {
            display: flex;
        }
        .sendTime input {
            margin-top: -6px;
            margin-right: 5px;
        }
        .bottom_btn {
            width: 25%;
            text-align: center;
        }
        select {
            border: 1px solid #ddd;
            border-radius: 4px;
            background: transparent;
            outline: none;
            height: 30px;
            width: 200px;
        }
        .search_ipt, .search_ipt2 {
            width: 200px !important;
            display: inline-block;
        }
        /* .search_ipt ul,.search_ipt li{
            padding: 0;
            margin: 0;
            font-style: normal;
            list-style: none;
        } */
        #test1 {
            display: none;
        }
        .required {
            font-style: normal;
            color: red;
        }
        #iptModal {
            display: none;
        }
    </style>
</head>
<body>
<form id="form-user-add"  class="layui-form">
    <div class="main_title">
        <span class="labelName"><i class="required">*</i>名称：</span><input type="text" id="title" name="keyword" placeholder="券名称" required />
    </div>
    <div class="main_type">
        <span class="labelName">类别：</span>
        <div class="layui-input-block" style="display: flex">
            <input type="radio" value="0" class="typeOne" name="typeOne" checked><span>全场</span>
            <input type="radio" value="1" class="typeOne" name="typeOne"><span>演出</span>
            <input type="radio" value="2" class="typeOne" name="typeOne"><span>商品</span>
<!--            <input type="radio" value="3" class="typeOne" name="typeOne"><span>优先购</span>-->
        </div>

    </div>
    <div class="money">
        <span class="labelName"><i class="required">*</i>金额：</span><input type="text" id="valFace" required />
    </div>
    <div class="main_type">
        <span class="labelName">类型：</span>
        <div class="layui-input-block" style="display: flex">
            <input type="radio" value="0" class="typeTwo" name="typeTwo" checked><span>用户输入兑换</span>
            <input type="radio" value="1" class="typeTwo" name="typeTwo"><span>发送至“我的券”</span>
            <input type="radio" value="2" class="typeTwo" name="typeTwo"><span>积分兑换</span>
        </div>

    </div>
    <div class="scope_application" id="scope_application">
        <span class="labelName">适用范围：</span>
        <div class="input-group search_ipt" style="margin-right: 12px;">
            <input id="searchIpt" data-id="" type="text" class="form-control" placeholder="全部">
            <div class="input-group-btn">
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                </ul>
            </div>
        </div>
        <div class="input-group search_ipt2" style="margin-right: 12px;">
            <input id="searchIpt2" data-id="" type="text" class="form-control" placeholder="全部商品">
            <div class="input-group-btn">
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                </ul>
            </div>
        </div>
        <!-- <div class="search_ipt" style="position: relative;display: inline;">
            <input type="text" id="searchIpt" autocomplete="off" class="layui-input" placeholder="全部">
            <ul id="dataList" style="position: absolute;" onclick="selectGoods()"></ul>
        </div> -->
        <select name="bindType" id="selectTwo" placeholder="请选择场次" style="margin-right: 12px;">
            <option value="">所有</option>
        </select>
        <select name="bindType" id="selectThree" placeholder="请选择票种">
            <option value="">所有</option>
        </select>
    </div>
    <div class="changeData">
        <div id="modalOne">
            <div id="dataOne1" class="dataOne">
                <span class="labelName"><i class="required">*</i>数量：</span>
                <input type="text" id="num" value="1" required />
                <span id="unit">张</span>
            </div>
            <div class="dataOne">
                <span class="labelName"><i class="required">*</i>券的有效期：</span>
                <input type="text" id="ticketTime" required />
                天
                <p class="prompt">*兑换后的有效时间</p>
            </div>
            <div class="dataOne" id="exchange">
                <span class="labelName"><i class="required">*</i>兑换有效期：</span>
                <input type="text" id="exchangeTime" required />
                天
                <p class="prompt">*可兑换的时间</p>
            </div>
        </div>
    </div>
    <div class="sendType">
        <div style="display: flex;align-items: center;">
            <span class="labelName">发送类型：</span>
            <div class="layui-input-block" style="display: flex">
<!--                <input type="radio" value="10" class="sendType" name="sendType" checked><span>全体用户</span>-->
                <input type="radio" value="1" class="sendType" name="sendType" checked><span>会员</span>
                <input type="radio" value="2" class="sendType" name="sendType"><span>手机号</span>
            </div>
        </div>
    </div>
    <div class="phoneNumber">
        <span style="display:inline-block;margin-bottom: 12px;"><i class="required">*</i>请输入手机号<span style="color: #ccc">（手机号可填多个，使用"，"隔开）</span>：</span>
        <textarea id="phoneNum" class="form-control" rows="4" style="margin-left: 100px"></textarea>
    </div>
    <div class="main_bottom">
        <div class="describe">
                <span class="labelName">
                    <i class="required">*</i>描述说明：
                </span>
            <textarea id="describeTxt" class="form-control" rows="4"></textarea>
        </div>
        <div class="playMethod">
            <div style="display: flex;align-items: center;">
                <span class="labelName">使用限制：</span>
                <div class="layui-input-block" style="display: flex">
                    <input type="radio" value="1" class="playMethod" name="playMethod" checked><span>叠加</span>
                    <input type="radio" value="0" class="playMethod" name="playMethod"><span>限制</span>
                </div>
            </div>
        </div>
        <div class="sendTime">
            <span class="labelName">发送时间：</span>
            <div class="layui-input-block" style="display: flex">
                <input type="radio" name="sex" value="1" title="立即" checked><span>立即</span>
                <span style="margin-right:12px;" id="iptModal"><p style="display:flex"><input type="radio" name="sex" value="2" title="预约" style="margin-left: 12px;">预约</p></span>
            </div>
            <input type="text" class="layui-input" id="test1" placeholder="请选择时间">
        </div>
        <div class="bottom_btn">
            <!-- <button type="button" class="layui-btn btn btn-primary" lay-filter="formDemo" onclick="create()">创建代金券</button> -->
            <button type="button" class="btn btn-primary" onclick="create()">创建代金券</button>
        </div>
    </div>
</form>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-suggest-js"/>
</body>
<script th:inline="javascript">
    var phpMallUrl = [[${phpMallUrl}]];
    var roadShowId = '[[${roadShowId}]]'.replaceAll("\"", "");
    let prefix = ctx;
    let typeOne = '0'; // 类别
    let typeTwo = '0'; // 类型
    let sendType = '1'; // 发送类型
    let searchVal = ''; // 输入框内数据
    let searchData = []; // 搜索总数据
    let showId = ''; // 选中演出id
    let selectTwoId = ''; // 选中演出下级的ID
    let selectTwoName = ''; // 选中演出下级的名称
    let selectThreeId = ''; // 选中演出三级的ID
    let selectThreeName = ''; // 选中演出三级的名称
    let sendTimeType = '';
    let playMethod = '1'; // 叠加/限制
    let goodsId = '';
    $("#scope_application").hide();
    function search() {
        let data = {
            status: '(3,6,8,9)',
            title: searchVal
        }
        let str = '';
        promiseMethods(ctx+'kylin/base/performance/status','get',data,'application/x-www-form-urlencoded').then(res=>{
            if (res.value.length>0) {
                let filterData = [];
                searchData = [...res.value];
                let obj = {};
                searchData.reduce((cur,next) => {
                    if (!obj[next.performancesId]) {
                        obj[next.performancesId] = true
                        str+= `<li class="selectData" onclick="selectOne('${next.performancesId}','${next.title}')">${next.title}</li>`
                    }
                },[]) //设置cur默认类型为数组，并且初始值为空的数组
                $('#dataList').html(str);
            } else {
                $('#dataList').html('<li style="width:100%;text-align:center;color:#ccc;">--- 暂无数据 ---</li>');
            }
        })
    };
    function common (num) {
        console.log(num, '?????')
        let url = '';
        let idField = '';
        let keyField = '';
        let effectiveFields = '';
        let domData = '';
        if (!num) {
            url = ctx+'compilations/goodsList';
            idField = 'spuId';
            keyField = 'name';
            effectiveFields = ['name'];
            domData = $("#searchIpt2");
        } else {
            url = ctx+'kylin/base/performance/status?status=(3,6,8,9)&title=';
            idField = 'performancesId';
            keyField = 'title';
            effectiveFields = ['title'];
            domData = $("#searchIpt");
        }
        domData.bsSuggest('init', {
            idField,                 // data.value 的第几个数据，作为input输入框的内容
            keyField,                // data.value 的第几个数据，作为input输入框的内容
            allowNoKeyword: false, //是否允许无关键字时请求数据
            showBtn:false,
            multiWord: true, //以分隔符号分割的多关键字支持
            hideOnSelect: true,
            getDataMethod: "url", //获取数据的方式，总是从 URL 获取
            effectiveFields,
            url,
            /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
            processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
                console.log(json, '?????')
                let data = {
                    value: []
                };
                if (num) {
                    searchData = [...json.value];
                    let obj = {};
                    searchData.reduce((cur,next) => {
                        if (!obj[next.performancesId]) {
                            obj[next.performancesId] = true
                            data.value.push(next)
                        }
                    },[]) //设置cur默认类型为数组，并且初始值为空的数组
                    return data
                } else {
                    data.value = json.data;
                    return data;
                }
                
            }
        }).on('onDataRequestSuccess', function (e, result) {
        }).on('onSetSelectValue', function (e, selectedData,selectedRawData ) { // 当前行的所有值都能拿到
            if (num) {
                selectOne(selectedData.id, selectedData.key)
            } else {
                console.log(selectedData, '????')
                goodsId = selectedData.spuId
            }
        }).on('onUnsetSelectValue', function (e) {
        });;
        $("#searchIpt").bsSuggest.init
    }
    function getMallList() {
        let data = {
            name: searchVal
        }
        let str = '';
        promiseMethods('/compilations/goodsList','get',data).then(res=>{
            if (res.data.length>0) {
                searchData = [...res.data];
                searchData.forEach((item,index)=>{
                    str+= `<li class="selectData" onclick="selectOne('${item.spuId}','${item.name}')">${item.name}</li>`
                })
                $('#dataList').html(str);
            } else {
                $('#dataList').html('<li style="width:100%;text-align:center;color:#ccc;">--- 暂无数据 ---</li>');
            }
        })
    };
    function selectOne(id,name) {
        console.log(id)
        showId = id;
        if (typeOne == 2) {
            return
        }
        let str = `<option value="" label="">所有</option>`;
        let obj = {};
        let filterData = [];
        searchData.forEach(item=>{
            if (item.performancesId == id) {
                filterData.push(item)
            }
        })
        filterData.reduce((cur, next) => {
            if (!obj[next.timeId]) {
                obj[next.timeId] = true
                str+= `<option value='${next.timeId}' label='${next.timeTitle}'>${next.timeTitle}</option>`
            }
        }, [])
        selectTwoId = ''; // 选中演出下级的ID
        selectThreeId = ''; // 选中演出三级的ID
        $('#selectTwo').empty().append(str);
        $('#selectThree').empty();
    };
    
    $('#selectTwo').change(function(e){
        selectTwoId = $(this).val();
        selectTwoName = $('#selectTwo').find('option:selected').attr('label');
        let str = `<option value="" label="" >所有</option>`;
        searchData.forEach(item=>{
            if (item.timeId == selectTwoId) {
                str+= `<option value='${item.ticketId}' label='${item.ticketTitle}'>${item.ticketTitle}</option>`
            }
        })
        selectThreeId = ''; // 选中演出三级的ID
        $('#selectThree').empty().append(str);
    });
    $('#selectThree').change(function(e){
        selectThreeId = $(this).val();
        selectThreeName = $('#selectThree').find('option:selected').attr('label');
    });
    $("input[name=typeOne]").change(function(e){
        typeOne = e.target.value;
        if (typeOne == 1) {
            $('#scope_application').show();
            $(".search_ipt").show();
            $(".search_ipt2").hide();
            $("#searchIpt").val('');
            $('#selectTwo').show().val('').empty();
            $('#selectThree').show().val('').empty();
            common (1)
        } else if (typeOne == 2) {
            showId = '';
            selectTwoId = ''; // 选中演出下级的ID
            selectThreeId = ''; // 选中演出三级的ID
            $('#scope_application').show();
            $(".search_ipt").hide();
            $(".search_ipt2").show();
            $("#searchIpt2").val('');
            $('#selectTwo').hide();
            $('#selectThree').hide();
            common (0)
        } else {
            $('#scope_application').hide();
            showId = '';
            selectTwoId = ''; // 选中演出下级的ID
            selectThreeId = ''; // 选中演出三级的ID
            $(".search_ipt").hide();
            $(".search_ipt2").hide();
            $('#selectTwo').hide();
            $('#selectThree').hide();
        }
        // if (typeOne == 3) {
        //     $('.playMethod').show()
        // } else {
        //     $('.playMethod').hide()
        // }
    });
    $("input[name=typeTwo]").change(function(e){
        typeTwo = e.target.value;
        if (typeTwo == 1) {
            $('#unit').text('张/账户')
            $('#iptModal').show();
            $('.sendType').show();
            $('#exchangeTime').val('')
            $('#exchange').hide();
            $('#dataOne1').show();
            if (sendType == 2) {
                $('.phoneNumber').show();
            }
        } else if (typeTwo == 2) {
            $('#unit').text('张')
            $('#iptModal').hide();
            $('.sendType').hide();
            $('.phoneNumber').hide();
            $('.test1').val('').hide();
            $('.phoneNum').val('');
            $('#exchange').hide();
            $('#dataOne1').hide();
        } else {
            $('#unit').text('张')
            $('#dataOne1').show();
            $('#iptModal').hide();
            $('#exchange').show();
            $('.sendType').hide();
            $('.phoneNumber').hide();
            $('.test1').val('').hide();
            $('.phoneNum').val('');
        }
    });
    $("input[name=sendType]").change(function(e){
        sendType = e.target.value;
        if (e.target.value == 2) {
            $('.phoneNumber').show();
            $('.test1').show();
        } else {
            $('.phoneNumber').hide();
            $('.test1').val('');
            $('.test1').hide();
        }
    });
    $("input[name=sex]").change(function(e){
        sendTimeType = e.target.value;
        if (sendTimeType == 2) {
            $('#test1').show();
        } else {
            $('#test1').val('')
            $('#test1').hide();
        }
    });
    $("input[name=playMethod]").change(function(e){
        playMethod = e.target.value;
    });
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#test1', //指定元素
            type: 'datetime'
        });
    });
    
    function create() {
        
        if (!$('#valFace').val() || !$('#title').val() || !$('#num').val() || !$('#ticketTime').val() || !$('#describeTxt').val()) {
            return layer.msg('请将必填项输入完整～！');
            if (typeTwo == 0) {
                if (!$('#exchangeTime').val()) {
                    return layer.msg('请将必填项输入完整～！');
                }
            }
        }
        if ($("#describeTxt").val().match(/^\s+$/)) {
            return layer.msg('描述说明不可全为空格！');
        }
        let useScope = 100;
        let busiName = $('#searchIpt').val();
        let busiId = '';
        if (showId) {
            useScope = 90;
            busiId = showId;
        }
        if (selectTwoId) {
            useScope = 91;
            busiId = selectTwoId;
            // busiName = selectTwoName;
        }
        if (selectThreeId) {
            useScope = 92;
            busiId = selectThreeId;
            // busiName = selectThreeName;
        }
        if (typeOne == 2) {
            useScope = 80;
            busiId = showId;
            busiName = $("#searchIpt2").val() || '全部商品';
        }
        if (typeOne == 0) {
            busiName = $("#searchIpt").val() || '全场适用';
        }
        if (typeOne == 3) {
            if (showId) {
                useScope = 90;
                busiId = showId;
            }
            busiName = $("#searchIpt").val();
        }
        let data = {
            "bindType": Number(typeTwo), // 兑换券/发放
            "busiType": Number(typeOne), // 业务类别
            "couType": 1, // 券类型
            "couponRuleList": [ // 适用范围[100-全场｜90-演出｜91-场次｜92-票｜80-商品｜81-款式]
                {
                "useScope": useScope,
                "busiName": busiName || '全部演出',
                "busiId": busiId
                }
            ],
            "discount": '', // 折扣券需传
            "eventAmt": Number($('#num').val()), // 数量
            "eventAt": $('#test1').val() || $.common.dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss'),
            "eventLimit": $('#phoneNum').val(), // 手机号
            "eventType": Number(sendType),
            "label": "标注", // 不需管
            "notice": $('#describeTxt').val(),
            "overlay": playMethod, // 优先购ticketTime 
            "redeemValidity": Number($('#exchangeTime').val()), // 兑换有效期
            "title": $('#title').val(),
            "valFace": $('#valFace').val(), // 金额
            "validity": Number($('#ticketTime').val()),
        }
        if (typeTwo == 1) {
            delete data.redeemValidity
        } else {
            delete data.eventType
        }
        if (typeOne == 0 || typeOne == 1 || typeOne == 2) {
            delete data.discount;
            delete data.overlay;
        }
        if (sendType != 2) {
            delete data.eventLimit;
        }
        promiseMethods('/candy/coupon/mgt/add','post',JSON.stringify(data),'application/json').then(res=>{
            layer.msg('' + res);
            if (res.code != undefined && res.code != web_status.SUCCESS) {
                $.modal.alertWarning(res.msg);
                return [];
            } else if (res.code == web_status.SUCCESS) {
                $.operate.successTabCallback(res);
                closeItem();
            }
        })
    }
    function promiseMethods(url,type,data,contentType) {
        return new Promise((resolve,reject)=>{
            $.ajax({
                url,
                type,
                data,
                contentType,
                success:function(res) {
                    resolve(res);
                }
            })
        })
    }
</script>
</html>
