<template>
  <div v-show="dialogVisible" class="chatTooltipAll">
    <div class="chatTooltip">
      <div class="chatTooltipHeader">
        {{ userName }} 邀请您加入会话！
      </div>
      <div class="chatTooltipBootom">
        <div class="create-group-bottom">
          <el-button :loading="loading" size="small" type="primary" @click="doCreate">接受</el-button>
          <el-button size="small" @click="doClose">拒绝</el-button>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import ConstConfig from '@/scripts/ConstConfig';
import Cookies from 'js-cookie';
import {acceptCoversitionInvite} from '@/api/chat';
export default {
    name:'ChatTooltip',
    props: {
        group: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            userName:'',
            dialogVisible:false,
            loading:false,
            conversationId:''
        };
    },
    watch:{
        '$store.state.socket.inviteOtherIntoChat':function(val) {
            this.userName = this.coverName(val);
            this.dialogVisible = true;
            this.conversationId = val.conversationId;
        }
    },
    // {"conversationId":"22e10b17-7a6c-4b1b-8724-f87fb2053b76","from":{"id":"17","userId":"75","name":"赵",
    // "role":"STATION_SUPERVISOR","deviceType":"STATION","deviceCode":"Station32955","deviceName":"世纪大道","online":true,"robot":false}
    methods:{
        coverName(inviteUser) {
            const member = inviteUser.from;
            const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
            let data = member.role;
            roleTypeList.forEach(function(element) {
                const rolename = element.value;
                if (Cookies.get('user_lang') == 'en') {
                    data = data.replace(rolename, element.enLabel);
                } else {
                    data = data.replace(rolename, element.label);
                }
            });
            const deviceName = member.deviceName ? '-' + member.deviceName : '';
            const memberName = member.name ? '-' + member.name : '';
            return data + deviceName + memberName;
        },
        doCreate() {
            this.loading = true;
            acceptCoversitionInvite(this.group, this.conversationId).then(res=>{
                this.loading = false;
                this.dialogVisible = false;
                this.$emit('getCoversitionList');
            }).catch(error=>{
                this.$messageBox('接受邀请失败: ' + error.message);
            });
        },
        doClose() {
            this.dialogVisible = false;
        }
    }
};
</script>
<style lang="scss" scoped>
.chatTooltip{
    position: absolute;
    width: 290px;
    left: 32%;
    top: 42%;
    z-index: 5;
    background: #fff;
    padding: 15px;
    box-shadow: #969090 0px 0px 10px;
    border-radius: 4px;
    line-height: 20px;
    transform: translateY(-50%);
}
.chatTooltipHeader{
    margin-top:10px;
    font-size:14px;
}
.chatTooltipBootom{
    margin-top:10px;
    text-align: center;
    margin-bottom:10px;
}
.chatTooltipAll{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index: 10;
}
</style>
