{{template "header" .}}
<meta name="keywords" content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,aiprose">
<title>搜索 - 码农随笔</title>
<script src="https://unpkg.com/dayjs@1.8.15/dayjs.min.js"></script>
</head>
<body>
<div class="root-container">
    {{template "nav" .}}
    <div class="search-root">
        <div>
            <div>
                <div class="input-group input-class auto-screen">
                    <el-input v-model="searchVal" @change="searchHandler" placeholder="请输入关键字"></el-input>
                </div>
            </div>
        </div>
        <div class="search-result">
            <div class="search-item" v-for="el in list">
                <div class="search-title">
                    <a style="color: #28a3ef" :href="'https://www.aiprose.com/blog/' + el._source.Id " target="_blank">${el._source.Title}</a>
                    <span class="auto-item"> ${mtime(el._source.Ctime)}</span>
                </div>
                <p class="search-content">${el._source.BlogDesc }</p>
            </div>
            <p v-if="list.length == 0">没有搜索到相关文章</p>
        </div>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el: ".root-container",
        delimiters: ['${', '}'],
        data: {
            searchVal: '',
            list: [],
            pageNo: 1,
            pageSize: 30,
            searchParms: {
                from: 0,
                size: 20,
                query: {
                    multi_match: {
                        query: "",
                        // type: "best_fields",
                        fields: ["Title", "BlogHtml"]
                    }
                }
            }
        },
        methods: {
            mtime (time){
                return dayjs(time).format("YYYY-MM-DD")
            },
            searchHandler (searchVal){
                var _this = this;
                if (!searchVal || searchVal.trim().length == 0) {
                    this.$Message.warning('请输入查询内容');
                    return
                }
                this.searchParms.query.multi_match.query = searchVal;
                var stringify = JSON.stringify(this.searchParms);
                $.ajax({
                    url: "https://www.aiprose.com/es/search",    //请求的url地址
                    headers: {'Content-Type': 'application/json;charset=utf8'},
                    dataType: "json",   //返回格式为json
                    async: true,//请求是否异步,默认为异步,这也是ajax重要特性
                    data: stringify,    //参数值
                    type: "POST",   //请求方式
                    beforeSend: function () {
                        //请求前的处理
                    },
                    success: function (resp) {
                        _this.list = []
                        if (resp.hits.total != 0) {
                            _this.list = resp.hits.hits;
                        }
                        //请求成功时处理
                    },
                    complete: function () {
                        //请求完成的处理
                    },
                    error: function () {
                        //请求出错处理
                    }
                })
            }
        }
    })


    $(function () {

        function search() {

            searchParms.query.multi_match.query = searchVal;
            var stringify = JSON.stringify(searchParms);

        }
    })
</script>
</html>