<template>
    <u-popup :show="show" zIndex="1007000" @close="close">
        <view>
            <view style="padding: 10px;">
                <u-search placeholder="请输入关键字" @custom="searchList" @search="searchList"></u-search>
            </view>
            <view class="listBox">
                <view style="display: flex;justify-content: space-between;align-items: center;">
                    <h3 style="margin-bottom: 10px;">历史记录</h3>
                    <view style="font-size: 12px; color: #666666;" @click="clearRcords">清空</view>
                </view>
                <view class="listBox1">
                    <view class="tab-card" v-for="(item,index) in records" @click="selectCity(item)" :key="item.value">
                        {{item.label}}
                    </view>
                </view>
                <u-divider text="分割线" :hairline="true"></u-divider>
                <view class="listBoxchild">
                    <view class="listBoxchild2">
                        <view class="tab-card" v-for="(item,index) in list1" @click="selectCity(item)"
                            :key="item.value">
                            {{item.label}}
                        </view>
                    </view>
                </view>

            </view>
        </view>
    </u-popup>
</template>

<script>
    import ListItem from './xc-list-item.vue';
    const dataCityList = require('./data.json')
    export default {
        components: {
            ListItem
        },
        data() {
            return {
                list1: [],
                records: [],
                key: 'record-gw'
            }
        },
        props: {
            show: {
                type: Boolean,
                default: false,
            }
        },
        computed: {
            cityList() {
                return dataCityList
            },
        },
        created() {
            const stor = uni.getStorageSync(this.key)
            if (stor && stor.length) {
                this.records = stor
            }
        },
        methods: {
            close() {
                this.$emit('close')
            },
            clearRcords() {
                this.records = []
                uni.setStorage({
                    key: 'record-gw',
                    data: []
                })
            },
            selectCity(item) {
                if (!this.records.some((zItem) => zItem.value === item.value)) {
                    const arr = [...this.records, item]
                    if (arr.length > 10) {
                        arr.shift()
                    }
                    this.records = arr
                    uni.setStorage({
                        key: 'record-gw',
                        data: this.records
                    })
                }
                this.$emit('select', item)
            },
            searchList(val) {
                if (val) {
                    const arr = dataCityList.filter((item) => {
                        const reg = new RegExp(val, 'ig')
                        if (reg.test(item.label)) {
                            return true
                        }
                    })
                    this.list1 = arr
                } else {
                    uni.showToast({
                        title: '请输入关键字',
                        icon: 'none',
                        mask: false,
                    });
                }

            }
        }
    }
</script>

<style>
    .listBox {
        display: flex;
        flex-direction: column;
        height: 70vh;
        padding: 12px;
    }

    .listBoxheader {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .listBox1 {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .listBoxchild {
        flex: 1;
        overflow: hidden;
    }

    .listBoxchild2 {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tab-card {
        background-color: #e8e8e8;
        padding: 3px 5px;
        font-size: 14px;
        color: #666666;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin: 4px 6px 4px 4px;
    }
</style>