<!--packageH/chitchat/chatWindow/chatWindow.wxml-->

<view style="display:flex;flex-direction:column;overflow:hidden;padding-bottom:{{operation.safeBottom}}px">
  <view class="no-connect" wx:if="{{currentReconnectNum >= maxReconnectNum}}">
    <i class="el-icon-warning"></i>
    <text>当前网络不可用</text>
  </view>
  <scroll-view
  refresher-triggered="{{chatGetLoading}}"
  bindrefresherrefresh="getChatList"
  refresher-enabled="{{!chatFinished}}" class="chat-scroll" scroll-y="true" id="chatScroll" scroll-with-animation="{{scrollTopAnimation}}"  bindtap="handPageTouchStart" bindscroll="floatDeFocus" scroll-into-view="{{scrollTopTarget}}" style="width: 100%;height:calc(100vh - {{operation.flag==true ? operation.height : operation.height+operation.safeBottom}}px);padding-top:{{currentReconnectNum >= maxReconnectNum ? '40px' : '0.5rem'}}">

    <view class="no-more-message" wx:if="{{chatFinished}}">
      <text>没有更多消息记录啦~</text>
    </view>
    <view class="conversation" id="listItem{{index}}"  wx:for="{{chatList}}" wx:key="id">
        <block wx:if="{{item.is_system_opt}}">
            <view class="system-opt-message">{{ item.content }}</view>
        </block>
          <block wx:elif="{{item.is_backed}}">
            <view class="system-opt-message">
              <block wx:if="{{chatType == 2}}">
                <view wx:if="{{item.direction_type === 0}}">您撤回了消息</view>
                <view wx:if="{{item.direction_type === 1}}">{{ memberInfo.nickname }}撤回了消息</view>
              </block>
              <block wx:if="{{chatType == 1}}">
                <view wx:if="{{item.direction_type === 0}}">{{ employeeInfo.nickname }}撤回了消息</view>
                <view wx:if="{{item.direction_type === 1}}">您撤回了消息</view>
              </block>
            </view>
          </block>
          <block wx:elif="{{item._is_time}}">
            <view class="system-opt-message">{{ item._message_time }}</view>
          </block>
          <block wx:else>
            <view class="chat-msg my-msg" wx:if="{{(item.direction_type === 0 && chatType == 2) || (item.direction_type === 1 && chatType == 1)}}">
              <view class="avater">
                <block wx:if="{{item.direction_type === 0}}">
                  <van-image src="{{employeeInfo.avatar}}" width="2.281rem" height="2.281rem"></van-image>
                </block>
                <block wx:else>
                  <van-image src="{{memberInfo.avatar}}" width="2.281rem" height="2.281rem"></van-image>
                </block>
              </view>
              <view class="content">
                    <view class="my-info" id="my-info-{{index}}" bindtap="handLongpress" data-item="{{item}}" data-index="{{index}}" >
                      <view wx:if="{{!item.id && !item.send_fail}}" class="send-msg-loading">
                        <!-- <image src='https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/img_loading.gif' mode='widthFix' /> -->
                        <van-loading type="spinner" size="20px" />
                      </view>
                      <view class="txt">
                        <block wx:if="{{item.content_type == 1}}">
                          <chat-content-pic item="{{item}}" data-src="{{item.content}}" bindtap="viewPicture" />
                        </block>
                        <block wx:elif="{{item.content_type == 2}}">
                          <chat-content-goods item="{{item}}" />
                        </block>
                        <block  wx:elif="{{item.content_type == 3}}">
                          <chat-content-order item="{{item}}" />
                        </block>
                        <block wx:else>
                          <chat-content-txt item="{{item}}" ></chat-content-txt>
                        </block>
                      </view>
                      <view wx:if="{{item.send_fail}}">
                        <chat-content-failed item="{{item}}" />
                      </view>
                      <view class="arrow-r"></view>
                    </view>
              </view>
            </view>
            <view class="chat-msg other-msg" wx:else>
              <view class="avater">
                <block wx:if="{{item.direction_type === 0}}">
                  <van-image src="{{employeeInfo.avatar}}" width="2.281rem" height="2.281rem" />
                </block>
                <block wx:else>
                  <van-image src="{{memberInfo.avatar}}" width="2.281rem" height="2.281rem" />
                </block>
              </view>
              <view class="content">
                <view class="other-info">
                  <view class="txt">
                    <block wx:if="{{item.content_type == 1}}">
                      <chat-content-pic item="{{item}}" data-src="{{item.content}}" bindtap="viewPicture" />
                    </block>
                    <block wx:elif="{{item.content_type == 2}}">
                      <chat-content-goods item="{{item}}" />
                    </block>
                    <block wx:elif="{{item.content_type == 3}}">
                      <chat-content-order item="{{item}}" />
                    </block>
                    <block wx:else>
                      <chat-content-txt item="{{item}}" ></chat-content-txt>
                    </block>
                  </view>
                  <!-- <view wx:if="{{item.send_fail}}">
                    <ChatContentFailed item="{{item}}" />
                  </view> -->
                  <view class="arrow-l"></view>
                </view>
              </view>
            </view>
          </block>
    </view>
    <view  wx:if="{{show_tool_bar==1}}" style="height:88rpx;"></view>
    <view style="height:2px;" id="listItemBottom1"></view>
    <view style="height:2px;" id="listItemBottom2"></view>

