<template>
    <section class="brand">
        <Header :title="title" :meaushow='meaushow' v-show="xiding"></Header>
        <van-tabs @change="getData"  v-show="xiding">
            <van-tab v-for="item in tabs" :title="item.text" :brand_area="title.brand_area" >
            </van-tab>
        </van-tabs>
        <!--索引分类-->
        <van-index-bar :index-list="indexList"  @select="indexSelect"  :z-index="33">
            <div class="data-box">
                <div class="data-group" v-for="(item,index) in brandMapData">
                    <van-index-anchor :index="index" >{{index}}</van-index-anchor>
                    <ul class="data-content" :class="{'act11':index==selecto}">
                        <li v-for="item1 in item" class="van-hairline--bottom">
                            <a :href="'/h5/view/#/brandList/'+item1.brand_id">
                                <img v-if="item1.brand_logo" :src="item1.brand_logo||'https://static.ichunt.com/dist/res/home/images/logo.png'" class="brand_img" alt="item1.brand_name">
                                <div v-else class="brand_img"></div>
                                <p class="brand_name" title="ATMEL">{{item1.brand_name}}</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </van-index-bar>
        <van-loading type="spinner" color="#000" class="loading-background" v-if="loading"/>
    </section>
</template>
<script>
    import Vue from 'vue';
    import {mapState} from 'vuex'
    import { IndexBar, IndexAnchor ,Tab, Tabs,Loading} from 'vant';
    import Header from '@/views/common/Header.vue';
    Vue.use(IndexBar).use(IndexAnchor).use(Tab).use(Tabs).use(Loading);

    export default {
        name: 'brand',
        data() {
            return {
                title:"品牌分类",
                meaushow:true,
                highlight:"red",
                selecto:"",
                xiding:true,
                tabs:[
                    {brand_area:"",text:"全部"},
                    {brand_area:1,text:"欧美"},
                    {brand_area:2,text:"日韩"},
                    {brand_area:3,text:"台湾"},
                    {brand_area:4,text:"中国内地"}
                ],

            }
        },
        computed: {
            ...mapState({
                loading: state => state.brand.loading,
                indexList:state=>state.brand.indexList,
                brandMapData:state=>state.brand.brandMapData,
            })
        },
        watch: {

        },
        created() {
            this.getData();
        },
        mounted() {
            this.scrollFns();
        },
        methods: {
            getData(index){
                var brand_area=index==0?"":index;
                this.$store.dispatch({
                    type: 'brandList',
                    brand_area:brand_area
                })
            },
            indexSelect(index){
                this.selecto=index;
                if(index){
                    this.xiding=false;
                }else{
                    this.xiding=true;
                }

            },
            scrollFns() {
                var self=this;
                window.onscroll= function(){
                    var ele=document.querySelector('div.van-index-anchor--sticky')
                    if(ele){
                        self.xiding=false;
                    }else{
                        self.xiding=true;
                    }

                }
            }

        },
        components: {
            Header

        }
    }
</script>


<style scoped>
    @import "../../assets/css/brand/brand.min.css";
</style>