<!--pages/location/event/action/action.wxml-->
<view class="container">
  <view class="session-header {{action}}-session">
    <text class="wish" bindtap="handleWish">感兴趣</text>
    <text class="join" bindtap="handleJoin">要参加</text>
  </view>
  <view class="session-content {{beforeAnimation}}" animation="{{animationData}}">
    <text class="title">{{title}}</text>
    <text class="some-count">{{somecount}}</text>
    <textarea class="textarea" placeholder-class="placeholder" placeholder="写点评论吧..." focus="true" data-action="{{action}}" bindinput="handleInput" value="{{value}}" />
    <button class="confirm" size="default" type="primary" bindtap="handleComfirm" data-action="{{action}}">确定</button>
  </view>
</view>

/* pages/location/event/action/action.wxss */

.container {
  flex: 1;
  background: #fff;
}

.session-header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  border-bottom: 1px solid #e6e6e6;
}

.wish-session .wish {
  color: #4a4a4a;
  font-size: 32rpx;
  font-weight: 600;
  position: relative;
  border-bottom: 2px solid #4a4a4a;
  padding-bottom: 10rpx;
  left: 50%;
  margin-left: -50rpx;
}

.wish-session .join {
  font-size: 24rpx;
  color: #9e9e9e;
  position: relative;
  left: 50%;
  margin-left: 40rpx;
}

.join-session .wish {
  font-size: 24rpx;
  color: #9e9e9e;
  position: relative;
  left: 50%;
  margin-left: -140rpx;
}

.join-session .join {
  color: #4a4a4a;
  font-size: 32rpx;
  font-weight: 600;
  position: relative;
  border-bottom: 2px solid #4a4a4a;
  padding-bottom: 10rpx;
  left: 50%;
  margin-left: 20rpx;
}

.session-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  padding: 0rpx 30rpx 0rpx 30rpx;
  margin-top: 20rpx;
  word-break: keep-all;
  box-sizing: border-box;
}

.title {
  margin-top: 30rpx;
  font-weight: 500;
  font-size: 28rpx;
  text-align: center;
  color: #4a4a4a;
}

.some-count {
  font-size: 24rpx;
  color: #9e9e9e;
  font-weight: 500;
  line-height: 1.6;
}

.textarea {
  display: block;
  width: 100%;
  height: 200rpx;
  font-size: 28rpx;
  color: #4a4a4a;
  margin: 30rpx 30rpx 30rpx 30rpx;
  padding: 20rpx;
  border: 1px solid #e6e6e6;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.placeholder {
  color: #9e9e9e;
}

.confirm {
  margin: 0rpx 30rpx 0rpx 30rpx;
  box-sizing: border-box;
  width: 100%;
}

.left {
  left: -100%;
}

.right {
  right: -100%;
}

// pages/location/event/action/action.js
Page({
  data: {
    "title": "",
    "somecount": "",
    "action": "join",
    "beforeAnimation": "",
    "wish": "",
    "join": "",
    "value": ""
  },
  onLoad: function (options) {
    var title = options.title;
    var somecount = options.somecount;
    var action = options.action;
    this.setData({ "action": action, "title": title, "somecount": somecount });
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  /** 用户点击感兴趣，执行动画 */
  handleWish: function (event) {
    this.setData({ "action": "wish", "beforeAnimation": "left", "value": "" });
    var animation = wx.createAnimation({
      duration: 400,
      timingFunction: 'linear'
    })

    animation.translateX(375).step()

    this.setData({
      animationData: animation.export()
    })
    setTimeout(function () {
      this.reset();
    }.bind(this), 400);
  },
  /** 用户点击要参加，执行动画 */
  handleJoin: function (event) {

    this.setData({ "action": "join", "beforeAnimation": "right", "value": "" });
    var animation = wx.createAnimation({
      duration: 400,
      timingFunction: 'linear'
    })

    animation.translateX(-375).step()

    this.setData({
      animationData: animation.export()
    });

    setTimeout(function () {
      this.reset();
    }.bind(this), 400);
  },
  /** 动画完成后，恢复状态 */
  reset: function () {
    var animation = wx.createAnimation({
      duration: 0,
      timingFunction: 'linear'
    })
    animation.translateX(0).step();
    this.setData({ "beforeAnimation": "", animationData: animation.export() });
  },
  /** 用户点击确定 */
  handleComfirm: function (event) {
    wx.navigateBack();
  },
  /** 用户输入的文本 */
  handleInput: function (event) {
    var action = event.currentTarget.dataset.action;
    var value = event.detail.value;
    var readyData = {};
    readyData[action] = value;
    this.setData(readyData);
  }
})