<!-- 文本输入框 -->
<template>
<div class="text">
    <div class="emoji">
          <i class="icon iconfont icon-look" @click="showEmoji=!showEmoji"></i>
          <img class="icon-img" align="absmiddle" src="static/icon-img/folder-open.png" alt="">
          <img class="icon-img" align="absmiddle" src="static/icon-img/link.png" alt="">
          <img class="icon-img" align="absmiddle" src="static/icon-img/tag.png" alt="">
          <img class="icon-img" align="absmiddle" src="static/icon-img/retweet.png" alt="" @click="transfer">
          <img class="icon-img" align="absmiddle" src="static/icon-img/poweroff.png" alt="" @click="closeSession">
          <transition name="showbox">
             <div class="emojiBox" v-show="showEmoji">
                 <li v-for="(item, index) in emojis">
                    <img :src="'static/emoji/'+item.file" :data="item.code" @click="content +=item.code">
                 </li>
             </div>
          </transition>
    </div>
    <textarea ref="text" v-model="content" @keyup="onKeyup" @click="showEmoji=false"></textarea>
    <div class="send" @click="send">
    	<span>发送(ent)</span>
    </div>
    <transition name="appear">
	    <div class="warn" v-show="warn">
	    	<div class="description">不能发送空白信息</div>
	    </div>
	  </transition>
    <el-dialog
      title="选择转接对象"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <div>
         <el-select style="width: 100%;" v-model="value7" placeholder="请选择">
            <el-option-group
              v-for="group in options3"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
export default {
    data () {
        return {
            content: '',
            reply: '未找到',  
            frequency: 0,
            sendType:1,
            imageUrl:'',
            warn: false,
            showEmoji: false,
            dialogVisible:false,
            options3: [{
              label: '售前',
              options: [{
                value: 'Shanghai',
                label: '随机转机'
              }, {
                value: 'Beijing',
                label: '张辅导费'
              }]
            }, {
              label: '售中',
              options: [{
                value: 'Chengdu',
                label: '随机抓捏'
              }, {
                value: 'Shenzhen',
                label: '深圳'
              }, {
                value: 'Guangzhou',
                label: '广州'
              }, {
                value: 'Dalian',
                label: '大连'
              }]
            }],
            value7: ''
        };
    },
    computed: {
        ...mapState([   
            'selectId',
            'user'
        ]),
        ...mapGetters([
            'selectedChat',
        ])
    },
    methods: {
        // 按回车发送信息
        closeSession(){
            this.$confirm('确定要结束对话吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '已结束!'
              });
            }).catch(() => {
              // this.$message({
              //   type: 'info',
              //   message: '已取消删'
              // });          
            });
        },
        transfer(){
            this.dialogVisible = true
            // let transfers = `
                
            // `
            // this.$alert(transfers, 'HTML 片段', {
            //   dangerouslyUseHTMLString: true
            // });
            // let transfers = `
            //     <el-collapse v-model="activeNames" @change="handleChange">
            //       <el-collapse-item title="一致性 Consistency" name="1">
            //         <el-row>
            //           <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
            //         </el-row>
            //       </el-collapse-item>
            //     </el-collapse>
            // `
            // this.$confirm(transfers, '选择转接对象', {
            //   dangerouslyUseHTMLString: true,
            //   confirmButtonText: '确定',
            //   cancelButtonText: '取消',
            //   type: 'warning',
            //   center: true
            // }).then(() => {
            //   this.$message({
            //     type: 'success',
            //     message: '删除成功!'
            //   });
            // }).catch(() => {
            //   this.$message({
            //     type: 'info',
            //     message: '已取消删除'
            //   });
            // });
        },
        onKeyup (e) {
            if ( e.keyCode === 13 ) {
               this.send()
            }
        },
        // 点击发送按钮发送信息
        send () {
            if(this.content.length < 1){
                this.warn = true
                this.content = ''
                setTimeout(() => {
                    this.warn = false;
                  }, 1000)
               }else{
                   var msg = {
                        id:this.user.selectId,
                        type:this.sendType,
                        content: this.content,
                        imageUrl:this.imageUrl
                    }
                    this.$store.dispatch('sendMessage', msg)
                    this.content = ''
               }
        }
    },
    // 在进入的时候 聚焦输入框
    mounted() {
            this.$refs.text.focus()
    },
    watch: {
        // 在选择其它对话的时候 聚焦输入框
        selectId() {
          setTimeout(() => {
            this.$refs.text.focus()
          }, 0)
        },
        // 当输入框中的值为空时 弹出提示  并在一秒后消失
        content() {
            if(this.content === ''){
                if( this.frequency === 0){
                  this.warn = true;
                  this.frequency++
                  setTimeout(() => {
                    this.warn = false;
                  }, 1000)
                }
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.text
    position: relative
    height: 150px
    background: #fff
    .emoji
        position: relative
        width: 100%
        height: 40px
        line-height: 40px
        font-size: 12px
        padding: 0 30px
        box-sizing: border-box
        color: #7c7c7c
        .icon-img
            width:20px;
            height:20px;
            position: relative;
            top: 3px;
            right: -5px;
        .icon-look
            cursor: pointer
            &:hover
                color: #1aad19
        .emojiBox
            position: absolute
            display: flex
            flex-wrap: wrap
            top: -210px
            left: -100px
            width: 300px
            height: 200px
            padding: 5px
            background-color: #fff
            border: 1px solid #d1d1d1
            border-radius: 2px
            box-shadow:0 1px 2px 1px #d1d1d1
            &.showbox-enter-active, &.showbox-leave-active
                transition: all .5s
            &.showbox-enter,&.showbox-leave-active
                opacity: 0
    textarea
        box-sizing: border-box
        padding: 0 30px
        height: 110px
        width: 100%
        border: none
        outline: none
        font-family: "Micrsofot Yahei"
        resize: none
    .send
        position: absolute
        bottom: 10px
        right: 30px
        width: 75px
        height: 28px
        line-height: 28px
        box-sizing: border-box
        text-align: center
        border: 1px solid #e5e5e5
        border-radius: 3px
        background: #f5f5f5
        font-size: 14px
        color: #7c7c7c
        &:hover
            background: rgb(18,150,17)
            color: #fff
    .warn
         position: absolute
         bottom: 50px
         right: 10px
         width: 110px
         height: 30px
         line-height: 30px
         font-size: 12px
         text-align: center
         border: 1px solid #bdbdbd
         border-radius: 4px
         box-shadow:0 1px 5px 1px #bdbdbd
         &.appear-enter-active, &.appear-leave-active
            transition: all 1s
         &.appear-enter,&.appear-leave-active
            opacity: 0
         &:before
            content: " "
            position: absolute
            top: 100%
            right: 20px
            border: 7px solid transparent
            border-top-color: #fff
            filter:drop-shadow(1px 3px 2px #bdbdbd)
</style>
