<!--issues.wxml-->
<view class="container">
  <view class="list-btn" bindtap="openList">
    <image class="btn-icon" src="/static/images/icon/tick2.png"></image>
    <text class="btn-text">我的反馈记录（{{feednum}}次）</text>
    <view class="btn-open">
      <image class="btn-open-img" src="/static/images/more/{{status ? 'up' : 'down'}}.png"></image>
    </view>
  </view>

  <view class="issues-list" wx:if="{{status}}">
    <block>
      <!--无反馈记录-->
      <view wx:if="{{hasFeed == false}}">
        <view class="imgitem">
          <image src="/static/images/norecord1.png" class="empty_img"></image>
        </view>
        <view class="txtitem">
          <text class="t28rpx">暂无您的反馈记录</text>
        </view>
      </view>
      <view wx:if="{{hasFeed}}" wx:for="{{feedList}}" wx:key="id" class="issues-item {{index == itemopen ? '' : 'close'}}" data-index="{{index}}" bindtap="openItem">
        <text class="btn-text">{{item.title}}</text>
        <text class="item-status">{{item.pubtime}}</text>
        <view class="btn-open" wx:if="{{index != itemopen}}">
          <image class="btn-open-img" src="/static/images/more/down.png"></image>
        </view>

        <view class="item-bd" wx:else>
          <view class="item-comment">
            <image class="item-comment-img" src="{{item.feedpic}}"></image>
            <view class="item-comment-bd">
              <text>{{item.content}}</text>
            </view>
          </view>
        </view>
      </view>

      <text class="issues-remind">若要了解更多反馈信息，请访问 —— http://together.demgo.me/。</text>
    </block>
  </view>

  <block wx:else>
    <text class="issues-label">新建反馈</text>
    <form bindsubmit="submitForm">
      <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{TopTips}}</view>
      <view class="issues-panel">
        <view class="issues-input">
          <input placeholder="请输入反馈标题" name="title" value="{{title}}" />
        </view>
        <textarea class="issues-textarea" cursor-spacing="50" placeholder="请输入反馈内容" name="content" value="{{content}}"></textarea>
      </view>

      <block>
        <text class="issues-label">选择图片（可选）</text>
        <view class="issues-img-panel">
          <view class="issues-photo-item add-photo" bindtap="uploadPic" wx:if="{{!isSrc}}"></view>
          <view wx:if="{{isSrc}}" class="image_box">
            <view class="picPre">
              <image src="{{src}}" mode="aspectFit"></image>
              <view bindtap="clearPic"></view>
            </view>
          </view>
        </view>
      </block>

      <text class="issues-remind ">您可以加入"一起 "用户反馈QQ群285263346进行即时反馈。</text>
      <button class="submit-btn" loading="{{isLoading}}" hover-start-time="200" disabled="{{isdisabled}}" formType="submit">提交反馈</button>
    </form>
  </block>
</view>

