<template>
    <div v-if="!isloading">
        <view class="ctrl-box">
			<u-search action-text="搜索" :focus="true" :clearabled="true" :show-action="false" 
            radius="40" v-model="Keywords"
			></u-search>
            <!--  @search="searchHandler" @custom="searchHandler" @change="changeHandler" -->
		</view>
        <!-- <view class="search-box" :style="{ background: bg }" @click="goSearch">
            <u-search
                :placeholder="styleStr.placeholder"
                v-model="Keywords"
                :input-align="styleStr.textPosition"
                :value="Keywords"
                :bg-color="styleStr.color"
                :text-color="styleStr.textColor"
                :radius="styleStr.radius"
                :show-action="false"
                :margin="marginStyle"
            ></u-search>
        </view> -->
      <div
        :style="{ height: contentHeight + 'px' }"
        style="ovoerflow: hidden; overflow-y: auto;background: #F7F7F7;"
      > 
        <view class="ClassList-form">
            <!-- <view class="form-left">
                <view v-for="(item,index) in classData" :key="index"
                class="name-box" :class="{'active':classObj.Name==item.Name}"
                @click="chooseType(item)">
                    <view></view>
                    <text>{{item.Name}}</text>
                </view>
            </view> -->
            <view class="form-right">
                <view class="right-box">
                    <uni-indexed-list :Image="classObj.Image" :options="list" :show-select="true" @click="bindClick" />
                </view>
            </view>
            
        </view>
      </div>
    </div>
</template>
<script>
    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: {
            search,
            tabbars,
            uniIndexedList
        },
      data() {
        return {
          cat_style:2,
          isloading: true,
          pageTitle: "选择品牌",
          navHeight: 0,
          Keywords:'',
          marginStyle:"",
          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:null,
          AllList:[],
          list: [{
                letter: '*',
                data: []
            },{
                letter: 'A',
                data: []
            }, {
                letter: 'B',
                data: []
            }, {
                letter: 'C',
                data: []
            }, {
                letter: 'D',
                data: []
            }, {
                letter: 'E',
                data: []
            }, {
                letter: 'F',
                data: []
            }, {
                letter: 'G',
                data: []
            }, {
                letter: 'H',
                data: []
            }, {
                letter: 'I',
                data: []
            }, {
                letter: 'J',
                data: []
            }, {
                letter: 'K',
                data: []
            }, {
                letter: 'L',
                data: []
            }, {
                letter: 'M',
                data: []
            }, {
                letter: 'N',
                data: []
            }, {
                letter: 'O',
                data: []
            }, {
                letter: 'P',
                data: []
            }, {
                letter: 'Q',
                data: []
            }, {
                letter: 'R',
                data: []
            }, {
                letter: 'S',
                data: []
            }, {
                letter: 'T',
                data: []
            }, {
                letter: 'U',
                data: []
            }, {
                letter: 'V',
                data: []
            }, {
                letter: 'W',
                data: []
            }, {
                letter: 'X',
                data: []
            }, {
                letter: 'Y',
                data: []
            }, {
                letter: 'Z',
                data: []
            }, {
                letter: '#',
                data: []
            }]
        };
      },
      watch: {
        Keywords: {
            handler: function(value) {
                if(value){
                    let arr = this.AllList
                    arr = arr.filter(item=>{
                        return item.Name.indexOf(value)!=-1
                    })
                    console.log(arr,'--==')
                    if(arr.length>0){
                        arr.forEach(item=>{
                            this.list.forEach(i=>{
                                i.data = []
                                if(!item.IsHot){
                                    if(item.PinYin==i.letter){
                                        i.data.push(item)
                                    }
                                }else{
                                    if(i.letter=='*'){
                                        i.data.push(item)
                                    }
                                }
                            })
                        })
                    }else{
                        this.list.forEach(item=>{
                            item.data = []
                        })
                    }
                    
                }else{
                    this.AllList.forEach(item=>{
                        this.list.forEach(i=>{
                            if(!item.IsHot){
                                if(item.PinYin==i.letter){
                                    i.data.push(item)
                                }
                            }else{
                                if(i.letter=='*'){
                                    i.data.push(item)
                                }
                            }
                        })
                    })
                }
                
            },
            deep: true
        }
    },
      onLoad(option) {
        this.navHeight = this.$navHeight - 2;
        if (this.cstyle.cat_style == "4") {
        }
        if(option.Id){
           this.classObj.Id = option.Id
        }
        this.getBrand()
      },
      mounted() {
        this.contentHeightB = this.$utils.calcContentHeight(-40)+'px';
        let currentPages = getCurrentPages();
        // let c = this.$uiConfig.is_bang ? 80 : 52;
        let c = this.$uiConfig.is_bang ? 0 : 0;
        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: {
        bindClick(e){
            console.log(e,'--')
            uni.navigateTo({
                url: '/pages/Luxury/Valuation?id=1'
            });
        },
        chooseType(item){
          this.classObj = item  
          this.getBrand()
        },
        goHome() {
          uni.redirectTo({ url: "/pages/index/main" });
        },
        // changeHandler(){

        // },
        // searchHandler(){
            
        // },
        // 获取品牌列表
        getBrand(){
            uni.showLoading({
                title: '加载中'
            });
            this.request2(
                {
                    url: '/api/AppletAssess/GetBrandDropList',
                    data: {
                        CategoryId: 1
                    }
                },
                res => {
                    this.isloading = false;
                    if(res.resultCode==1){
                        uni.hideLoading();
                        this.AllList = res.data
                        this.AllList.forEach(item=>{
                            this.list.forEach(i=>{
                                if(!item.IsHot){
                                    if(item.PinYin==i.letter){
                                        i.data.push(item)
                                    }
                                }else{
                                    if(i.letter=='*'){
                                        i.data.push(item)
                                    }
                                }
                            })
                        })
                    }
                    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{
            padding: 20rpx 20rpx;
            background: #f2f2f2;
        }
    </style>