<template>
    <div class="companylist-page">
        <div class="search-input">
            <input class="icon" type="text" placeholder="&#xe608; 搜索快递公司" v-model="inputname" @input="search">
        </div>
        <div class="company-data">
            <div class="company-item" v-for="item in showData">
                <a class="tag" :name="$key">{{ $key }}</a>
                <span v-for="val in item" track-by="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>
    const indexList = require('component/tool/index-list.vue');

    module.exports = {
        props: ['company_list'],
        data() {
            this.company_list = JSON.parse(this.company_list);
            return {
                inputname: '',
                showData: this.company_list
            };
        },
        components: {
            indexList
        },
        methods: {
            search: function() {
                let inputname = this.inputname;

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

                let filter = {};

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

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