<!--mine.wxml-->

<template name="tab1">
    <view>
    </view>
</template>

<template name="tab2">
    <view>
    </view>
</template>

<template name="tab3">
    <view>
    </view>
</template>

<template name="tab4">
    <view>
    </view>
</template>

<view>
  <!--一个全屏模态对话框-->
  <view class="modal" style="{{modalShowStyle}}">
    <view class="dialog">
      <view class="modal-item" style="display:flex;justify-content:center;align-items:center;">
      请输入日记标题
      </view>
      <view class="modal-item" style="margin:0 auto;width:90%;">
        <input type="text" bindinput="titleInput" style="background-color:white;border-radius:2px;" value="{{diaryTitle}}" placeholder="请输入日记标题"></input>
      </view>
      <view class="modal-button" style="width:100%">
        <view style="color:green;border-right:1px solid #E5E7ED;" bindtap="touchAddNew">确定</view>
        <view bindtap="touchCancel">取消</view>
      </view>
    </view>
  </view>

  <view class="header">
    <view class="profile">
      <image class="avatar" mode="aspectFit" src="{{userInfo.avatar}}"></image>
      <view class="description">
        <view class="item">
          <view style="margin-right:5px">{{userInfo.nickname}}</view>
          <view>{{userInfo.sex}}</view>
        </view>
        <view class="item">{{userInfo.meta}}</view>
      </view>
      <image class="add" mode="aspectFill" src="../../images/icons/add.png" bindtap="touchAdd"></image>
    </view>

    <view class="tablist">
      <view wx:for="{{tabs}}" wx:for-index="idx" class="tab" bindtap="touchTab" style="{{item.extraStyle}}" id="{{idx}}">
        <view class="content" style="color:{{highLightIndex == idx ? '#54BFE2' : ''}};">
          <image class="image" mode="aspectFit" src="{{highLightIndex == idx ? item.iconActive : item.icon}}"></image>
          <view style="margin-top:2px;">{{item.title}}</view>
        </view>
      </view>
    </view>
  </view>

    <template is="{{currentTab}}"></template>
</view>

/**mine.wxss**/

.header {
  height: 130px;
  background: white;
}

.header .profile {
  height: 50%;
}

.profile .avatar {
  width: 50px;
  height: 50px;
  float: left;
  margin: 7.5px 10px;
  border-radius: 25px;
}

.profile .description {
  display: inline-block;
  margin: 7.5px auto;
  height: 50px;
}

.description .item {
    height: 50%;
    display: flex;
    align-items: center;
}

.profile .add {
    float: right;
    margin: 15px 10px;
    height: 35px;
    width: 35px;
}

.header .tablist {
    height: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tablist .tab {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 25%;
    margin: 7.5px 0px;
    border-right: 1px solid #eceff4;
}

.tab .content{
    width: 25px;
    height: 50px;
    font-size: 12px;
    color: #B3B3B3;
}

.tab .image {
    width: 25px;
    height: 25px;
    margin-top: 10px;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 99999;
    opacity: 0;
    transition: opacity 400ms ease-in;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal .dialog {
    width: 84%;
    height: 28%;
    background-color: #eceff4;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dialog .modal-item {
    height: 33.3%;
    width: 100%;
}

.modal-button {
    height: 100rpx;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.modal-button view {
    width: 50%;
    border-top: 1px solid #E5E7ED;
    display: flex;
    justify-content: center;
    align-items: center;
}

// mine.js

// 自定义标签
var iconPath = "../../images/icons/"
var tabs = [
    {
        "icon": iconPath + "mark.png",
        "iconActive": iconPath + "markHL.png",
        "title": "日记",
        "extraStyle": "",
    },
    {
        "icon": iconPath + "collect.png",
        "iconActive": iconPath + "collectHL.png",
        "title": "收藏",
        "extraStyle": "",
    },
    {
        "icon": iconPath + "like.png",
        "iconActive": iconPath + "likeHL.png",
        "title": "喜欢",
        "extraStyle": "",
    },
    {
        "icon": iconPath + "more.png",
        "iconActive": iconPath + "moreHL.png",
        "title": "更多",
        "extraStyle": "border:none;",
    },
]
var userInfo = {
    avatar: "http://tva3.sinaimg.cn/crop.0.0.540.540.50/6cbb1ee0jw8ej0zou5e71j20f00f0q3b.jpg",
    nickname: "小闹钟",
    sex: "♂",  // 0, male; 1, female
    meta: '1篇日记',
}


Page({

    // data
    data: {
        // 展示的tab标签
        tabs: tabs,

        // 当前选中的标签
        currentTab: "tab1",

        // 高亮的标签索引
        highLightIndex: "0",

        // 模态对话框样式 
        modalShowStyle: "",

        // 待新建的日记标题
        diaryTitle: "",

        // TODO 用户信息
        userInfo: userInfo,
    },

    // 隐藏模态框
    hideModal() {
        this.setData({modalShowStyle: ""});
    },

    // 清除日记标题
    clearTitle() {
        this.setData({diaryTitle: ""});
    },

    onShow: function() {
        this.hideModal();
        this.clearTitle();
    },

    // 点击tab项事件
    touchTab: function(event){
        var tabIndex = parseInt(event.currentTarget.id);
        var template = "tab" + (tabIndex + 1).toString();

        this.setData({
            currentTab: template,
            highLightIndex: tabIndex.toString()
        }
        );
    },

    // 点击新建日记按钮
    touchAdd: function (event) {
        this.setData({
            modalShowStyle: "opacity:1;pointer-events:auto;"
        })
    },

    // 新建日记
    touchAddNew: function(event) {
        this.hideModal();

        wx.navigateTo({
            url: "../new/new?title=" + this.data.diaryTitle,
        });
    },

    // 取消标题输入
    touchCancel: function(event) {
        this.hideModal();
        this.clearTitle();
    }, 

    // 标题输入事件
    titleInput: function(event) {
        this.setData({
            diaryTitle: event.detail.value,
        })
    }
})