// new.js
// TODO 并不是所有非中文字符宽度都为中文字符宽度一半，需特殊处理
// TODO 由于文本框聚焦存在bug，故编辑模式待实现

const input = require('../../utils/input');
const config = require('../../config');
const geo = require('../../services/geo');
const util = require('../../utils/util');const RESOLUTION = 750;  // 微信规定屏幕宽度为750rpx
const MARGIN = 10;  // 写字面板左右margin
const ROW_CHARS = Math.floor((RESOLUTION - 2 * MARGIN) / config.input.charWidth);
const MAX_CHAR = 1000;  // 最多输1000字符// 内容布局
const layoutColumnSize = 3;// 日记内容类型
const TEXT = 'TEXT';
const IMAGE = 'IMAGE';
const VIDEO = 'VIDEO';const mediaActionSheetItems = ['拍照', '选择照片', '选择视频'];
const mediaActionSheetBinds = ['chooseImage', 'chooseImage', 'chooseVideo'];var app = getApp();Page({data: {// 日记对象
    diary: {meta: {},list: [],},// 日记内容布局列表（2x2矩阵）
    layoutList: [],// 是否显示loadingshowLoading: false,// loading提示语loadingMessage: '',// 页面所处模式showMode: 'common',// 输入框状态对象
    inputStatus: {row: 0,column: 0,lines: [''],mode: 'INPUT',auto: false,  // 是否有自动换行
    },// 当前位置信息poi: null,// 点击`图片`tab的action-sheetmediaActionSheetHidden: true,// 多媒体文件插入action-sheet
    mediaActionSheetItems: mediaActionSheetItems,// 多媒体文件插入项点击事件
    mediaActionSheetBinds: mediaActionSheetBinds,// 是否显示底部tab栏showTab: true,},// 显示底部tab
  showTab() {this.setData({showTab: true});},// 隐藏底部tab
  hideTab() {this.setData({showTab: false});},// 显示loading提示
  showLoading(loadingMessage) {this.setData({showLoading: true, loadingMessage});},// 隐藏loading提示
  hideLoading() {this.setData({showLoading: false, loadingMessage: ''});},// 数据初始化
  init() {this.getPoi();this.setMeta();},// 设置日记数据
  setDiary(diary) {let layout = util.listToMatrix(diary.list, layoutColumnSize);this.setData({diary: diary, layoutList: layout});this.saveDiary(diary);},// 保存日记// TODO sync to server
  saveDiary(diary) {const key = config.storage.diaryListKey;app.getLocalDiaries(diaries => {diaries[diary.meta.title] = diary;wx.setStorage({key: key, data: diaries});})},// 页面初始化onLoad: function(options) {if (options) {let title = options.title;if (title) {this.setData({'diary.meta.title': title,'diary.meta.create_time': util.formatTime(new Date()),'diary.meta.cover': ''});}}this.init();},// 页面渲染完成onReady: function(){wx.setNavigationBarTitle({title: '编辑日记'});},onShow:function(){// 页面显示
  },onHide:function(){// 页面隐藏
  },onUnload:function(){// 页面关闭console.log('页面跳转中...');},// 清除正在输入文本
  clearInput() {this.setData({inputStatus: {row: 0,common: 0,lines: [''],mode: 'INPUT',auto: false,}});},// 结束文本输入
  inputDone() {let text = this.data.inputStatus.lines.join('\n');let diary = this.data.diary;if (text) {diary.list.push(this.makeContent(TEXT, text, ''));this.setDiary(diary);}this.inputCancel();},// 进入文本编辑模式
  inputTouch(event) {this.setData({showMode: 'inputText'});},// 取消文本编辑
  inputCancel() {this.setData({showMode: 'common'});this.clearInput();},// 文本输入
  textInput(event) {console.log(event);let context = event.detail;// 输入模式if (this.data.inputStatus.mode === 'INPUT') {if (context.value.length != context.cursor) {console.log('用户输入中...');} else {let text = context.value;let len = input.strlen(text);let lines = this.data.inputStatus.lines;let row = this.data.inputStatus.row;let [extra, extra_index] = [[['']], 0];let hasNewLine = false;console.log('当前文本长度: ' + len);// 当前输入长度超过规定长度if (len >= ROW_CHARS) {// TODO 此处方案不完善// 一次输入最好不超过两行hasNewLine = true;while (input.strlen(text) > ROW_CHARS) {let last = text[text.length - 1];if (input.strlen(extra[extra_index] + last) > ROW_CHARS) {extra_index += 1;extra[extra_index] = [''];}extra[extra_index].unshift(last);text = text.slice(0, -1);}}lines[lines.length - 1] = text;if (hasNewLine) {extra.reverse().forEach((element, index, array) => {lines.push(element.join(''));row += 1;});}let inputStatus = {lines: lines,row: row,mode: 'INPUT',auto: true,  // // 自动换行的则处于输入模式
      };this.setData({inputStatus});}}},// 文本框获取到焦点
  focusInput(event) {let isInitialInput = this.data.inputStatus.row == 0 &&this.data.inputStatus.lines[0].length == 0;let isAutoInput = this.data.inputStatus.mode == 'INPUT' &&this.data.inputStatus.auto == true;let mode = 'EDIT';if (isInitialInput || isAutoInput) {mode = 'INPUT';}this.setData({'inputStatus.mode': mode});},// 点击多媒体插入按钮
  mediaTouch() {this.setData({showTab: false,mediaActionSheetHidden: false,});},mediaActionSheetChange(event) {this.setData({showTab: true,mediaActionSheetHidden: true,})},// 将内容写入至日记对象
  writeContent(res, type) {let diary = this.data.diary;if (type === IMAGE) {res.tempFilePaths.forEach((element, index, array) => {// TODO 内容上传至服务器diary.list.push(this.makeContent(type, element, ''))});}if (type === VIDEO) {// TODO 内容上传至服务器diary.list.push(this.makeContent(type, res.tempFilePath, ''))}// 设置日记封面if (type === IMAGE && !this.data.diary.meta.cover) {this.setData({'diary.meta.cover': res.tempFilePaths[0]});}this.setDiary(diary);this.hideLoading();this.showTab();},// 从相册选择照片或拍摄照片
  chooseImage() {let that = this;wx.chooseImage({count: 9,  // 最多选9张sizeType: ['origin', 'compressed'],sourceType: ['album', 'camera'],success: (res) => {this.setData({mediaActionSheetHidden: true});this.showLoading('图片处理中...');that.writeContent(res, IMAGE);}})},// 从相册选择视频文件
  chooseVideo() {let that = this;wx.chooseVideo({sourceType: ['album'],  // 仅从相册选择success: (res) => {this.setData({mediaActionSheetHidden: true});this.showLoading('视频处理中...');that.writeContent(res, VIDEO);}})},// 获得当前位置信息
  getPoi() {var that = this;wx.getLocation({type: 'gcj02',success: function(res) {geo.mapRequest('geocoder',{'location': geo.formatLocation(res)},loc => {let poi = {'latitude': res.latitude,'longitude': res.longitude,'name': loc.result.address,};that.setData({poi: poi});})}})},// 构造日记内容对象
  makeContent(type, content, description) {return {type: type,content: content,description: description,poi: this.data.poi,};},// 构造日记meta信息
  setMeta() {var that = this;app.getUserInfo(info => {that.setData({'diary.meta.avatar': info.avatarUrl,'diary.meta.nickName': info.nickName,})})},})

<!--new.wxml--><template name="common"><scroll-view class="container" scroll-y="true"><view class="common-container"><view class="item-group" wx:for="{{layoutList}}" wx:for-item="group"><block wx:for="{{group}}" wx:for-item="item"><block wx:if="{{item.type == 'TEXT'}}"><view class="album-item content-text"><view>{{item.content}}</view></view></block><block wx:elif="{{item.type == 'IMAGE'}}"><image src="{{item.content}}" class="album-item" mode="aspectFill"></image></block><block wx:elif="{{item.type == 'VIDEO'}}"><video class="album-item" src="{{item.content}}"></video></block></block></view></view></scroll-view><view class="tabbar" style="display:{{showTab ? 'flex' : 'none'}};"><view class="item" bindtap="inputTouch"><image class="icon" mode="aspectFit" src="../../images/tabbar/text.png"></image></view><view class="item" bindtap="mediaTouch"><image class="icon" mode="aspectFit" src="../../images/tabbar/image.png"></image></view><view class="item"><image class="icon" mode="aspectFit" src="../../images/tabbar/more.png"></image></view></view><action-sheet hidden="{{mediaActionSheetHidden}}" bindchange="mediaActionSheetChange"><block wx:for-items="{{mediaActionSheetItems}}" wx:for-index="id"><action-sheet-item class="action-item" bindtap="{{mediaActionSheetBinds[id]}}">{{item}}</action-sheet-item></block><action-sheet-cancel class='action-cacel'>取消</action-sheet-cancel></action-sheet>
</template><template name="inputText"><view class="input-container"><view style="height:47rpx" wx:for="{{inputStatus.lines}}" wx:for-index="idx"><input type="text" data-index="{{idx}}" placeholder="" bindinput="textInput" bindchange="textInputChange" value="{{item}}" auto-focus="{{idx == inputStatus.row ? true : false}}" bindfocus="focusInput"/></view></view><view class="tabbar"><view class="item" style="width:50%" bindtap="inputCancel"><image class="icon" mode="aspectFit" src="../../images/tabbar/cancel.png"></image></view><view class="item" style="width:50%" bindtap="inputDone"><image class="icon" mode="aspectFit" src="../../images/tabbar/ok.png"></image></view></view>
</template><view style="width:100%;height:100%"><block wx:if="{{showMode == 'common'}}"><template is="{{showMode}}" data="{{showTab: showTab, mediaActionSheetHidden: mediaActionSheetHidden, mediaActionSheetItems: mediaActionSheetItems, mediaActionSheetBinds: mediaActionSheetBinds, layoutList: layoutList}}"></template></block><block wx:if="{{showMode == 'inputText'}}"><template is="{{showMode}}" data="{{inputStatus}}"></template></block><loading hidden="{{!showLoading}}" bindchange="hideLoading">{{loadingMessage}}</loading>
</view>

/** new.wxss **/.container {height: 91%;
}.common-container {margin: 0.1rem;
}.item-group {display: flex;align-items: center;
}.album-item {flex-direction: column;margin: 0.1rem;background: white;width: 6.4rem;height: 6.4rem;
}.content-text{justify-content: center;align-items: center;display: flex;
}.content-text view {overflow: hidden;text-overflow: ellipsis;font-size: 10px;line-height: 15px;
}.tabbar {position: fixed;width: 100%;height: 8%;left: 0;right: 0;bottom: 0;background-color: white;display: flex;flex-direction: row;justify-content: space-between;
}.tabbar .item {width: 33.33%;display: flex;justify-content: center;align-items: center;
}.item .icon {width: 50rpx;height: 50rpx;
}.input-container {height: 80%;background-color: #eceff4;background-image: linear-gradient(#E1E6EA .1em, transparent .1em);background-size: 100% 48rpx;padding: 0;box-sizing: border-box;margin: 0 10rpx;
}.input-container input{height: 47rpx;max-height: 47rpx;font-size: 28rpx;margin: 0px;
}.action-item, .action-cacel {font-size: 30rpx;color: #39b5de;
}