<template>
    <div class="companylist-page">
        <div class="search-input">
            <input class="iconfont" type="text" placeholder="搜索快递公司" v-model="inputname" @input="search">
        </div>
        <div class="company-data">
            <div class="company-item" v-for="(item, index) in showData" :key="index">
                <a class="tag" :name="index">{{ index }}</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>
    const $ = require('yoho-jquery');
    const indexList = require('components/tools/index-list.vue').default;
    const bus = require('plugin/vue-bus');

    module.exports = {
        data() {
            return {
                inputname: '',
                company_list: [],
                showData: []
            };
        },
        components: {
            indexList
        },
        methods: {
            /**
             * 获取快递公司列表
             */
            getCompanyList() {
                $.get('/home/return/refund/getCompanyList', result => {
                    this.showData = this.company_list = result;
                });
            },

            search() {
                let inputname = this.inputname;

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

                let filter = {};

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

                // 重置列表
                this.inputname = '';
                this.showData = this.company_list;
            }
        },
        created() {
            this.getCompanyList();
        }
    };
</script>