<template>
  <section class="screen relative" @click="hiddenModal">
    <section class="screen flex">
      <header class="chat-content-header rowACenter">
        <div class="flex-1 rowACenter">
          <layout-naming :nickName="nowUserInfo.nick_name" :naming="nowUserInfo.guanming"></layout-naming>
          <layout-user-status
              class="chat-content-status cursor-pointer"
              v-if="nowUserInfo.is_player && nowUserInfo.stay_roominfo"
              @click="goRoomInfo"
              :item="nowUserInfo"></layout-user-status>
        </div>
        <section class="chat-control rowACenter" v-show="!loadingStatus">
          <aside
              v-for="(item,index) in controlData"
              :key="'chat-control-'+index"
              class="chat-control-item center cursor-pointer"
              @click="trigger(item,index)"
          >
            <v-image :src="item.key && control[item.key] ? item.activeIcon:item.icon" class="chat-control-icon" backgroundColor="transparent" mode="center" ></v-image>
          </aside>
        </section>
      </header>
      <section class="flex-1 row relative">
        <aside class="chat-content-container flex flex-1 overflow">
          <!--    游戏    -->
          <header v-if="!loadingStatus && nowUserInfo.gameItem" class="chat-content-game rowACenter">
            <v-image v-if="nowUserInfo.gameItem.gameInfo && nowUserInfo.gameItem.gameInfo.game_ico" :src="nowUserInfo.gameItem.gameInfo.game_ico" class="chat-game-icon" backgroundColor="transparent" mode="center" />
            <div class="chat-game-name">{{nowUserInfo.gameItem.game_name}}</div>
            <div class="rowACenter chat-game-price-group">
              <div class="chat-game-em">¥</div>
              <div class="chat-game-price">{{nowUserInfo.gameItem.price}}</div>
              <div>元/小时</div>
            </div>
            <div class="flex-1"></div>
            <stepper v-model:value="number" type="chat"></stepper>
            <div class="button chat-game-button" @click="placeOrder">立即下单</div>
          </header>
          <section class="flex flex-1 overflow chat-message-container">
            <scroll-view class="screen" ref="scroll">
              <div class="chat-bottom-fixed overflow"
                :style="{'opacity':opacity}"
              >
                <layout-chat
                    v-for="(item,index) in messageData"
                    :key="'layout-chat-'+index"
                    :item="item"
                    :userInfo="allUserInfo"
                    :nowUid="nowUid"
                ></layout-chat>
              </div>
            </scroll-view>
          </section>
          <article class="chat-message flex">
            <header class="chat-message-header rowACenter">
              <section class="flex-1 rowACenter">
                <div
                    @click.stop="trigger(item,index)"
                    v-for="(item,index) in messageControlData"
                >
                  <v-image
                      class="chat-message-icon cursor-pointer"
                      :src="item.icon"
                      mode="center"
                      backgroundColor="transparent"
                      :key="'message-control-'+index"
                  ></v-image>
                </div>

              </section>
              <div class="chat-message-introduce rowACenter">
                <svg t="1623468612885" class="chat-introduce-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7151" width="200" height="200"><path d="M512 42.667A729.813 729.813 0 0 1 128 182.4v467.84c37.76 170.667 384 331.093 384 331.093S858.24 820.907 896 650.24V182.4A729.813 729.813 0 0 1 512 42.667z m214.613 370.986l-241.706 241.92a32 32 0 0 1-45.227 0L297.387 513.28a32 32 0 0 1 45.226-45.227l119.68 119.68 219.094-219.306a32 32 0 0 1 45.226 45.226z" p-id="7152" fill="#ffac4d"></path></svg>
                <div>为保障用户权益，请勿在平台外进行交易,谨防被骗</div>
              </div>
            </header>
            <section class="flex-1 overflow">
              <div class="flex-1">
                <textarea maxlength="1000" v-model="message" class="screen chat-textarea" placeholder="请输入信息"></textarea>
              </div>
              <section class="flex chat-message-button-warp">
                <div @click="sendMessage" class="button chat-message-button">发送</div>
              </section>
            </section>
          </article>
        </aside>
        <aside class="chat-content-user aCenter">
          <v-image class="chat-content-avatar" :src="nowUserInfo.head_pic" radius="50%"></v-image>
          <div class="chat-user-name">{{nowUserInfo.nick_name}}</div>
          <div class="chat-user-message">{{nowUserInfo.autograph}}</div>
          <section
              class="chat-user-control rowACenter"
              v-show="!loadingStatus"
          >
            <template
                v-for="(item,index) in userControlData"
            >
              <aside
                  :key="'user-control-'+index"
                  v-if="item.where?nowUserInfo[item.where]:true"
                  @click="trigger(item,index)"
                  class="chat-user-control-item center cursor-pointer"
              >
                <v-image :src="item.key && control[item.key] ? item.activeIcon:item.icon" class="chat-user-control-icon" mode="center" backgroundColor="transparent"></v-image>
                <div>{{item.label}}</div>
              </aside>
            </template>
          </section>
        </aside>
      </section>
    </section>
    <!--  送礼物   -->
    <chat-gift v-model:value="giftModal" :user-info="nowUserInfo"></chat-gift>
    <!--  表情  -->
    <chat-emoji v-model:value="emojiModal"></chat-emoji>
  </section>
</template>

<script>
import {
  vImage,
  icon,
  scrollView,
  stepper,
  FlatList
} from '$components';
import layoutChat from '$layout/layout-chat';
import chatGift from '../components/chat-gift';
import chatEmoji from '../components/chat-emoji';
import layoutUserStatus from '$layout/layout-user-status';
import layoutNaming from '$layout/layout-naming';
import props from '../props';
import mixins from '../mixins';
export default {
  name: "chat-content",
  components:{
    icon,
    vImage,
    layoutChat,
    scrollView,
    stepper,
    chatGift,
    FlatList,
    chatEmoji,
    layoutUserStatus,
    layoutNaming
  },
  mixins,
  props
}
</script>

<style scoped lang="scss" src="../style.scss"></style>