</scroll-view>


<view class="chat-footer" bindtap="floatDeFocus" style="bottom:0px;padding-bottom:{{operation.safeBottom}}px;box-sizing:content-box;height:{{operation.flag==true ? (operation.height-operation.safeBottom) : operation.height}}px;">
      <view class="show_tool_bar" wx:if="{{show_tool_bar==1}}">
        <view class="chat_tool_bars">
          <view class="chat_tool_item" wx:for="{{chat_tool_bars}}" wx:key="id" data-item="{{item}}" bindtap="handClickChatToolBars" >{{item.name}}</view>
          <view style="width:1rpx;flex-shrink: 0;height: 1rpx;"></view>
        </view>
      </view>
      <view class="chat-opt-input">
        <view class="chat-opt-input-box">
          <view class="chat-opt-input-more-icon" bindtap="handClickAddIcon">
            <van-icon name="add" size="30px" color="#fb4a4a" />
          </view>
          <view class="inputWrapper">
            <input id="text_in" bindinput="handInput" maxlength="-1" hold-keyboard bindtap="bindClickInput" model:value="{{msgText}}" bindfocus="inputFocus" bindblur="inputBlur" adjust-position="{{false}}" class="edit-ipt" />
            <view class="chat-opt-input-emoji-icon">
              <view class="emoticon-con" catchtap="setEmotionFlag">
                <van-icon name="smile-o" style="display:flex;align-items:center;" size="30px" color="#666" />
              </view>
              <view class="emotion-wrapper" wx:if="{{operation.emotion}}">
                <div class="faces_content">
                    <view class="face-item" wx:for="{{emojiList}}" wx:key="id" bindtap="selectEmoji" data-item="{{item}}">
                      <image src="{{item.url}}" />
                    </view>
                  </div>
              </view>
            </view>
          </view>

          <view class="chat-opt-send-msg-btn" bindtap="sendMsgBtn">发送</view>
        </view>
      </view>

      <view class="opet">
        <view class="opetItem" wx:if="{{chat_opt_setting.pic == 1}}">
          <image bindtap="selectImage" class="iconImg" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/chatWindowPic.png"></image>
          <text>图片</text>
        </view>
        <view class="opetItem" bindtap="setGoodsPopupShow" wx:if="{{chat_opt_setting.goods == 1}}">
          <image class="iconImg" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/chatWindowGoods.png"></image>
          <text>商品</text>
        </view>
        <view class="opetItem" bindtap="setOrderPopupShow" wx:if="{{chat_opt_setting.order == 1}}">
          <image class="iconImg" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/chatWindowOrder.png"></image>
          <text>订单</text>
        </view>
        <view class="opetItem" bindtap="setReplyPopupShow" wx:if="{{chatType == 2 && chat_opt_setting.reply == 1}}">
          <image class="iconImg" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/chatWindowQuick.png"></image>
          <text>快捷回复</text>
        </view>
        <view class="opetItem" bindtap="setTransferPopupShow" wx:if="{{chatType == 2 && chat_opt_setting.transfer == 1}}">
          <image class="iconImg" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/chatWindowTransfer.png"></image>
          <text>转接客服</text>
        </view>
      </view>
    </view>

</view>

<view wx:if="{{withdrawObj.show}}" class="withdraw {{withdrawObj.direction==0 ? 'up' :'down'}}" style="left:{{withdrawObj.left}}px;top:{{withdrawObj.top}}px;">
    <view class="item" bindtap="backMsg">撤回</view>
</view>

