<template>
  <el-tooltip effect="light" content="联系客服" placement="right-end">
    <div class="kefu-location" ref="containerRef" @click="handleLink">
      <el-button
          type="primary"
          icon="el-icon-s-custom"
          circle
          style="font-size: x-large"
      ></el-button>
    </div>
  </el-tooltip>
</template>

<script>
import cache from '@/utils/cache'

export default {
  name: 'LinkKeFu',
  data() {
    return {}
  },
  methods: {
    handleLink: function () {
      let entName = ''
      let entTaxId = ''
      let entPhone = ''

      const company = JSON.parse(cache.getSession('company'))
      console.log(company)
      if (company) {
        entName = company.entName
        entTaxId = company.entTaxId
        entPhone = company.entPhone
      }

      let config = {
        configId: '20c53d87-233a-4356-a653-2c9fbefc92e7',
        hide: true, // 隐藏 环信提供的联系客服按钮
        autoConnect: true,
        dialogWidth: '400px', // 对话框宽度
        dialogHeight: '560px', // 对话框高度
        // dialogPosition: { x: "150px", y: "60px" }, // 对话框显示位置
        visitor: {
          userNickname: 'chtax.cn',
          trueName: entName,
          phone: entPhone,
          companyName: entName,
          description: entTaxId,
          // qq: 'qq',
          // userNickname: '昵称',
          // email: '邮箱',
          // tags: [
          //     'vip1',
          //     'vip2'
          // ]
        },
      }
      console.log('config:')
      console.log(config)

      window.easemobim = window.easemobim || {}
      window.easemobim.bind(config)
    },
  },
}
</script>

<style scoped>
.kefu-location {
  z-index: 9999;
  position: fixed !important;
  right: 0px;
  top: 500px;
  text-align: center;
  background-color: #ebeef5;
  padding: 10px;
  border-radius: 50% 0 0 50%;
}
</style>
