<template>
  <div class="profile" v-loading="loading">
    <el-avatar :src="avatar" :size="64" style="margin:2em auto;"/>
    <el-row type="flex" style="margin-bottom: 1em">
      <el-statistic title="总收入" :value="user.totalIncome" :precision="2" suffix="元"/>
      <el-statistic title="总提现" :value="user.withDrawlAmount" :precision="2" suffix="元"/>
      <el-statistic title="账户余额" :value="user.balance" suffix="元" :precision="2"/>
    </el-row>
    <el-row type="flex" style="margin-bottom: 1em">
      <el-statistic v-if="SmUserType.AGENT === smUserType" :title="FieldName.AGENT" :value="user.agentCount" suffix="人"/>
      <el-statistic v-if="[SmUserType.AGENT, SmUserType.BIZ].includes(smUserType)" :title="FieldName.BIZ" :value="user.bizManCount" suffix="人"/>
      <el-statistic v-if="[SmUserType.AGENT, SmUserType.BIZ].includes(smUserType)" :title="FieldName.INVESTOR" :value="user.investorCount" suffix="人"/>
      <el-statistic title="设备数" :value="user.deviceCount" suffix="台"/>
      <el-statistic :title="FieldName.STORE" :value="user.storeCount" suffix="家"/>
    </el-row>
    <el-row>
      <line-field label="当前角色">
        <dict-tag :value="user.type" :options="dict.type.user_type" size="mini"/>
      </line-field>
      <line-field label="绑定手机" :value="user.phonenumber"/>
      <line-field label="实名认证">
        <el-tag :type="user.isReal ? 'success' : 'danger'" size="mini">{{user.isReal ? '已认证' : '未认证'}}</el-tag>
      </line-field>
      <line-field v-if="[SmUserType.AGENT, SmUserType.BIZ, SmUserType.INVESTOR].includes(smUserType)" label="推广人" :value="user.referenceName"/>
      <line-field v-if="[SmUserType.AGENT, SmUserType.BIZ, SmUserType.INVESTOR].includes(smUserType)" label="分成比例" :value="`${user.point} %`"/>
    </el-row>
  </div>
</template>


<script>
import { mapGetters } from 'vuex'
import { appGetUserInfo } from '@/api/app/user'
import { $serviceType, $withdrawServiceType } from '@/utils/mixins'
import LineField from '@/components/LineField/index.vue'
import { FieldName, SmUserType } from '@/utils/constants'
import smUser from '@/views/system/smUser/index.vue'

export default {
  name: "MchUserProfile",
  mixins: [$serviceType, $withdrawServiceType],
  dicts: ['user_type'],
  components: { LineField },
  props: {
    user: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
    }
  },
  computed: {
    SmUserType() {
      return SmUserType
    },
    FieldName() {
      return FieldName
    },
    ...mapGetters(['avatar', 'smUserType'])
  },
}
</script>

<style scoped lang="scss">
.profile {
  display: flex;
  flex-direction: column;
}
</style>
