<view class="section">
    <!-- 左侧类型 -->
    <scroll-view scroll-y="true" class="left">
        <view wx:for="{{types}}" wx:key="typeId" data-type-id="{{item.id}}" bindtap="tapType" class="{{item.id == currType ? 'active' : ''}}" style="font-size:33rpx">
            {{item.name}}
        </view>
    </scroll-view>

    <!-- 右侧数据 -->
    <scroll-view scroll-y="true" class="right">
        <view class="typeTree">
            <view  class="brand" wx:for="{{typeTree}}" wx:for-item="data">
                <navigator url="../listdetail/listdetail?cat_id={{data.id}}" wx:key="typeId" class="item">
                    <image src="{{data.bz_1}}"></image>
                    <text>{{data.name}}</text>
                </navigator>
                    
            </view>
        </view>
    </scroll-view>
</view>

.section{ position: absolute; width: 100%; height: 100% ; overflow: hidden;}
.left{ position: absolute; left: 0; top: 0; height: 100%; width: 90px; background: #F6F6F6; text-align: center;font-size:28rpx;}
.left::before{ content: ""; position: absolute; background: #dcdcdc; right: 0; top: 0; height: 100%; border-right: 1rpx solid #dcdcdc;}
.left view.active{ background: #FFF; position: relative; z-index: 2;}
.left view{ display: block; height: 60px; line-height: 60px; border-bottom: 1px solid #dcdcdc;}

.right{ margin-left: 90px; height: 100%; overflow: hidden; width: auto;background: #fff;}
.right text{ font-size: 15px}
.typeTree{ padding: 10px 20px;width: 100%}
.typeTree .item{  text-align: center; display: inline-block; vertical-align: top;margin-left:14%;}
.typeTree .brand,
.typeTree .category{ flex-wrap: wrap; overflow: hidden;display: inline-block;width: 40%}
.typeTree .title{ padding: 10px 0; display: block; color: #333;}
.typeTree image { width: 100px; margin: 0 auto;}
.typeTree .brand image{ height: 100px;}
.typeTree .category image{ height: 85px;}
.typeTree .category{ padding-bottom: 10px;}
.item text{ padding-bottom: 10px; display: block;}

// import ApiList from  '../../config/api';
// import request from '../../utils/request.js';
//获取应用实例  
var app = getApp();
Page({
    data: {
        // types: null,
        typeTree: {}, // 数据缓存
        currType: 0 ,
        // 当前类型
        types: [],
        typeTree: [],
    },
        
    onLoad: function (option){
        var that = this;
        wx.request({
            url: app.d.ceshiUrl + '/Api/Category/index',
            method:'post',
            data: {},
            header: {
                'Content-Type':  'application/x-www-form-urlencoded'
            },
            success: function (res) {
                //--init data 
                var status = res.data.status;
                if(status==1) { 
                    var list = res.data.list;
                    var catList = res.data.catList;
                    var firstId= res.data.list[0].id;
                    that.setData({
                        currType:firstId,
                        types:list,
                        typeTree:catList,
                    });
                } else {
                    wx.showToast({
                        title:res.data.err,
                        duration:2000,
                    });
                }
            },
            error:function(e){
                wx.showToast({
                    title:'网络异常！',
                    duration:2000,
                });
            }
        });
    },
    tapType: function (e){
        var that = this;
        const currType = e.currentTarget.dataset.typeId;
        that.setData({
            currType: currType
        });
        console.log(currType);
        wx.request({
            url: app.d.ceshiUrl + '/Api/Category/getcat',
            method:'post',
            data: {cat_id:currType},
            header: {
                'Content-Type':  'application/x-www-form-urlencoded'
            },
            success: function (res) {
                var status = res.data.status;
                if(status==1) { 
                    var catList = res.data.catList;
                    that.setData({
                        typeTree:catList,
                    });
                } else {
                    wx.showToast({
                        title:res.data.err,
                        duration:2000,
                    });
                }
            },
            error:function(e){
                wx.showToast({
                    title:'网络异常！',
                    duration:2000,
                });
            }
        });
    },
    // 加载品牌、二级类目数据
    getTypeTree (currType) {
        const me = this, _data = me.data;
        if(!_data.typeTree[currType]){
            request({
                url: ApiList.goodsTypeTree,
                data: {typeId: +currType},
                success: function (res) {
                    _data.typeTree[currType] = res.data.data;
                    me.setData({
                        typeTree: _data.typeTree
                    });
                }
            });
        }
    }
})