<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="12">
      <!-- 左侧个人信息 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="6" class="mb-12">
        <el-card class="user-info-card card-box" shadow="hover">
          <div slot="header" class="card-header">
            <span>个人信息</span>
          </div>
          <div class="avatar-box">
            <avatar :src="detail.avatar" :size="64" :name="detail.nickName" :char-index="-1"/>
            <div class="name">{{ detail.nickName | dv}}</div>
          </div>
          <div>
            <line-field label="角色">
              {{ detail.roles.map(role => role.roleName).join(',') }}
            </line-field>
            <line-field label="手机号" :value="detail.phonenumber" />
            <line-field label="登录账号" :value="detail.userName" />
            <line-field label="分成比例">
              {{ detail.point | fix2 | dv }} %
             </line-field>
            <line-field label="实名认证">
              <boolean-tag :value="detail.isReal" size="small"/>
             </line-field>
            <line-field label="所属代理" :value="detail.agentName" />
            <line-field label="最后登录IP" :value="detail.loginIp" />
            <line-field label="最后登录时间" :value="detail.loginDate" />
          </div>
        </el-card>
      </el-col>

      <!-- 右侧统计信息 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="18">
        <!-- 统计数据 -->
        <user-statistics  class="mb-12" v-if="detail.userId" :user-id="detail.userId" />

        <!-- 数据曲线图 -->
        <el-card class="card-box" shadow="hover" v-if="detail.userId">
          <el-tabs>
            <el-tab-pane label="订单分成统计" lazy>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="card-box" style="margin-top: 12px;" shadow="hover" v-if="detail.userId">
      <el-tabs>
        <el-tab-pane label="分成记录" lazy v-if="checkPermi(['bst:bonus:list'])">
          <bonus :query="{arrivalId: detail.userId, arrivalTypes: BonusArrivalType.userList()}" />
        </el-tab-pane>
        <el-tab-pane label="账变记录" lazy v-if="checkPermi(['bst:balanceLog:list'])">
          <balance-log :query="{userId: detail.userId}" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getUser } from '@/api/system/user'
import LineField from '@/components/LineField'
import Avatar from '@/components/Avatar'
import { checkPermi } from '@/utils/permission'
import UserStatistics from '@/views/system/user/view/components/UserStatistics'
import CollapsePanel from '@/components/CollapsePanel'
import BooleanTag from '@/components/BooleanTag'
import Bonus from '@/views/bst/bonus/index.vue'
import { BonusArrivalType } from '@/utils/enums'
import BalanceLog from '@/views/bst/balanceLog/index.vue'

export default {
  name: 'UserView',
  components: {
    LineField,
    UserStatistics,
    CollapsePanel,
    Avatar,
    BooleanTag,
    Bonus,
    BalanceLog
  },
  data() {
    return {
      BonusArrivalType,
      detail: {
        roles: []
      },
      loading: false,
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    checkPermi,
    /**
     * 获取用户详细信息
     */
    getDetail() {
      this.loading = true
      getUser(this.$route.params.userId).then(res => {
        this.detail = res.data
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 12px;

  .user-info-card {
    .card-header {
      display: flex;
      align-items: center;
    }
  }

  .mb-12 {
    margin-bottom: 12px;
  }

  .login-info {
    display: flex;
    flex-direction: column;
    font-size: 13px;

    span {
      line-height: 1.4;
    }
  }

  :deep(.el-descriptions-item__label) {
    color: #606266;
    width: auto;
    font-size: 13px;
  }

  :deep(.el-descriptions-item__content) {
    font-size: 13px;
  }

  :deep(.el-card__body) {
    padding: 10px;
  }

  :deep(.el-descriptions-item) {
    padding-bottom: 8px;
  }

  :deep(.el-tag--small) {
    height: 22px;
    line-height: 20px;
  }
}
.avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  .name {
    font-size: 16px;
    margin-top: 12px;
    margin-bottom: 12px;
    color: #303133;
  }
}

// 移动端适配
@media screen and (max-width: 767px) {
  .app-container {
    padding: 8px;

    .mb-12 {
      margin-bottom: 8px;
    }

    :deep(.el-card__body) {
      padding: 8px;
    }
  }
}
</style>
