<template>
    <div class="brand-list-box">
        <div v-for="item in brandList" 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">
                    <a href="{{brand.link}}">
                        <div class="brand-logo">
                            <img v-lazy="brand.logo" alt="{{brand.name}}">
                        </div>

                        <span class="brand-name">{{brand.name}}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
    .brand-list-box {
        width: 100%;
        height: 600px;

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

        .brand-box {
            width: 25%;
            height: 175px;
            float: left;
            overflow: hidden;

            .brand-logo {
                height: 150px;
            }

            .brand-name {
                white-space: nowrap;
                color: #d0d0d0;
            }
        }
    }
</style>
<script>
    const $ = require('yoho-jquery');
    const tip = require('common/tip');

    module.exports = {
        props: ['channel'],
        data() {
            return {
                brandList: []
            };
        },
        watch: {
            channel() {
                this.getBrandList();
            }
        },
        methods: {
            getBrandList() {
                let data = {
                    channel: this.channel
                };
                let self = this;

                $.ajax({
                    url: '/get-brand-list',
                    data: data
                }).then(result => {
                    self.$set('brandList', result.brandList);
                }).fail(() => {
                    tip('网络错误');
                });
            }
        },
        created() {
            this.getBrandList();
        }
    };
</script>