<template>
  <div class="ele-body">
    <el-card shadow="never" header="基本信息">
      <el-form
        size="mini"
        v-loading="loading"
        label-width="100px"
        class="ele-form-detail"
      >
        <el-form-item label="账号:">
          <div class="ele-text-secondary">{{ user.username }}</div>
        </el-form-item>
        <el-form-item label="用户名:">
          <div class="ele-text-secondary">{{ user.nickname }}</div>
        </el-form-item>
        <el-form-item label="性别:">
          <div class="ele-text-secondary">{{ user.sexName }}</div>
        </el-form-item>
        <el-form-item label="手机号:">
          <div class="ele-text-secondary">{{ user.phone }}</div>
        </el-form-item>
        <el-form-item label="角色:">
          <el-tag
            v-for="item in user.roles"
            :key="item.roleId"
            size="mini"
            type="primary"
            :disable-transitions="true"
          >
            {{ item.roleName }}
          </el-tag>
        </el-form-item>
        <el-form-item label="创建时间:">
          <div class="ele-text-secondary">{{ user.createTime }}</div>
        </el-form-item>
        <el-form-item label="状态:">
          <div class="ele-text-secondary">
            <ele-dot v-if="user.status === 0" text="正常" />
            <ele-dot v-else type="danger" :ripple="false" text="冻结" />
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import { getUser } from '@/api/system/user';
  const ROUTE_PATH = '/system/user/details';

  export default {
    name: 'SystemUserDetails',
    data() {
      return {
        user: {
          username: '',
          nickname: '',
          sexName: '',
          phone: '',
          roles: [],
          createTime: '',
          status: 0
        },
        loading: true
      };
    },
    methods: {
      query() {
        const id = this.$route.query.id;
        if (!id || this.user.userId === Number(id)) {
          return;
        }
        this.loading = true;
        getUser(Number(id))
          .then((data) => {
            this.loading = false;
            this.$util.assignObject(this.user, {
              ...data,
              createTime: this.$util.toDateString(data.createTime)
            });
            // 修改页签标题
            if (this.$route.path === ROUTE_PATH) {
              setPageTabTitle(data.nickname + '的信息');
            }
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== ROUTE_PATH) {
            return;
          }
          this.query();
        },
        immediate: true
      }
    }
  };
</script>
