<template>
  <ul class="user-info">
    <li v-for="(value,key) in userUlList" class="list-group-item">
      {{ value }}
      <div>
        {{ userInfo[key] }}
      </div>
    </li>
    <li class="list-group-item">
      浏览器版本
      <div>
        {{ getBrowserNameVersion() }}
      </div>
    </li>
  </ul>
</template>

<script setup name='UserInfoDisplay'>
import {computed} from "vue";
import store from '@/store';

const userInfo = computed(() => {
  return store.getters['user/info']
})

let userUlList = {
  code: '编码',
  codeRs: '工号',
  name: '姓名',
  deptName: '科室',
  deptCode: '科室编码',
  ybCode: '医保编码'
}

// 获取浏览器名称及其版本号
function getBrowserNameVersion() {
  var Sys = {};
  var ua = navigator.userAgent.toLowerCase();
  var s;
  (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
      (s = ua.match(/msie ([\d\.]+)/)) ? Sys.ie = s[1] :
          (s = ua.match(/edge\/([\d\.]+)/)) ? Sys.edge = s[1] :
              (s = ua.match(/firefox\/([\d\.]+)/)) ? Sys.firefox = s[1] :
                  (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? Sys.opera = s[1] :
                      (s = ua.match(/chrome\/([\d\.]+)/)) ? Sys.chrome = s[1] :
                          (s = ua.match(/version\/([\d\.]+).*safari/)) ? Sys.safari = s[1] : 0;
  // 根据关系进行判断
  if (Sys.ie) return ('IE: ' + Sys.ie);
  if (Sys.edge) return ('EDGE: ' + Sys.edge);
  if (Sys.firefox) return ('Firefox: ' + Sys.firefox);
  if (Sys.chrome) return ('Chrome: ' + Sys.chrome);
  if (Sys.opera) return ('Opera: ' + Sys.opera);
  if (Sys.safari) return ('Safari: ' + Sys.safari);
  return 'Unkonwn';
}

</script>

<style scoped lang="scss">
.user-info {
  padding-left: 0;
  list-style: none;
  color: black;

  .list-group-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e7eaec;
    border-top: 1px solid #e7eaec;
    margin-bottom: -1px;
    padding: 11px 0;
    font-size: 13px;

    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}
</style>
