<view class="page">
    <view class="page__bd">
        <view class="weui-tab">
            <view class="weui-navbar">
                <block wx:for="{{tabs}}" wx:key="*this">
                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
                        <view class="weui-navbar__title">{{item}}</view>
                    </view>
                </block>
                <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
            </view>
            <view class="weui-tab__panel">
                <view class="weui-tab__content" hidden="{{activeIndex != 0}}">
                  <view class="weui-cell" wx:for="{{my}}">
                    <navigator url="/pages/appointment/index?id={{item.id}}">
                      <view class="weui-cell__bd">
                          <view>{{item.name}}({{item.phone}})</view>
                          <view style="font-size: 13px;color: #888888;">人数:{{item.surplus}}</view>
                          <image wx:if="{{item.status}}" src="/img/app{{item.status}}.png" class="status_icon"></image>
                      </view>
                    </navigator> 
                    <image wx:if="{{item.phone}}" src="/img/tel1.png" class="tel" bindtap="tel" data-phone="{{item.phone}}"></image>
                  </view>
                </view>
                <view class="weui-tab__content" hidden="{{activeIndex != 1}}">
                  <view class="weui-cell" wx:for="{{Passenger}}">
                    <navigator url="/pages/info/index?id={{item.id}}">
                        <view class="weui-cell__bd">
                            <view>{{item.departure}} -> {{item.destination}}</view>
                            <view style="font-size: 13px;color: #888888;">出发时间:{{item.time}}</view>
                            <image wx:if="{{item.status}}" src="/img/app{{item.status}}.png" class="status_icon"></image>
                        </view>
                    </navigator> 
                    <image wx:if="{{item.phone}}" src="/img/tel1.png" class="tel" bindtap="tel" data-phone="{{item.phone}}"></image>
                  </view>
                </view>
            </view>
        </view>
    </view>
</view>

/* appointment.wxss */
.page{background: #f5f5f5;}
.weui-cell{position:relative}
.status_icon{
  width:40px;
  height:40px;
  position:absolute;
  top:0px;
  right:0px;
}
.weui-tab__content{
    margin-top: 10px;
    background: #fff;   
}
.weui-navbar{background: #fff;}
.tel{width:30px;
height:30px;
position:absolute;
top:20px;
right:30px;
}

var app = getApp();
var util = require('../../utils/util.js'); 

var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
Page({
  data: {
    tabs: ["我是车主", "我是乘客"],
    activeIndex: 0,
    sliderOffset: 0,
    sliderLeft: 0
  },
  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });
  },
  tabClick: function (e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
  },
  onShow:function(){
    this.getPassenger();
    this.getMy();
  },
  tel:function(e){
    wx.makePhoneCall({
      phoneNumber: e.target.dataset.phone
    })
  },
  getPassenger: function () {
    var that = this;
    util.req('appointment/getPassenger',{sk:app.globalData.sk},function(data){
      if(data.status == 1){
        var list = data.data;
        var arr = new Array();
        list.forEach(function (item) {
          var status = item.status;
          var phone = item.phone;
          if (item.status == 0 && (new Date().getTime()) > (item.time * 1000)) {
              var status = 3;
              var phone = false;
          }
          arr.push({
            departure: ((item.departure).split('市')[1]).replace(/([u4e00-u9fa5]+[县区]).+/, '$1'),
            destination: ((item.destination).split('市')[1]).replace(/([u4e00-u9fa5]+[县区]).+/, '$1'),
            time: util.formatTime(new Date(item.time * 1000)),
            status: status,
            id:item.id,
            phone: phone
          })
        })
        that.setData({ 'Passenger': arr});
      }
    })
  },
  getMy: function () {
    var that = this;
    util.req('appointment/my', { sk: app.globalData.sk }, function (data) {
      if (data.status == 1) {
        var list = data.data;
        that.setData({my:list});
      }
    })
  }
});