<!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>
        .home_page {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .right_content {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
        }
        .left_content {
            flex: 1;
        }
        .left_title, .right_title {
            margin-bottom: 12px;
        }
        .function_btn {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .function_btn .hot_title {
            font-size: 16px;
            font-weight: 600;
        }
        .function_btn .tags {
            display: flex;
        }
        .function_btn .tags .tag {
            padding: 6px 12px 4px;
            border: 1px solid #ccc;
            border-radius: 5px;
            position: relative;
            margin-right: 12px;
        }
        .function_btn .tags .tag span {
            display: inline-block;
            position: absolute;
            top: -8px;
            right: -8px;
            width: 18px;
            height: 18px;
            line-height: 16px;
            border: 1px solid #aaa;
            border-radius: 50%;
            background: #fff;
            text-align: center;
            cursor: pointer;
        }
        .add_tags {
            padding-left: 68px;
        }
        .add_tags div {
            display: flex;
        }
        .hot_set {
            font-size: 16px;
            font-weight: 600;
        }
        .hot_set p {
            margin-top: 12px;
            display: flex;
            padding-left: 68px;
            display: flex;
            align-items: center;
        }
        .hot_set p input {
            width: 120px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="home_page">
        <div class="left_content">
            <div class="left_title">
                
            </div>
            <div class="function_btn">
                <div class="hot_title">
                    搜索热词：
                </div>
                <div class="tags">
                    <!-- <div class="tag">
                        新裤子
                        <span>x</span>
                    </div> -->
                </div>
            </div>
            <div class="add_tags">
                <div>
                    <input type="text" class="layui-input form-control" id="test1"  style="margin-left: 10px;" placeholder="输入热门关键词"><button type="button" class="btn btn-success" onclick="addItems()">添加</button>
                </div>
                <p style="margin-left: 10px;">允许添加多个关键词，默认显示第一个</p>
            </div>
            <div class="hot_set">
                热词设置：滚动
                <p><input type="text" class="layui-input form-control" id="time"  style="margin-left: 10px;" placeholder="请选择时间">M</p>
            </div>
            <div class="footer_btn">
                <button type="button" class="btn btn-success" onclick="save()">保存</button>
            </div>
        </div>
        <div class="right_content">
            <div class="right_title">
                
            </div>
            <div class="function_area">
                <iframe src="http://m.zhengzai.tv" width="375" height="896" frameborder="0"></iframe>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer"/>
    <script th:inline="javascript">
        var prefix2 = ctx + "local";
        let num = 0;
        let hotArr = [];
        let mid = 0;
        let createTime = '';
        let hotWordId = '';
        let updateTime = '';
        $(function(){
            promiseMethods('/hotWord/list', 'post').then(res => {
                let data = res.data[0];
                mid = data.mid;
                createTime = data.createTime;
                hotWordId = data.hotWordId;
                updateTime = data.updateTime;
                let hotStr = data.word.split(',');
                console.log(hotStr, 'hotStr')
                for(var i = 0; i < hotStr.length; i++) {
                    console.log(1, '1')
                    num++
                    let str = `<div class="tag" id="item${num}">${hotStr[i]}<span onclick="delTags('${num}')">x</span></div>`;
                    hotArr.push(hotStr[i])
                    $(".tags").append(str);
                }
            })
        })
        function addItems () {
            if (!$("#test1").val()) {
                return layer.msg('输入内容不能为空！')
            }
            num++
            let str = `<div class="tag" id="item${num}">${$("#test1").val()}<span onclick="delTags('${num}')">x</span></div>`;
            hotArr.push($('#test1').val())
            $(".tags").append(str);
            $("#test1").val('');
        }
        function delTags(num) {
            let name = $("#item"+num+"").text().slice(0,$("#item"+num+"").text().length-1)
            hotArr.splice(hotArr.indexOf(name),1);
            $("#item"+num+"").remove();
        }
        function save () {
            let data = {
                "changeTime": $('#time').val() * 60,
                "changeType": 1,
                "createTime": createTime?createTime:"",
                "delTag": 0,
                "hotWordId": hotWordId? hotWordId : "",
                "indexs": 1,
                "mid": mid?mid:0,
                "status": '',
                "updateTime": updateTime ? updateTime : '',
                "word": hotArr.toString()
            }
            console.log(data, 'data')
            promiseMethods('/hotWord/updateOrCreate', 'post', JSON.stringify(data), 'application/json').then(res => {
                console.log(res, 121212)
            }) 
            // refreshItem()
        }
        function promiseMethods(url,type,data,contentType) {
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url,
                    type,
                    data,
                    contentType,
                    success:function(res) {
                        resolve(res);
                    }
                })
            })
        }
    </script>
</body>
</html>