<template>
    <div class="brand-list-box">
        <div v-for="(item, index) in brandList" :key="index" class="per-brand-box">
            <div class="index"><a :href="'#' + item.index" :name="item.index">{{item.index}}</a></div>
            <div class="brand-big-box clearfix">
                <div class="brand-box" v-for="brand in item.brands" :key="brand.name">
                    <a v-brand-href="brand.domain">
                        <span class="brand-name">{{brand.name}}</span>
                    </a>
                </div>
            </div>
        </div>
        <index-list class="index-list" :index-list="indexList"></index-list>
    </div>
</template>
<style>
    .brand-list-box {
        width: 100%;

        /* padding: 20px 0; */

        background: #f6f6f6;

        /* border-top: 1px solid #eee; */

        .per-brand-box {
            background: #fff;

            /* padding: 0 30px; */

            /* border-top: 1px solid #eee; */

            /* border-bottom: 1px solid #eee; */

            &:not(:first-of-type) {
                /* margin-top: 20px; */
            }

            .index {
                height: 60px;
                line-height: 60px;
                background-color: #f6f6f6;
                padding: 0 30px;
                font-weight: bold;

                a {
                    font-size: 32px;
                }
            }
        }

        .brand-big-box {
            width: 100%;
        }

        .brand-box {
            width: 100%;
            height: 80px;
            line-height: 80px;
            border-bottom: 1px solid #f6f6f6;

            /* float: left; */

            overflow: hidden;

            /* text-align: center; */

            .brand-logo {
                margin: 0 auto;
                width: 136px;
                height: 136px;
                overflow: hidden;

                img {
                    width: 100%;
                }
            }

            .brand-name {
                /* width: 136px; */

                font-size: 24px;
                color: #000;
                overflow: hidden;

                /* white-space: nowrap; */

                /* text-overflow: ellipsis; */

                display: inline-block;
                padding: 0 30px;
            }

            a {
                height: 100%;
                width: 100%;
                display: inline-block;
                font-weight: bold;
            }
        }
    }

    .index-list {
        top: 90px !important;
    }
</style>
<script>
    import $ from 'jquery';
    import bus from 'common/vue-bus';
    import tip from 'common/tip';
    import indexList from 'component/tool/index-list.vue';

    export default {
        props: ['channel'],
        data() {
            return {
                brandList: [],
                indexList: [],
                currentChannel: this.channel,
            };
        },
        watch: {
            channel(val) {
                this.currentChannel = val;
                this.getBrandList();
            }
        },
        methods: {
            getBrandList() {
                let data = {
                    channel: this.currentChannel
                };

                $.ajax({
                    url: '/brand/list.json',
                    data: data
                }).then(result => {
                    this.brandList = result.brandList;
                    this.indexList = result.indexList;
                }).fail(() => {
                    tip('网络错误');
                });
            }
        },
        components: {
            indexList
        },
        created() {
            this.getBrandList();
            bus.$on('channel.change', (page, channel) => {
                this.currentChannel = channel;
                this.getBrandList();
            });
        }
    };
</script>