<!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,.phoneNumber,.playMethod {
            margin-bottom: 20px;
        }

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

        #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,.playMethod input {
            margin-top: -2px;
            margin-right: 5px;
        }
        .main_type 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 ul,.search_ipt li{
            padding: 0;
            margin: 0;
            font-style: normal;
            list-style: none;
        }
        .search_ipt ul {
            display: none;
            position: absolute;
            left: 0;
            top: 26px;
            padding: 5px 0;
            z-index: 899;
            min-width: 200px;
            border: 1px solid #eee;
            max-height: 300px;
            overflow-y: auto;
            background-color: #fff;
            border-radius: 2px;
            box-sizing: border-box;
            box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
        }
        .search_ipt li {
            background-color: #fff;
            cursor: pointer;
            padding-left: 10px!important;
            color: #999;
            padding: 0 10px;
            line-height: 36px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .search_ipt li:hover {
            background: #F6F6F6;
        }
        .search_ipt .layui-input {
            width: 200px;
        }
        #test1 {
            display: none;
        }
        .required {
            font-style: normal;
            color: red;
        }
        #iptModal {
            display: none;
        }
        #valOver, #valMinus {
            margin: 0 12px;
        }
        #showNum {
            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="券名称" />
    </div>
    <div class="scope_application" id="scope_application">
        <span class="labelName">适用范围：</span>
        <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;"></ul>
        </div>
        <select name="bindType" id="selectTwo">
            <option value="">所有</option>
        </select>
        <select name="bindType" id="selectThree">
            <option value="">所有</option>
        </select>
        <span style="margin-left: 12px;color: #ccc;" id="showNum">
            演出库存：<span id="totalGeneral"></span>
            兑换库存：<span id="totalExchange"></span>
        </span>
    </div>
    <div class="changeData">
        <div id="modalOne">
            <div class="dataOne">
                <span class="labelName"><i class="required">*</i>数量：</span>
                <input type="text" id="num" required />
                张
            </div>
            <div class="dataOne">
                <span class="labelName"><i class="required">*</i>有效期：</span>
                <input type="text" id="ticketTime" required />
                天
                <p class="prompt">*可兑换的时间</p>
            </div>
        </div>
    </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="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 searchVal = ''; // 输入框内数据
    let searchData = []; // 搜索总数据
    let showId = ''; // 选中演出id
    let selectTwoId = ''; // 选中演出下级的ID
    let selectTwoName = ''; // 选中演出下级的名称
    let selectThreeId = ''; // 选中演出三级的ID
    let selectThreeName = ''; // 选中演出三级的名称
    function search() {
        let data = {
            status: '(3,6)',
            title: searchVal
        }
        let str = '';
        promiseMethods(ctx+'kylin/base/performance/status','get',data,'application/x-www-form-urlencoded').then(res=>{
            if (res.value.length>0) {
                searchData = res.value;
                searchData.forEach((item,index)=>{
                    str+= `<li class="selectData" onclick="selectOne('${item.performancesId}','${item.title}')">${item.title}</li>`
                })
                $('#dataList').html(str);
            } else {
                $('#dataList').html('<li style="width:100%;text-align:center;color:#ccc;">--- 暂无数据 ---</li>');
            }
        })
    };
    function selectOne(id,name) {
        $("#searchIpt").val(name);
        showId = id;
        let str = `<option value="0" label="">所有</option>`;
        searchData.forEach(item=>{
            if (item.performancesId == id) {
                $('#showNum').show();
                $('#totalExchange').text(item.totalExchange);
                $('#totalGeneral').text(item.totalGeneral);
                str+= `<option value='${item.timeId}' label=${item.timeTitle}>${item.timeTitle}</option>`;
            }
        })
        selectTwoId = ''; // 选中演出下级的ID
        selectThreeId = ''; // 选中演出三级的ID
        $('#selectTwo').empty().append(str);
        $('#selectThree').empty().append('<option value="0" label="">所有</option>');
    };
    $("#searchIpt").focus(function(){
        search()
        $('#dataList').show()
    });
    $("#searchIpt").blur(function(){
        setTimeout(() => {
            $('#dataList').hide() 
        }, 500);
        if (!$("#searchIpt").val()) {
            $('#showNum').hide();
        }
        
    });
    $("#searchIpt").keyup(function(){
        searchVal = $("#searchIpt").val()
        search()
    });
    
    $('#selectTwo').change(function(e){
        selectTwoId = $(this).val();
        console.log(selectTwoId,'kankna')
        selectTwoName = $('#selectTwo').find('option:selected').attr('label');
        let str = `<option value="0" 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');
    });
    function create() {
        if (!$('#title').val() || !$('#num').val() || !$('#ticketTime').val() || !$('#describeTxt').val()) {
            return layer.msg('请将必填项输入完整～！');
        }
        let useScope = 100;
        let busiName = $("#searchIpt").val();
        let busiId = '';
        if (!$('#searchIpt').val()) {
            showId = '';
        }
        if (showId) {
            useScope = 90;
            busiId = showId;
        }
        if (selectTwoId) {
            useScope = 91;
            busiId = selectTwoId;
            // busiName = selectTwoName;
        }
        if (selectThreeId) {
            useScope = 92;
            busiId = selectThreeId;
            // busiName = selectThreeName;
        }
        let data = {
            "couType": 3, // 券类型
            "bindType": 0, // 输入兑换
            "busiType": 1,
            "couponRuleList": [ // 适用范围[100-全场｜90-演出｜91-场次｜92-票｜80-商品｜81-款式]
                {
                "useScope": useScope,
                "busiName": busiName || '全部演出',
                "busiId": busiId
                }
            ],
            "eventAmt": Number($('#num').val()), // 数量
            "label": "标注", // 不需管
            "notice": $('#describeTxt').val(),
            "title": $('#title').val(),
            "eventAt": $.common.dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss'),
            "validity": Number($('#ticketTime').val()),
            "redeemValidity": Number($('#ticketTime').val()) // 兑换有效期
        }
        promiseMethods('/candy/coupon/mgt/add','post',JSON.stringify(data),'application/json').then(res=>{
            layer.msg('创建成功！');
            closeItem();
        })
    }
    function promiseMethods(url,type,data,contentType) {
        return new Promise((resolve,reject)=>{
            $.ajax({
                url,
                type,
                data,
                contentType,
                success:function(res) {
                    resolve(res)
                }
            })
        })
    }
</script>
</html>
