<template>
  <section class="screen flex room-chat-container relative" @click="hiddenModal">
    <div class="flex-1">
      <scroll-view
       scroll-type="none"
       :security-size="10"
       class="room-chat-padding"
       ref="scroll"
      >
        <component
            v-for="(item,index) in noticeData"
            :key="'room-chat-'+index"
            :is="item.type"
            :item="item.item"
            :type="item.messageType"
        ></component>
        <component
          v-for="(item,index) in messageData"
          :key="'room-chat-'+index"
          :is="item.type"
          :item="item.item"
          :type="item.messageType"
        ></component>
      </scroll-view>
    </div>

    <section class="room-chat-padding flex">
      <!--  特殊符号  -->
      <header class="room-chat-control rowACenter">
        <div class="flex-1 rowACenter">
          <aside
              v-for="(item,index) in controlData"
              class="room-chat-control-item cursor-pointer"
              :key="'control-'+index"
              @click.stop="trigger(item,index)"
          >
            <v-image
                :src="item.icon"
                backgroundColor="transparent"
                mode="center"
                class="screen"
            />
          </aside>
        </div>

        <aside class=" room-chat-radio-container relative">
          <section class="cursor-pointer rowACenter" @click="triggerShield">
            <radio class="room-chat-radio" :value="shieldAll" :disabled="true"></radio>
            <span>屏蔽特效</span>
          </section>

          <section class="absolute room-chat-type">
            <aside
              v-for="(item,index) in shieldData"
              :key="'shield-item-'+index"
              class="room-chat-shield-item center"
              @click="changeShieldConfig(index)"
            >
              <section class="row cursor-pointer">
                <radio class="room-chat-radio" :value="shieldConfig[item.key]" :disabled="true"></radio>
                <span>{{item.label}}</span>
              </section>

            </aside>
          </section>
        </aside>

      </header>

      <footer class="row">
        <div class="flex-1 room-chat-input">
          <input v-model="message" @keydown.enter="sendMessage" :maxlength="maxLength" type="text" placeholder="和大家打个招呼吧~" />
        </div>
        <div class="room-chat-send button" @click.stop="sendMessage">发送</div>
      </footer>
    </section>

    <chat-emoji v-model:value="emojiModal" class="room-chat-chat-emoji"></chat-emoji>

  </section>
</template>

<script>
import {
  scrollView,
  vImage,
  radio
} from "$components";

import controlData from '../data/control';

import mixins from '../mixins';

import components,{ RoomMessageType } from '../components';

import chatEmoji from '$popup/popup-chat/components/chat-content/components/chat-emoji';

export default {
  name: "room-chat",

  data(){

    return {
      controlData,
      RoomMessageType
    }
  },

  mixins,

  components:{
    scrollView,
    vImage,
    radio,
    chatEmoji,
    ...components
  }
}
</script>

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