<template>
  <Modal
    v-model="my_show"
    title="账号详情"
    :mask-closable="false"
    :footer-hide="true"
    @on-visible-change="visibleChange"
  >
    <div class="page-detail-wrap" v-if="data">
      <ul>
        <li class="ui-list">
          <div class="ui-list-title">用户名：</div>
          <div class="ui-list-content">{{data.username}}</div>
        </li>

        <li class="ui-list" v-if="data.roles.length">
          <div class="ui-list-title">所属角色：</div>
          <div class="ui-list-content">{{data.roles[0].name}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">姓名：</div>
          <div class="ui-list-content">{{data.nickname}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">手机号：</div>
          <div class="ui-list-content">{{data.mobile}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">头像：</div>
          <div class="ui-list-content">
            <img
              class="w-150 bd-a"
              :src="data.avatar+'?a='+Math.random()"
              @error="imgError($event,default_head)"
            >
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">状态：</div>
          <div class="ui-list-content">{{data.status==1?'启用':'禁用'}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">创建时间：</div>
          <div class="ui-list-content">{{data.created_at}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">更新时间：</div>
          <div class="ui-list-content">{{data.updated_at}}</div>
        </li>
      </ul>
    </div>
  </Modal>
</template>

<script src="./js/detail.js"></script>