/**issuse.wxss**/
@import '/style/weui.wxss';
.container{
    background-color: #f6f6f6;
    padding: 0;
    padding-top: 30rpx;
    font-size: 11pt;
    box-sizing: border-box;
}
.list-btn {
  align-items: center;
  font-size: 11pt;
  padding: 0 30rpx 0 10px;
  margin-bottom: 10rpx;
  display: flex;
  background-color: #fff;
  min-height: 85rpx;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.list-btn:active {
  background-color: #fcfcfc;
}
.btn-icon {
  width: 45rpx;
  height: 45rpx;
  margin-right: 15rpx;
}
.btn-text{
    flex: 1;
    margin: 20rpx 0 15rpx;
}
.btn-open {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 10rpx;
}
.btn-open-img {
  width: 30rpx;
  height: 30rpx;
}
.issues-list{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 10rpx;
}
.item-labels{
    flex: 1;
}
.item-label{
    flex: 1;
    background: #7acfa6;
    color: #fff;
    font-size: 9pt;
    padding: 4rpx 10rpx;
    border-radius: 3px;
    margin: 0 5rpx;
}
.item-status{
    font-size: 10pt;
    color: #999;
}
.issues-item{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #fff;
    margin: 10rpx 30rpx;
    font-size: 11pt;
    padding: 15rpx 25rpx;
    min-height: 100rpx;
    border-radius: 3px;
    box-shadow: 1px 2px 3px #ddd;
}
.issues-item.close {
    flex-direction: row;
    align-items: center;
}
.issues-item.close:active{
    background-color: #fcfcfc;
    opacity: .8;
}
.item-hd{
    display: flex;
    align-items: center;
}
.btn-id {
    flex-shrink: 0;
    color: #aaa;
    font-size: 10pt;
    margin-right: 10rpx;
}
.issues-item.close .btn-text{
    flex: 1 1 auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
}
.item-bd{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding:  0 10rpx 15rpx;
    font-size: 10pt;
}
.item-content {
    padding-bottom: 20rpx;
}
.item-comment{
    display: flex;
    border-top: 1rpx solid #eee;
    padding: 10rpx 5rpx;
}
.item-comment-img{
    flex-shrink: 0;
    width: 100px;
    height: 70px;
    margin: 10rpx 20rpx 0 10rpx;
    border-radius: 3px;
}
.item-comment-bd{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 20px;
}
.item-comment-name{
    font-size: 9pt;
    color: #999;
}

.issues-label{
    font-size: 10pt;
    line-height: 100%;
    color: #999;
    margin: 25rpx 20rpx 15rpx;
}
.issues-panel{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}
.issues-img-panel{
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    padding: 15rpx 25rpx;
}
.issues-img-panel.error{
    background: rgba(231, 138, 176, 0.06);
}
.issues-input{
    border-bottom: 1px solid #e5e5e5;
    padding: 15rpx 25rpx;
}
.issues-input.error{
    background: rgba(231, 138, 176, 0.06);
}
.issues-textarea{
    width: 100%;
    padding: 25rpx;
    min-height: 225rpx;
    box-sizing: border-box;
}
.issues-textarea.error{
    background: rgba(231, 138, 176, 0.06);
}
.issues-photo-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    margin: 20rpx;
    margin-right: 0;
    width: 135rpx;
    height: 135rpx;
    border: 1rpx solid #e5e5e5;
    border-radius: 5rpx;
}
.issues-photo-item:active{
    opacity: .8;
}
.issues-photo-item .remind-img{
    padding: 0;
}
.issues-photo-item image{
    width: 100%;
    height: 100%;
}
.add-photo:active {
    background: #f0f0f0;
}
.add-photo::before, .add-photo::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #e5e5e5;
}
.add-photo:active::before, .add-photo:active::after{
    background: #ddd;
}
.add-photo::before {
    width: 10rpx;
    height: 80rpx;
    margin-top: -40rpx;
    margin-left: -5rpx;
}
.add-photo::after {
    width: 80rpx;
    height: 10rpx;
    margin-top: -5rpx;
    margin-left: -40rpx;
}
.issues-remind {
    flex: 1;
    font-size: 9pt;
    line-height: 135%;
    color: #ccc;
    padding: 0 30rpx;
    word-break: break-all;
    text-indent: 1em;
    padding-top: 30rpx;
}
.issues-remind.text-center{
    text-align: center;
}
.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40rpx 3%;
    height: 80rpx;
    border-radius: 3px;
    text-align: center;
    background-color: #118fff;
    color: #fff;
    font-size: 12pt;
    line-height: 150%;
    padding: 0;
    border: none;
}
.submit-btn.disabled{
    opacity: .7;
}
.submit-btn:active{
    opacity: .7;
}

/*----------------------*/
.add_pic {
  padding: 0 40rpx;
  background: #fff;
}