<view class="sendGoods" wx:if="{{goodsObj.show}}" bindtap="bindSendGoods" style="bottom:{{operation.safeBottom+70}}px;">
      <view class="tips">点击发送该商品</view>
      <image src="{{goodsObj.info.thumb}}"></image>
      <view class="price">
        <text style="font-size:0.6rem;">￥</text>
        {{ goodsObj.info.price }}
      </view>
    </view>

<van-popup show="{{goodsPopupShow}}" position="bottom" custom-style="height:80%;" bind:close="setGoodsPopupShow">
  <view class="search-list-popup-con">
    <view class="search-con">
      <view class="input">
        <input type="text" model:value="{{goodsSearchKwd}}" placeholder="搜索商品" />
        <i class="iconfont icon-sousuo" bindtap="getGoodsList"></i>
      </view>
    </view>
    <view class="list">
      <view wx:for="{{goodsList}}" wx:key="id" class="goods-con">
        <view class="goods-img">
          <image src="{{item.thumb}}" ></image>
        </view>
        <view class="goods-txt">
          <view class="goods-title">{{ item.title }}</view>
          <view class="goods-price">￥{{ item.price }}</view>
        </view>
        <view class="goods-send">
          <view class="goods-send-btn" data-item="{{item}}" bindtap="selectGoods">发 送</view>
        </view>
      </view>
    </view>
  </view>
</van-popup>


<van-popup show="{{orderPopupShow}}" position="bottom" custom-style="height:80%;" bind:close="setOrderPopupShow">
      <view class="search-list-popup-con">
        <view class="search-con">
          <view class="input">
            <input type="text" model:value="{{orderSearchKeyword}}" placeholder="搜索订单" />
            <i class="iconfont icon-sousuo" bindtap="getOrderList"></i>
          </view>
        </view>
        <view class="list">
          <view wx:for="{{orderList}}" wx:key="id" class="order-con">
            <view class="order-header">
              <view class="order-no">订单号：{{ item.order_sn }}</view>
              <view class="order-status">{{ item.status_name }}</view>
            </view>
            <view wx:for="{{item.has_many_order_goods}}" wx:for-item="goods_item" wx:key="goods_id" class="order-item-con">
              <view class="order-goods-img">
                <image src="{{goods_item.thumb}}" ></image>
              </view>
              <view class="order-item-txt">
                <view class="order-goods-title">{{ goods_item.title }}</view>
                <view class="order-goods-price">
                  <view class="order-goods-num">x{{ goods_item.total }}</view>
                  ￥{{ goods_item.price }}
                </view>
              </view>
            </view>
            <view class="order-footer">
              <view class="totle-txt">共 {{ item.goods_total }} 件商品 实付：¥{{ item.price }}</view>
              <view>
                <view class="send-btn" data-item="{{item}}" bindtap="selectOrder">发 送</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </van-popup>



    <van-popup show="{{replyPopupShow}}" position="bottom" custom-style="height:80%;" bind:close="setReplyPopupShow">
      <view class="search-list-popup-con">
        <view class="search-con">
          <view class="input">
            <input type="text" model:value="{{replySearchKwd}}" placeholder="请输入标题" />
            <i class="iconfont icon-sousuo" bindtap="getReplyList"></i>
          </view>
        </view>
        <view class="list">
          <view wx:for="{{replyList}}" wx:key="id" class="reply-con">
            <view class="reply-txt">
              <view class="reply-title">{{ item.title }}</view>
              <view class="reply-content">{{ item.content }}</view>
            </view>
            <view class="reply-send">
              <text class="reply-send-btn" data-item="{{item}}" bindtap="selectReply">发 送</text>
            </view>
          </view>
        </view>
      </view>
    </van-popup>


    <van-popup show="{{transferPopupShow}}" position="bottom" custom-style="height:80%;" bind:close="setTransferPopupShow">
      <view class="search-list-popup-con">
        <view class="search-con">
          <view class="input">
            <input type="text" model:value="{{transferSearchKwd}}" placeholder="请输入客服昵称或手机号" />
            <i class="iconfont icon-sousuo" bindtap="getTransferEmployeeList"></i>
          </view>
        </view>
        <view class="list">
          <view wx:for="{{transferEmployeeList}}" wx:key="id" class="transfer-con">
            <view class="transfer-avatar">
              <image src="{{item.avatar}}"></image>
            </view>
            <view class="transfer-txt">
              <view class>{{ item.nickname }}</view>
              <view class>{{ item.has_one_member.mobile }}</view>
            </view>
            <view class="transfer-send">
              <text class="transfer-send-btn" data-item="{{item}}" bindtap="selectTransfer">转 接</text>
            </view>
          </view>
        </view>
      </view>
    </van-popup>
