<template>
  <div class="chat-editor-panel">
    <div class="chat-editor" :style="styles" >
      <div class="textarea">
        <textarea v-model="msgToSent" rows="1" cols="1" @focus="focus" @blur="blur" @keyup="keyupFun" placeholder="说点什么吧..."></textarea>
      </div>
      <i-button :color="defaultColor" :type="ibuttonType" @click.native="sendTextMsg" class="sendMsg1"><i class="zhidian-font zf-send" ref="sendcolor"></i></i-button>
      <i-button :color="defaultColor" :type="ibuttonType" @click.native="moreFunction" id="morefunction" v-if="showType == 'normalPlus'"><i class="zhidian-font zf-add"></i></i-button>
    </div>
    <popup :reverse="isReverse" :height="height" v-model="showPopup" :mask="mask" :history-model="historyModel" id="chat-controller-popup" @on-hide="onPopupHide" @on-show="onPopupShow">
      <flexbox class="functionItem">
        <flexbox-item>
          <i-button :color="defaultColor" :type="ibuttonType2" :size="lg" @click.native="showEmoticonPopup"><i class="zhidian-font zf-face"></i></i-button>
          <p>表情</p>
        </flexbox-item>
        <flexbox-item class="picItem">
          <i-button :color="defaultColor" :type="ibuttonType2" :size="lg" @change.native="sendFileMsg" style="overflow:hidden;"><i class="zhidian-font zf-pic"></i>
            <input type="file" ref="fileToSent">
          </i-button>
          <p>图片</p>
        </flexbox-item>
        <flexbox-item>
          <i-button :color="defaultColor" :type="ibuttonType2" :size="lg" @click.native="showSaysPopup"><i class="zhidian-font zf-editor"></i></i-button>
          <p>常用语</p>
        </flexbox-item>
        <flexbox-item>
          <i-button :color="defaultColor" :type="ibuttonType2" :size="lg" @click.native="showGeoPopup"><i class="zhidian-font zf-location"></i></i-button>
          <p>位置</p>
        </flexbox-item>
      </flexbox>
    </popup>
    <chat-emoji v-model="showChatEmojiPopup" @on-click-emoji="onClickEmoji"></chat-emoji>
    <chat-geo v-model="showChatGeoPopup" @on-change-location="onChangeLocation" @go-back="goBack" ref="chatGeo"></chat-geo>
    <chat-says v-model="showChatSaysPopup" @on-click-says="onChangeSays"></chat-says>
  </div>
</template>
<script>
import ChatEmoji from './chatEmoji'
import ChatGeo from './chatGeo'
import ChatSays from './chatSays'
export default {
  props: {
    type: String,
    scene: String,
    to: String,
    sessionType:String,
    extra:Object,
    model:String
  },
  components: {
    ChatEmoji,
    ChatGeo,
    ChatSays
  },
  data() {
    return {
      defaultColor: 'default',
      msgToSent: '',
      ibuttonType: ['icon', 'rounded'],
      ibuttonType2: ['icon'],
      height: '0',
      isReverse: false,
      showPopup: false,
      mask: false,
      lg: 'lg',
      showChatEmojiPopup: false,
      showChatGeoPopup: false,
      showChatSaysPopup: false,
      historyModel:false,
      showType:this.model
    }
  },
  mounted() {
    this.$emit('on-scrolltop')
  },
  methods: {
    sendTextMsg() {
      if (/^\s*$/.test(this.msgToSent)) {
        return '请不要刷屏'
      } else if (this.msgToSent.length > 800) {
        return '请不要超过800个字'
      }
      if (this.type === 'session') {
        this.$store.dispatch('sendMsg', {
          type: 'custom',
          scene: this.scene,
          to: this.to,
          pushContent: '',
          content: {
            type: this.sessionType,
            extra: this.extra,
            data: {
              text:this.msgToSent
            }
          }
        })
      }
      this.msgToSent = ''
      this.hideAllPopup()
      this.$emit('on-click-back')
      this.$refs.sendcolor.style.color = '#a5a5a5'
    },
    sendFileMsg() {
      let ipt = this.$refs.fileToSent
      if (ipt.value) {
        if (this.type === 'session') {
          this.$store.dispatch('sendFileMsg', {
            scene: this.scene,
            to: this.to,
            fileInput: ipt,
            custom:{
              type: this.sessionType,
              extra: this.extra,
              data:{
                text: ''
              }
            },
            pushContent:''
          })
          this.showPopup = false
        }
      }
      this.hideAllPopup()
    },
    keyupFun() {
      if((this.msgToSent) != ''){
        this.$refs.sendcolor.style.color = '#729ef0'
      } else {
        this.$refs.sendcolor.style.color = '#a5a5a5'
      }
    },
    moreFunction() {
      if (!this.showPopup) {
        this.height = '100'
        this.showPopup = true
        this.showChatEmojiPopup = false
        this.showChatGeoPopup = false
        this.showChatSaysPopup = false
        this.$emit('on-click-mfn')
      } else {
        this.$emit('on-click-back')
      }
    },
    onPopupHide() {},
    onPopupShow() {},
    focus() {
      this.showPopup = false
      this.showChatEmojiPopup = false
      this.showChatGeoPopup = false
      this.showChatSaysPopup = false
      this.height = '0'
      this.$emit('on-click-back')
      this.$refs.sendcolor.style.color = '#729ef0'
      // setTimeout(function(){
      //   window.scroll(0,document.body.offsetHeight)
      // },400)
    },
    blur() {
      this.$refs.sendcolor.style.color = '#a5a5a5'
    },
    showEmoticonPopup() {
      this.height = '200'
      this.showPopup = false
      this.showChatGeoPopup = false
      this.showChatEmojiPopup = true
      this.showChatSaysPopup = false
      this.$emit('on-click-topsmile')
    },
    showGeoPopup() {
      this.height = '0'
      this.showPopup = false
      this.showChatEmojiPopup = false
      this.showChatGeoPopup = true
      this.showChatSaysPopup = false
      this.$refs.chatGeo.setIframeSrc()
    },
    showSaysPopup(e) {
      this.height = '200'
      this.showPopup = false
      this.showChatEmojiPopup = false
      this.showChatGeoPopup = false
      this.showChatSaysPopup = true
      e.preventDefault()
      this.$emit('on-click-topsays')
    },
    goBack(){
        this.showChatGeoPopup = false
    },
    onChangeLocation(g_loc) {
      if (this.type === 'session') {
        this.$store.dispatch('sendGeo', {
          scene: this.scene,
          to: this.to,
          geo: {
            lng: g_loc.latlng.lng,
            lat: g_loc.latlng.lat,
            title: g_loc.poiaddress || g_loc.cityname
          },
          custom:{
            type: this.sessionType,
            extra: this.extra,
            data:{
              text: ''
            }
          },
          pushContent:''
        })
      }
      this.showChatGeoPopup = false
    },
    onChangeSays(says) {
      this.msgToSent = says
      this.$refs.sendcolor.style.color = '#729ef0'
    },
    onClickEmoji(emoji) {
      this.msgToSent += emoji.key
      this.$refs.sendcolor.style.color = '#729ef0'
    },
    hideAllPopup() {
      this.height = '0'
      this.showPopup = false
      this.showChatEmojiPopup = false
      this.showChatGeoPopup = false
      this.showChatSaysPopup = false
    }
  },
  computed: {
    EditPopState(){
      return this.$store.state.IMStore.EditPopState
    },
    styles() {
      return `bottom:${this.height}px;`
    }
  },
  watch:{
    EditPopState(val){
      this.focus()
    }
  }
}
</script>
