<template>
    <div v-if="!isloading">
        <view class="ctrl-box">
			<u-searchB action-text="搜索" :focus="false" :clearabled="true" :show-action="false" 
            radius="40" v-model="Keywords" @chang="changeHandler"></u-searchB>
		</view>
        <div
        style="height: calc(100vh - 0px);width: calc(100vw);overflow: hidden;margin-top: 100rpx;"> 
            <view class="right-box">
                <uni-indexed-list :options="list" :show-select="true" @click="bindClick"/>
                <view style="height: calc(100vh - 0px); background: #fff;" v-if="!listShow">
                    <u-empty text="没有找到相关品牌信息" mode="order"></u-empty>
                </view>
            </view>
        </div>
        <!-- margin-top: 102rpx; -->
        <!-- aspectFill scaleToFill-->
        <!-- <view style="background: #fff;margin-bottom: 100rpx;" v-show="!listShow">
            <u-empty text="没有找到相关品牌信息" mode="order"></u-empty>
        </view>
        <div style='height: calc(100vh - 0);'>
            <u-index-listB :scrollTop="scrollTop">
                <view v-for="(item,index) in indexList" :key="index">
                    <u-index-anchorB :index="item.letter"/>
                    <view class="imgList" v-if="item.letter=='*'">
                        <view v-for="(x,y) in item.data" :key='y' class="imgList-bj" @click="goback(x)">
                            <view  @click="onClick(x)">
                                <image :src="x.Logo"  mode="scaleToFill"/>
                            </view>
                        </view>
                    </view>
                    <template v-else>
                    <view v-for="(x,y) in item.data" :key='y' @click="goback(x)" 
                        class="list-cel imgList-box">
                            <view class="img"  @click="onClick(x)">
                                
                                <image :src="x.Logo" mode="scaleToFill"/>
                            </view>
                            <view class="text"  @click="onClick(x)">
                                {{x.Name}}
                            </view>
                        </view>  
                    </template>
                    
                </view>
            </u-index-listB>
            
        </div> -->
      <auth
      v-if="showAuth"
      @changeuserinfo="reloadUserinfo"
      @gbAuth="gbAuth"
    ></auth>
    </div>
