<style scoped>
.van-cell-group {
  width: 680px;
  margin: 20px auto;
}
.van-cell {
  height: 100px;
  line-height: 100px;
  font-size: 26px;
  color: #000000ff;
  font-weight: 500;
  width: 660px;
  margin: auto;
}
.van-cell:after {
  border-bottom: 2px solid #e7e7e7ff;
}

</style>
<template>
  <!--设备信息-->
  <div id="topDiv">
    <van-nav-bar
      :title="$route.meta.name"
      left-arrow
      @click-left="$router.go(-1)"
    >
    </van-nav-bar>
  </div>
  <van-cell-group inset class="cell-flex-1-3">
    <van-cell title="姓名" :value="userInfos.nickName" />
    <van-cell title="班组" :value="userInfos.classGroupName" />
    <van-cell title="角色" :value="roleInfo.roleName" />
    <van-cell title="联系方式" :value="userInfos.phonenumber" />
    <van-cell title="登录次数" :value="userInfos.loginCount" />
    <van-cell title="是否有效" :value="userInfos.status==0?'有效':'禁用'" />
    <van-cell title="上次登录时间" :value="parseTime(userInfos.loginDate, '{y}-{m}-{d} {h}:{i}')" />
    <van-cell title="部门	" :value="userInfos.dept.deptName" />
  </van-cell-group>
</template>

<script>
import { NavBar, CellGroup, Cell } from "vant";
import { getSubSysInfo ,getQrDeviceControlunitByChildSysId} from "@/api/system/registerConfig";
import { mapState } from "vuex";
import {getInfo} from "@/api/login";
export default {
  name: "equipmentInformation",
  components: {
    [NavBar.name]: NavBar,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
  },
  data() {
    return {
      userInfos: {
        dept:{
          deptName:''
        }
      },
      roleInfo: {},
    };
  },
  mounted() {
    this.$nativeQRCode.setStatusBarColor("#006953", "white");
    this.getInfo();
  },
  computed: {
    ...mapState("sysConf", ["authCode", "cloudServerAddress"]),
  },
  methods: {
    // 获取用户信息
    getInfo() {
      getInfo().then(res => {
        this.userInfos = res.user;
        let rule = this.userInfos.roles;
        if (rule.length > 0){
          this.roleInfo = this.userInfos.roles[0];
        }
      })
    },
    // 时间格式化
    parseTime(time, format) {
      if (!time) return '';
      const date = new Date(time);
      const map = {
        '{y}': date.getFullYear(),
        '{m}': date.getMonth() + 1,
        '{d}': date.getDate(),
        '{h}': date.getHours(),
        '{i}': date.getMinutes()
      };
      return format.replace(/{[ymdhis]+}/g, (match) => map[match]);
    }
  },

};
</script>

