<template>
    <div class="companylist-page">
        <div class="search-input">
            <input class="icon" type="text" placeholder="搜索快递公司" v-model="inputname" @input="search">
        </div>
        <div class="company-data">
            <div class="company-item" v-for="(item, key) in currentList" :key="key">
                <a class="tag" :name="key">{{ key }}</a>
                <span v-for="val in item" :key="val.id" @click="select(val.id, val.company_name)">{{val.company_name}}</span>
            </div>
        </div>
        <index-list style="margin-top:70px"></index-list>
    </div>
</template>

<script>
    import indexList from 'component/tool/index-list.vue';

    export default {
        props: ['company_list'],
        data() {
            return {
                inputname: '',
                currentList: JSON.parse(this.company_list)
            };
        },
        components: {
            indexList
        },
        methods: {
            search() {
                let inputname = this.inputname;

                if (!inputname) {
                    this.currentList = this.currentList;
                    return;
                }

                let filter = {};

                for (let k in this.currentList) {
                    this.currentList[k].forEach(d => {
                        if (d.company_name.indexOf(inputname) > -1) {
                            if (!filter[k]) {
                                filter[k] = [];
                            }
                            filter[k].push(d);
                        }
                    });
                }
                this.currentList = filter;
            },
            select(companyId, companyName) {
                this.$emit('change-view', {
                    view: 'logistics',
                    company_id: companyId,
                    company_name: companyName
                });

                // 重置列表
                this.inputname = '';
                this.currentList = this.currentList;
            }
        }
    };
</script>