<view class="home-wrap">
  <swiper indicator-dots="true" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}">
    <view wx:for="{{banner}}" wx:key="unique">
      <swiper-item>
        <view>
          <navigator url="{{item.jumpurl}}"><image src="{{item.adimage}}" mode="scaleToFill center" class="banner"></image></navigator>
        </view>
      </swiper-item>
    </view>
  </swiper>
  <view class="scroll-txt" bindtap="search">
  	<icon type="search" size="14" style="margin: 0px 5px 0 0"></icon>
    <text class="scroll-ads">搜索</text>
  </view>
  <view class="ads-list">
  	<view class="ads-item" bindtap="vipcard">
	    <image src="../../images/index_vip.png" mode="scaleToFill center"></image>
	    <text>云车会员卡</text>
    </view>
    <view class="ads-item" bindtap="gotoWeizhang">
	    <image src="../../images/index_weizhang.png" mode="scaleToFill center"></image>
	    <text>违章查询</text>
    </view>
  </view>
  <view class="workbench">
    <text class="title">商家专区</text>
    <view class="hot-list">
      <view class="hot-item" wx:for="{{shopType}}" wx:key="unique" wx:for-item="item" data-id="{{item.type}}" data-title="{{item.typeName}}" bindtap="gotoShop">
        <image src="{{item.icon}}" mode="scaleToFill center"></image>
        <text>{{item.typeName}}</text>
      </view>
    </view>
  </view>
  <view class="workbench">
    <text class="title">汽车服务</text>
    <view class="hot-list">
      <view class="hot-item" wx:for="{{serviceType}}" wx:key="unique" wx:for-item="item" data-id="{{item.type}}" data-title="{{item.typeName}}" bindtap="gotoService">
        <image src="{{item.icon}}" mode="scaleToFill center"></image>
        <text>{{item.typeName}}</text>
      </view>
    </view>
  </view>
</view>

.home-wrap{
  background: #f2f2f2;
}
.banner{
  width: 100%;
  height: 360rpx;
}
.scroll-txt{
  text-align: center;
  background: #fff; 
  margin: 10rpx 20rpx;
  border: 10px transparent;
  padding: 12rpx 0 12rpx 0;
  color: #333;
}
.scroll-ads{
  text-align: center;
  font-size: 28rpx;
}
.ads-list{
  display: flex;
  flex-direction: row;
  flex:1;
  margin-bottom: 1rpx;
}
.ads-item{
  flex:1;
}
.ads-item image{
  width: 250rpx;
  height: 250rpx;
  margin:auto;
  display:block;
}
.ads-item text{
  font-size: 26rpx;
  display: block;
  color: #333;
  margin: 18rpx auto;
  text-align:center;
}
.sub-banner{
  width: 100%;
  height: 120px;
}

.workbench{
  font-size: 28rpx;
  background: #fff;
  padding-bottom: 10rpx;
  margin-bottom:10rpx;
  color: #333;
}
.workbench .title{
  font-size:30rpx;
  padding: 20rpx 20rpx;
  display: block;
}

.hot-list{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex:1;
}
.hot-item{
  text-align: center;
  background: #fff;
  width: 186rpx;
  text-align: center;
}
.hot-item image{
  width: 60rpx;
  height:60rpx;
  margin: 10rpx 0;
}
.hot-item text{
  font-size: 24rpx;
  display: block;
  color: #333;
  margin-bottom: 20rpx;
}
.workbench .list{
  display: flex;
  flex-direction: row;
  flex:1;
}
.workbench .items{
  width: 100rpx;
  flex:1;
  text-align: center;
}
.workbench .items image{
  width: 100rpx;
  height: 100rpx;
}
.workbench .items image.service-icon{
  width: 50rpx;
  height: 50rpx;
}
.workbench .items text{
  display: block;
  text-align: center;
  margin-top: 10rpx;
}

//获取应用实例
var app = getApp()
var api = require('../../utils/api');
var util = require('../../utils/util');

Page({
  data: {
    banner: null,
    autoplay: true,
    interval: 5000,
    duration: 800,
    shopType: [],
    serviceType: []
  },
  /*
  * 首页banner
  */
  setBanner: function () {
    let that = this;
    api.getAdByType({
      data: {
        adpos: 3,
      },
      success: (res) => {
        that.data.banner = res.data.result;
        that.setData(that.data);
      },
    });
  },
  setTypeList: function() {
    var that = this;
    api.getWelfareTypeList({
      success: (res) => {
        for (var i = res.data.result.length - 1; i >= 0; i--) {
        	var showType = res.data.result[i].showtype;
          if (showType == "1") {
            that.data.shopType.push(res.data.result[i]);
          } else if (showType == "0") {
            that.data.serviceType.push(res.data.result[i]);
          };
        };
        that.setData(that.data);
      }
    });
  },
  search: function() {
    var url = "../search/search";
	wx.navigateTo({
      url: url
    });
  },
  vipcard: function() {
  	wx.navigateTo({
      url: "../vip/vip"
    });
  },
  gotoWeizhang:function() {
	wx.showModal({
	    title: '提示',
	    content: '小程序暂不支持违章查询，目前正在紧锣密鼓开发中，请稍候…',
	    confirmColor: '#479de6',
	    success: function(res) {
	        
	    }
	})
  },
  gotoShop: function(res) {
	let param = res.currentTarget.dataset, title = param.title, id=param.id
    var url = "../merchant/merchant?type="+id+"&title="+ title;
	wx.navigateTo({
      url: url
    });
  },
  gotoService: function(res) {
  	let param = res.currentTarget.dataset, title = param.title, id=param.id
    var url = "../merchant/merchant?type="+id+"&title="+ title;
	wx.navigateTo({
      url: url
    });
  },
  /**
   * 入口
   */
  onLoad: function () {
    var that = this;
    that.setBanner();
    that.setTypeList();
  }
});