<template>
    <view>
        <view class="searchGood">
            <u-list @scrolltolower="scrolltolower">
                <view class="">
                    <view style="padding: 3px 10px;box-sizing: border-box;">
                        <u-search placeholder="模糊搜索:商品名|拼音|货号|厂家" borderColor="#ccc" v-model="search" height="35"
                            @search="toSearch()" @custom="toSearch()" @change="change"></u-search>
                    </view>
<!--                    <view style="padding: 20px;">
                        <u--form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="100px">
                            <u-form-item label="产品名称" prop="storeName" borderBottom>
                                <u--input v-model="form.storeName" shape="circle" placeholder="产品名称"
                                    @confirm="toSearch()"></u--input>
                            </u-form-item>
                            <u-form-item label="拼音" prop="pinyin" borderBottom>
                                <u--input v-model="form.pinyin" shape="circle" placeholder="商品名拼音简写字母"
                                    @confirm="toSearch()"></u--input>
                            </u-form-item>

                            <u-form-item label="厂家" prop="factoryName" borderBottom>
                                <u--input v-model="form.factoryName" shape="circle" placeholder="厂家"
                                    @confirm="toSearch()"></u--input>
                            </u-form-item>
                            <u-form-item label="货号" prop="goodsNo" borderBottom>
                                <u--input v-model="form.goodsNo" shape="circle" placeholder="货号" @confirm="toSearch()">
                                </u--input>
                            </u-form-item>
                        </u--form>
                        <u-button type="primary" @click="toSearch()">确认</u-button>
                    </view> -->
                    <view v-if="keywords.length">
                        <view class="title">热门搜索</view>
                        <view class="list acea-row" style="padding: 15px;">
                            <u-tag v-for="(keyword ,idx)  in keywords" plain :text="keyworde(keyword)" type="warning"
                                closable @click="addObjSearch(keyword)" @close="closeTag(idx)">
                                <!-- <text slot="text">cds </text> -->
                            </u-tag>
                        </view>
                    </view>
                </view>
                <u-list-item v-for="(item, index) in keywordObj" :key="index">
                    <u-cell :title="item.keyword" @click="addObjSearch(item)">->
                    </u-cell>
                </u-list-item>
            </u-list>
            <view class="line"></view>
        </view>
    </view>
</template>
<script>
    import {
        getSearchKeyword,
        getkeywords
    } from "@/api/store";
    import {
        trim
    } from "@/utils";
    import localStorage from "@/utils/store/localStorage.js";
    export default {
        name: "GoodSearch",
        components: {},
        props: {},
        computed: {
            keywordObj() {
                var obj = {}
                this.keywordList.filter(res => {
                    obj[res.keyword] = res
                })
                return obj
            }
        },
        data: function() {
            return {
                sm: 1,
                isInput: false,
                m: 0,
                keywordList: [],
                keywords: [],
                search: "",
                cacheKey: "goodsSearchKeywords",

                showSex: false,
                form: {
                    factoryName: "",
                    goodsNo: "",
                    pinyin: "",
                    storeName: ""
                },
                rules: {

                },
                radio: '',
                switchVal: false
            };
        },
        onLoad: function(e) {
            if (e.keyword) {
                this.search = e.keyword
            }
            // console.log(e)
        },
        onShow: function() {

            this.getData();
        },
        methods: {
            keyworde(keyword) {
                // console.log(keyword)
                var val = ""
                for (var k in keyword) {
                    val = val + " " + keyword[k]
                }
                if (val.length > 20) {
                    val = val.slice(0, 16) + "..."
                }
                return val
            },
            change(e) {
                this.isInput = true
                // var that = this
                this.m = 0
                var that = this
                // var m =this.m
                clearInterval(this.sm)
                this.sm = setInterval(() => {
                    that.m = that.m + 1
                    if (that.m == 6 && that.isInput) {
                        that.isInput = false
                        clearInterval(that.sm)
                        that.getList()
                    }
                    // console.log(that.m)
                }, 100)
            },
            getList() {
                // console.log("触发")
                if (this.search) {
                    getkeywords({
                        keyword: this.search
                    }).then(res => {
                        this.keywordList = res.data
                        // console.log(res)
                    })
                }
            },
            scrolltolower(e) {
                console.log(e)
            },
            closeTag(idx) {
                this.keywords = this.keywords.filter((item, index) => {
                    if (idx != index) {
                        return item
                    }
                })
                this.restCache(this.keywords)
            },
            restCache(value) {
                localStorage.set(this.cacheKey, value)
            },
            addSearch(search) {
                this.search = search;
                this.toSearch();
            },
            addObjSearch(obj) {
                // console.log(obj)
                var form = {}
                for (var k in obj) {
                    
                    if (k == "keyword" || k == "storeName") {
                        this.search = obj[k]
                        form.storeName = obj[k]
                    }else if (k == "keyword") {
                        this.search == obj[k]
                    }
                    //  if (k == "factoryName") {
                    //  form[k]=obj[k]
                    // }
                    //  if (k == "pinyin") {
                    //  form[k]=obj[k]
                    // }
                    //  if (k == "goodsNo") {
                    //  form[k]=obj[k]
                    // }
                }
                this.form = form
                this.toSearch();
            },
            addCache(val) {
                var has = this.keywords.find(e => {
                    if (JSON.stringify(e) == JSON.stringify(val) || e.s == val.storeName) {
                        return true
                    }
                })
                // console.log(has)
                if (!has) {
                    this.keywords.push(val)
                    this.restCache(this.keywords)
                }

            },
            hasParams() {
                var obj = this.form
                for (var k in obj) {
                    if (obj[k]) {
                        return true
                    }
                }
                return false
            },
            toSearch() {
                var form = this.form
                if (!this.hasParams()) {
                    if (!this.search) {
                        return
                    }
                    form.s = this.search
                } else {
                    form.s = ""
                }
                // console.log(form)
                this.addCache(form)
                this.$yrouter.replace({
                    path: "/pages/shop/GoodsList/index",
                    query: form
                });

            },
            getData() {

                var data = localStorage.get(this.cacheKey)
                // console.log(data)
                if (typeof data != "object") {
                    data = []
                }
                if (data) {
                    this.keywords = data
                    this.restCache(this.keywords)
                } else {
                    getSearchKeyword().then(res => {
                        this.keywords = res.data;
                        this.restCache(this.keywords)
                    });
                }
            }
        }
    };
</script>
<style>
    .noCommodity {
        border-top: 0.05*100rpx solid #f5f5f5;
    }
</style>