</template>
<script>
    import auth from "@/components/auth/index";
    import search from "@/components/search/index";
    import tabbars from "@/components/tabbar/index";
    import uniIndexedList from "@/components/uni-indexed-list/uni-indexed-list";
    export default {
        components: {
            auth,
            search,
            tabbars,
            uniIndexedList
        },
      data() {
        return {
            topNum:'',
            scrollTop:0,
            showAuth:false,
          cat_style:2,
          isloading: true,
          pageTitle: "选择品牌",
          navHeight: 0,
          Keywords:'',
          marginStyle:"",
          customStyle:{
            top:'101rpx'
          },
          anchorStyle:{
            color: "#2979ff",
            position: "fixed",
            top: "102px",
            zIndex: "965",
          },
          styleStr: {
            placeholder: "搜索",
            background: "rgb(240,239,244)",
            textPosition: "center",
            textColor: "rgb(200,200,200)",
            color: "#FFF",
            radius: 100,
          },
          types: [],
          contentHeight: 0,
          cstyle: {
              Type:1,
              Style:1
          },
          classData:[],
          classObj:{
            Id:''
          },
          AllList:[],
          indexList: [
            // {ti:"*"}, {ti:"A"}, {ti:"B"}, {ti:"C"}, {ti:"D"}, 
            // {ti:"E"}, {ti:"F"}, {ti:"G"}, {ti:"H"}, {ti:"I"}, 
            // {ti:"J"}, {ti:"K"}, {ti:"L"}, {ti:"M"}, {ti:"N"}, 
            // {ti:"O"}, {ti:"P"}, {ti:"Q"}, {ti:"R"}, {ti:"S"}, 
            // {ti:"T"}, {ti:"U"}, {ti:"V"}, {ti:"W"}, {ti:"X"}, 
            // {ti:"Y"}, {ti:"Z"}
		],
          list: [],
            u:{},
            listShow:true,
            arrary:[]
        };
      },
      computed:{
        
      },
      watch: {
        Keywords: {
            handler: function(value) {
                uni.showLoading({
                    title: '加载中'
                });
                if(value){
                    let arr = JSON.parse(JSON.stringify(this.AllList))
                    let lists = arr.filter(item=>{
                        item.data = item.data.filter(i=>{
                            return  i.Name.toLowerCase().indexOf(value.toLowerCase())!=-1;
                        })
                        return item.data && item.data.length>0
                    })
                    if(lists.length>0){
                        this.list = lists
                        this.indexList = lists
                        this.listShow = true
                        uni.hideLoading();
                    }else{
                        this.list  = []
                        this.indexList = []
                        this.listShow = false
                        uni.hideLoading();
                    }
                }else{
                    this.list = this.AllList
                    this.indexList = this.AllList
                    this.listShow = true
                    uni.hideLoading();
                }
                
            },
            deep: true
        }
    },
      onLoad(option) {
        this.navHeight = this.$navHeight - 2
        if(option.Id){
            this.classObj.Id = option.Id
        }
        this.u = uni.getStorageSync("mall_UserInfo");
        if (!this.u) {
            this.u = {
                nickName: "未登录",
                avatarUrl: "",
            };
            this.isloading = false
            this.showAuth = true;
        } else {
            this.getBrand()
        }
        
      },
      mounted() {
        // this.contentHeightB = this.$utils.calcContentHeight(-40)+'px';
        let currentPages = getCurrentPages();
        let c = this.$uiConfig.is_bang ? 80 : 52;
        this.contentHeight = this.$utils.calcContentHeight(c);
        let u = "/" + currentPages[currentPages.length - 1].route;
        let pages = uni.getStorageSync("basedata")
          ? uni.getStorageSync("basedata").bar_title
          : [];
        pages.forEach((x) => {
          if (x.value == u) {
            this.pageTitle = x.new_name ? x.new_name : x.name;
          }
        });
        uni.setNavigationBarTitle({
          title: this.pageTitle,
        });
        uni.showNavigationBarLoading();
        this.marginStyle=`${this.styleStr.top??0}px ${this.styleStr.right??0}px ${this.styleStr.bottom??0}px ${this.styleStr.left??0}px `
      },
      methods: {
        onClick(item) {
            uni.navigateTo({
                url: '/pages/Luxury/Valuation?BrandId='+item.Id
            });
        },
        reloadUserinfo() {
            this.u = uni.getStorageSync("mall_UserInfo");
            // this.showAuth=false;
            this.getBrand()
        },
        //关闭登录窗口
        gbAuth() {
            uni.navigateBack();
        },
        // 我要估价
        bindClick(e){
            uni.navigateTo({
                url: '/pages/Luxury/Valuation?BrandId='+e.item.Id
            });
        },
        chooseType(item){
          this.classObj = item  
          this.getBrand()
        },
        changeHandler(){
            this.Keywords = ''
        },
        // searchHandler(){
            
        // },
        onPageScroll(e) {
            // this.topNum = '30'
            this.scrollTop = e.scrollTop;
            // console.log(this.scrollTop)
        },
        goback(item,type){
            Name=item.Name
            let pages = getCurrentPages(); // 当前页面
            let beforePage
            beforePage = pages[pages.length - 2]; // 前一个页面
            // console.log( beforePage.$vm,'===')
            
            setTimeout(()=>{
                    uni.navigateBack({
                        delta:1,
                        success: function() {
                            beforePage.$vm.getPickcar(Name); // 执行前一个页面的方法
                        }
                    });
            },100)
            
        },
        // 获取品牌列表
        getBrand(){
            uni.showLoading({
                title: '加载中'
            });
            this.request2(
                {
                    url: '/api/AppletAssess/GetBrandGroupList',
                    data: {
                        CategoryId: this.classObj.Id?this.classObj.Id:1
                    }
                },
                res => {
                    this.isloading = false;
                    if(res.resultCode==1){
                        this.AllList = res.data
                        this.list = res.data
                        this.indexList = res.data
                        uni.hideLoading();
                        
                    }
                    uni.hideNavigationBarLoading();
                }
            );
        },
        // 获取分类列表
        getClass(){
            uni.showLoading({
                title: '加载中'
            });
            var UserPageType = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;		
            this.request2(
                {
                    url: '/api/AppletAssess/GetCategoryDropList',
                    data: {}
                },
                res => {
                    this.isloading = false;
                    if(res.resultCode==1){
                        uni.hideLoading();
                        this.classData = res.data;
                        this.classObj = this.classData[0]
                        this.getBrand()
                    }
                    
                    uni.hideNavigationBarLoading();
                }
            );
        },
      },
    };
    </script>
    <style scoped>
        .ClassList-form{
            /* display: flex;
            justify-content: space-between;
            padding: 20rpx 0 0 0; */
        }
        .form-left{
            border-top: 1rpx solid #E7E7E7;
        }
        .name-box{
            padding: 40rpx 0;
            width: 180rpx;
            overflow: hidden;
            font-size: 30rpx;
            font-weight: 500;
            text-align: center;
            position: relative;
        }
        .name-box view{
            display: inline-block;
            width: 10rpx;
            height: 50rpx;
            position: absolute;
            left: 10rpx;
        }
        .name-box.active{
            font-weight: 600;
            background: #ffffff;
        }
        .name-box.active view{
            background: #D0A86C; 
        }
        .form-right{
            flex-grow: 1;
            border-top: 1rpx solid #F7F7F7;
        }
        .right-box{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .ctrl-box{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            padding: 20rpx 20rpx;
            background: #F7F7F7;
            z-index: 3;
        }
        .imgList{
            display: flex;
            flex-wrap: wrap;
            background: #f7f7f7;
        }
        .imgList-bj{
            flex-shrink: 0;
            width: 33.33%;
            padding: 20rpx 0 0 0;
        }
        .imgList-bj view{
            width: 227rpx;
            height: 120rpx;
            /* margin-right: 10rpx; */
            margin-left: 20rpx;
            border-radius: 20rpx;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .imgList-bj view image{
            width: 120rpx;
            height: 70rpx;
            display: block;
        }
        .imgList-box{
            display: flex;
            align-items: center;
            padding: 8rpx 20rpx;
        }
        .imgList-box image{
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
        } 
        .imgList-box view:last-child{
            width: 470rpx;
            flex: 1;
            font-size: 30rpx;
            color: #191919;
            font-weight:600;
            font-family: -webkit-pictograph;
            margin-left: 20rpx;
            word-wrap: break-word;
        }
        .u-index-ancho{
            top: 108rpx !important;
        }
    </style>