<template>
  <a-popover
    v-model="visable"
    trigger="hover"
    :mouse-enter-delay="0.3"
    @visibleChange="getUserInfo"
    @click.stop="() => {}"
  >
    <template slot="title"
      ><div :class="$style.title">
        <a-avatar size="large" icon="user" :src="src" />{{ userInfo.name }}
        <span :class="[$style.account, 'sd-userinfo-account']">{{ userInfo.code }}</span>
      </div>
    </template>
    <template slot="content"
      ><div :class="$style.content">
        <p><a-icon type="apartment" />{{ userInfo.deptName }}</p>
        <p><a-icon type="phone" />{{ userInfo.phone || '' }}</p>
        <p><a-icon type="mail" />{{ userInfo.email || '' }}</p></div
      >
    </template>

    <slot>
      <a :class="$style.icon"><a-icon :type="type"/></a>
    </slot>
  </a-popover>
</template>

<script>
import axios from '../../services/axios-instance'
import components from '../_import-components/sd-userinfo-card-import'
export default {
  name: 'SdUserinfoCard',
  metaInfo: {},
  components,
  props: {
    account: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      userInfo: {},
      visable: false,
      type: 'idcard',
      src: '',
    }
  },
  methods: {
    getUserInfo(flag) {
      if (!flag) return
      if (JSON.stringify(this.userInfo) !== '{}') return
      this.visable = false
      this.type = 'loading'
      axios.get('api/framework/v1/user-manager/users/' + this.account + '/userInfo').then((res) => {
        this.userInfo = JSON.parse(res.data.props.candidate)
        this.visable = true
        this.type = 'idcard'
        axios({
          url: `api/framework/v1/user-manager/userAvatar/${this.account}`,
          responseType: 'blob',
        }).then((res) => {
          setTimeout(() => {
            // popover没有完全弹出前，此时填充了头像因为会导致popover定位异常，200是popover弹出的动画css设置的时间
            // 等弹完了再填充头像，先这样
            // 后面优化下缓存请求
            this.src = URL.createObjectURL(res.data)
          }, 200)
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.icon {
  width: 24px;
  height: 24px;
}
.title {
  span {
    margin-right: 20px;
  }
}
.content {
  p {
    &:nth-child(1) i {
      color: $primary-7;
    }
    &:nth-child(2) i {
      color: $primary-7;
    }
    &:nth-child(3) i {
      color: $primary-7;
    }
    i {
      margin-right: 20px;
    }
  }
}
.account {
  &::after {
    content: ')';
  }
  &::before {
    content: '(';
  }
}
</style>