.add_pic view {
  display: inline-block;
  margin-top: 20rpx;
  width: 430rpx;
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
  background: url(http://bmob-cdn-14867.b0.upaiyun.com/2017/11/23/e93d28a14095af18801d3c1c68e08fe7.png) no-repeat left center;
  background-size: 160rpx auto;
  padding-left: 80rpx;
  color: #b2b2b2;
}

.image_box {
  width: 100%;
  background: #fff;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  padding: 10px 0 10rpx;
}

.picPre {
  width: 50%;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

.picPre image {
  width: 100%;
  height: 180rpx;
}

.picPre view {
  position: absolute;
  right: 0px;
  top: -20rpx;
  width: 15px;
  height: 15px;
  background: url(http://bmob-cdn-14867.b0.upaiyun.com/2017/11/23/b93323e440f4c3998034dbb9011a1e1d.png) no-repeat;
  background-size: cover;
}

.hidden {
  display: none;
}

//issues.js
//获取应用实例
var common = require('../../../utils/common.js')
var Bmob = require("../../../utils/bmob.js");
var util = require('../../../utils/util.js');
var common = require('../../template/getCode.js')
var app = getApp();
var that;
var username = wx.getStorageSync("my_nick");
var openid = wx.getStorageSync("user_openid");
var userid = wx.getStorageSync("user_id");
Page({
  data: {
    list_remind: '加载中',
    status: false,  //是否显示列表
    itemopen:false,
    feednum: 0, //反馈的次数
    hasFeed: false,
    title: '',
    content: '',
    info: '',
    showTopTips: false,
    TopTips: '',
  },
  onLoad: function () {
    that = this;
    that.setData({//初始化数据
      src: "",
      isSrc: false,
      ishide: "0",
      autoFocus: true,
      isLoading: false,
      loading: true,
      isdisabled: false
    })

    //获取设备和用户信息
    wx.getSystemInfo({
      success: function (res) {
        var info = '---rn**用户信息**rn';
        info += '用户名：' + username;
        info += 'rn手机型号：' + res.model;
        info += '（' + res.platform + ' - ' + res.windowWidth + 'x' + res.windowHeight + '）';
        info += 'rn微信版本号：' + res.version;
        info += 'rnTogether版本号：' + app.version;
        that.setData({
          info: info
        });
        console.log(info);
      }
    });
    
  },
  /**
  * 生命周期函数--监听页面初次渲染完成
  */
  onReady: function () {
    wx.hideToast()

  },
  onShow:function(){
    console.log("调用onShow")
    this.getIssue();
  },
  //获取评论信息
  getIssue: function () {
    //或取总的反馈次数
    var userQuery = new Bmob.Query(Bmob.User);
    userQuery.equalTo("objectId", userid);
    userQuery.find({
      success: function (result) {
        var feednum = result[0].get("feednum");
        console.log("feednum=" + feednum);
        if (feednum != 0) {
          that.setData({
            feednum: feednum,
            hasFeed: true,
          })
        }
      }
    })
    var self = this;
    var molist = new Array();
    var Diary = Bmob.Object.extend("Feedback");
    var query = new Bmob.Query(Diary);
    var me = new Bmob.User();
    me.id = wx.getStorageSync("user_id");
    query.equalTo("feedUser", me);
    query.include("feedUser");
    query.descending("createAt");
    query.find({
      success: function (result) {
        for (var i = 0; i < result.length; i++) {
          var feedUserId = result[i].get("feedUser").objectId;
          var title = result[i].get("title");
          var content = result[i].get("content");
          var id = result[i].id;
          var createdAt = result[i].createdAt;
          var pubtime = util.getDateDiff(createdAt);
          var _url;
          var feedpic = result[i].get("feedpic");
          if (feedpic) {
            _url = result[i].get("feedpic")._url;
          } else {
            _url = "http://ovasw3yf9.bkt.clouddn.com/blog/171126/31GdaHlkh4.jpg?imageslim";
          }
          var publisherName = result[i].get("feedUser").nickname;
          var publisherPic = result[i].get("feedUser").userPic;
          var jsonA;
          jsonA = {
            "title": title || '',
            "content": content || '',
            "publisherPic": publisherPic || '',
            "publisherName": publisherName || '',
            "pubtime": pubtime || '',
            "feedpic": _url || '',
            "feedUserId": feedUserId || '',
            "id": id || '',
          }
          molist.push(jsonA);
          that.setData({
            feedList: molist
          })
        }
      }
    })

  },

  openList: function (e) {
    that.setData({
      'status': !that.data.status
    });
  },

  openItem: function (e) {
    var index = e.currentTarget.dataset.index;
    if (index != that.data.itemopen) {
      that.setData({
        'itemopen': index
      });
    }
  },

  //上传图片
  uploadPic: function () {
    var that = this;
    wx.showModal({
      title: '提示',
      content: '上传图片需要消耗流量，是否继续？',
      confirmText: '继续',
      success: function (res) {
        if (res.confirm) {
          wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['compressed'], //压缩图
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
              // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
              var tempFilePaths = res.tempFilePaths
              that.setData({
                isSrc: true,
                src: tempFilePaths
              })
            }
          })
        }
      }
    });
  },

  //删除图片
  clearPic: function () {//删除图片
    that.setData({
      isSrc: false,
      src: ""
    })
  },

  //表单验证
  showTopTips: function () {
    var that = this;
    this.setData({
      showTopTips: true
    });
    setTimeout(function () {
      that.setData({
        showTopTips: false
      });
    }, 3000);
  },
  //提交表单
  submitForm: function (e) {
    var title = e.detail.value.title;
    var content = e.detail.value.content;
    //先进行表单非空验证
    if (title == "") {
      this.setData({
        showTopTips: true,
        TopTips: '请输入反馈标题'
      });
    } else if (content == "") {
      this.setData({
        showTopTips: true,
        TopTips: '请输入反馈内容'
      });
    } else {
      that.setData({
        isLoading: true,
        isdisabled: true
      })
      wx.showModal({
        title: '提示',
        content: '是否确认提交反馈',
        success: function (res) {
          if (res.confirm) {
            wx.getStorage({
              key: 'user_id',
              success: function (ress) {
                var Diary = Bmob.Object.extend("Feedback");
                var diary = new Diary();
                var me = new Bmob.User();
                me.id = ress.data;
                diary.set("feedUser", me);
                diary.set("title", title);
                diary.set("content", content);
                diary.set("feedinfo", that.data.info);
                if (that.data.isSrc == true) {
                  var name = that.data.src; //上传图片的别名
                  var file = new Bmob.File(name, that.data.src);
                  file.save();
                  diary.set("feedpic", file);
                }
                diary.save(null, {
                  success: function (result) {
                    //该用户的反馈次数加1
                    wx.getStorage({
                      key: 'my_username',
                      success: function (ress) {
                        var my_username = ress.data;
                        wx.getStorage({
                          key: 'user_openid',
                          success: function (res) { //将该文章的Id添加到我的收藏中，或者删除
                            var openid = res.data;
                            var user = Bmob.User.logIn(my_username, openid, {
                              success: function (user) {
                                var feednum = user.get("feednum");
                                user.set("feednum", feednum + 1);
                                user.save();
                              }
                            })
                          }
                        });
                      },
                    })
                    console.log("反馈成功");
                    that.setData({
                      isLoading: false,
                      isdisabled: false,
                      eventId: result.id,
                      feednum:that.data.feednum+1,
                    })
                    //添加成功，返回成功之后的objectId(注意，返回的属性名字是id,而不是objectId)
                    common.dataLoading("反馈成功", "success", function () {
                      //重置表单
                      that.setData({
                        title: '',
                        content: "",
                        src: "",
                        isSrc: false,
                      })
                    });
                  },
                  error: function (result, error) {
                    //添加失败
                    console.log("反馈失败=" + error);
                    that.setData({
                      isLoading: false,
                      isdisabled: false
                    })
                  }
                })
              }
            })
          }
        }
      })
    }
    setTimeout(function () {
      that.setData({
        showTopTips: false
      });
    }, 1000);
  }

});