<!-- 文本输入框 -->
<template>
  <div>
  <div v-if="selectId==0">
    
  </div>
<div class="text" v-if="selectId!=0">
    <div class="emoji">
      <div v-if="accountFlag" style="width: 100%;height: 100%;position: fixed;top: 0;right: 0;" @click="clonese"></div>
      <img src="static/icon-img/xiaolian.png" class="icon-img" align="absmiddle" @click="showBafg">

          <div style="width: 20px;display: inline-block;">
            <el-upload
              class="upload-demo"
              :action="upLoadImgUrl"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="fileEd"
              :show-file-list=false
              >
              <img class="icon-img" align="absmiddle" src="static/icon-img/folder-open.png" alt="">
            </el-upload>
          </div>
          
          <img class="icon-img" align="absmiddle" src="static/icon-img/link.png" alt="" @click="seandLink">
          <!-- <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 user.emojis">
                    <img :src="'static/emoji/'+item.file" :data="item.title" width="30px" height="30px" @click="chiosebiafg(item.title)">
                 </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"
      :modal-append-to-body="false"
      width="30%"
      >
      <div>
         <el-select style="width: 100%;" v-model="value7" placeholder="请选择">
            <el-option-group
              v-for="group in tempList"
              :key="group.id"
              :label="group.name">
              <el-option
                v-for="item in group.chis"
                :key="item.toCustomerId"
                :label="item.name"
                :value="item.toCustomerId">
              </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="toTransterIng(value7)">确 定</el-button>
      </span>
    </el-dialog>
</div>
</div>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import apiUrl from '@/service/api.js'
export default {
    data () {
        return {
            content: '',
            reply: '未找到',  
            frequency: 0,
            sendType:1,
            upLoadImgUrl:apiUrl.upLoadImg,
            imageUrl:'',
            accountFlag:false,
            warn: false,
            showEmoji: false,
            dialogVisible:false,
            tempList:null,
            value7: ''
        };
    },
    computed: {
        ...mapState([   
            'selectId',
            'user'
        ]),
        ...mapGetters([
            'selectedChat',
            'selectId',
            'sendContent'
        ])
    },
    methods: {
      chiosebiafg(code){
        this.content +=`[${code}]`
        this.clonese()
      },
        clonese(){
          this.accountFlag =false
          this.showEmoji = false
        },
        showBafg(){
          this.showEmoji = true
          this.accountFlag =true
        },
        ...mapActions('user',[
           'getTranster',
           'toTranster',
           'closeTake'
        ]),
        fileEd(res){
          if(res.code==200){
            this.imageUrl = res.data.url
            this.sendType = 3
            this.send()
          }
          console.log(res)
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        // 按回车发送信息
        closeSession(){
          let temp = this
            this.$confirm('确定要结束对话吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              temp.closeTake().then((data)=>{
                this.$message({
                  type: 'success',
                  message: '已结束!'
                });
              })
              
            }).catch(() => {
              // this.$message({
              //   type: 'info',
              //   message: '已取消删'
              // });          
            });
        },
        toTransterIng(cId){
          console.log(cId)
          for(let tobj of this.tempList){
            for(let obj of tobj.chis){
              if(cId==obj.toCustomerId){
                this.toTranster(obj).then((r,t)=>{
                  this.dialogVisible = false
                  this.$message({
                    message: '转接成功！',
                    type: 'success'
                  });
                }).catch((data)=>{
                  console.log(data)
                })
              }
            }
          }
        },
        transfer(){
            let that = this
            this.getTranster().then((data)=>{
              let tempList = []
              for(let obj of data){
                let temp ={
                  id:obj.roleBo.name,
                  name:obj.roleBo.name
                }
                let chis = [{
                  type:1,
                  toRoleId:obj.roleBo.roleId,
                  name:'随机转换'
                }]
                for(let r of obj.customerServiceBos){
                  if(r.customerSessionBo&&r.customerSessionBo.online=='Y'&&r.customerSessionBo.userState!='40'){
                    chis.push({
                      type:2,
                      toRoleId:obj.roleBo.roleId,
                      toCustomerId:r.customerId,
                      name:r.username + `(${r.customerSessionBo.userStateValue})`
                    })
                  }
                }
                temp.chis = chis
                chis.length>1&&tempList.push(temp)
              }
              that.tempList = tempList
              this.dialogVisible = true
            }).catch((data)=>{
              // that.tempList=[]
              // this.dialogVisible = false
            })
        },
        onKeyup (e) {
            if ( e.keyCode === 13 ) {
              console.log(55555555)
              if(this.content.replace(/\s+/g,"")==''){
                this.warn = true
                this.content = ''
                setTimeout(() => {
                    this.warn = false;
                  }, 1000)
              }else{
               this.send()
              }
            }
        },
        send () {
          if(this.sendType!=3){
             if(this.content.replace(/\s+/g,"")==''){
                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('user/sendMessage', msg)
                    this.content = ''
               }
          }else{
            var msg = {
                id:this.user.selectId,
                type:this.sendType,
                content: this.content,
                imageUrl:this.imageUrl
            }
            this.$store.dispatch('user/sendMessage', msg)
            this.content = ''
            this.sendType =1
          }
        },
        seandLink() {
          let temp =this
          this.$prompt('请输入图片链接', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern:  /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/,
            inputErrorMessage: '链接格式不正确'
          }).then(({ value }) => {
            var msg = {
                id:temp.user.selectId,
                type:3,
                content: temp.content,
                imageUrl:value 
            }
            temp.$store.dispatch('user/sendMessage', msg)
          }).catch(() => {     
          });
        }
    },
    mounted() {
        this.$refs.text&&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)
                }
            }
        },
        sendContent(val){
          this.content = val
        }
    }
}
</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 10px
        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: 600px
            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
            li
              height:30px    
    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>
