<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.deviceCount" suffix="台"/>
      <el-statistic title="店铺数" :value="user.storeCount" suffix="家"/>
    </el-row>
    <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>
      <line-field label="绑定手机" :value="user.phonenumber"/>
      <line-field label="设备服务费">
        <template v-if="user.serviceRate == null || user.serviceType == null">跟随渠道</template>
        <template v-else>
          <dict-tag :options="dict.type.service_type" :value="user.serviceType" size="mini"/>
          {{user.serviceRate}} {{serviceUnit(user.serviceType)}}
        </template>
      </line-field>
      <line-field label="提现服务费">
        <template v-if="user.withdrawServiceRate == null || user.withdrawServiceType == null">跟随渠道</template>
        <template v-else>
          <dict-tag :options="dict.type.withdraw_service_type" :value="user.withdrawServiceType" size="mini"/>
          {{user.withdrawServiceRate}} {{serviceUnit(user.withdrawServiceType)}}
        </template>
      </line-field>
    </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'

export default {
  name: "MchUserProfile",
  mixins: [$serviceType, $withdrawServiceType],
  dicts: ['withdraw_service_type', 'service_type'],
  components: { LineField },
  data() {
    return {
      loading: false,
      user: {}
    }
  },
  computed: {
    ...mapGetters(['avatar'])
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.loading = true;
      appGetUserInfo().then(res => {
        this.user = res.data;
      }).finally(() => {
        this.loading = false;
      })
    }
  }
}
</script>

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