<!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('用户列表')"/>
    <style>
        .container-div .row .addBox {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
        .addBox .addItems {
            display: flex;
            align-items: center;
            margin-top: 20px;
        }
        .addBox .addItems .input-group {
            width: 200px !important;
        }
        .addBox .addItems span {
            display: inline-block;
            width: 100px;
            text-align: right;
            margin-right: 8px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="addBox">
            <div class="addItems">
                <span><em style="color: red;">*</em>特邀代理姓名</span><input id="name" type="text" placeholder="特邀代理姓名" class="form-control" style="width:200px;height: 30px;">
            </div>
            <div class="addItems">
                <span><em style="color: red;">*</em>特邀代理手机号</span><input id="phone" maxlength="11" type="text" placeholder="特邀代理手机号" class="form-control" style="width:200px;height: 30px;">
            </div>
            <div class="addItems">
                <span><em style="color: red;">*</em>代理描述</span><input id="text" type="text" placeholder="代理描述" class="form-control" style="width:200px;height: 30px;">
            </div>
            <div class="addItems">
                <span><em style="color: red;">*</em>选择演出</span>
                <div class="input-group iptOrSelect">
                    <input id="searchIpt" data-id="" value="" type="text" class="form-control storeList" placeholder="请输入查询信息" style="width:200px;height: 30px;">
                    <div class="input-group-btn">
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="addItems">
                <span><em style="color: red;">*</em>票提设置</span><input id="ticket" type="number" placeholder="票提设置%" class="form-control" style="width:200px;height: 30px;">
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-suggest-js" />
<script th:inline="javascript">
    let uid = null
    let perId = null
    let hostname = null
    var title = null

    var smilePrefix = ctx + "smile/user";
    var performancesId = null
    $(".storeList").bsSuggest({
        idField: 'performancesId',                 // data.value 的第几个数据，作为input输入框的内容
        keyField: 'title',                // data.value 的第几个数据，作为input输入框的内容
        allowNoKeyword: false, //是否允许无关键字时请求数据
        showBtn:false,
        multiWord: true, //以分隔符号分割的多关键字支持
        hideOnSelect: true,
        getDataMethod: "url", //获取数据的方式，总是从 URL 获取
        effectiveFields: ['title'],
        url: '/smile/show/listAll?title=',
        /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
        processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
            //字符串转化为 js 对象
            let data = {};
            data.value = json.data
            return data
        }
    }).on('onDataRequestSuccess', function (e, result) {
    }).on('onSetSelectValue', function (e, selectedData,selectedRawData ) { // 当前行的所有值都能拿到
        console.log(selectedData)
    }).on('onUnsetSelectValue', function (e) {
    });;
    // $.ajax({
    //     url:'/smile/show/listAll',
    //     type:'get',
    //     success:function(res){
    //         let arr = []
    //         res.data.forEach(item =>{
    //             arr.push(`<option value="${item.performancesId}">${item.title}</option>`)
    //         })
    //         $('#performance').append(arr)
    //     }
    // })
</script>
</body>
</html>