<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="您的角色">
        <dict-tag :options="dict.type.sm_user_type" :value="user.type" size="mini"/>
      </line-field>
      <line-field label="绑定手机" :value="user.phonenumber"/>
      <line-field label="商户服务费">{{user.serviceRate | money | defaultValue}} %</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 | money | defaultValue}} {{serviceUnit(user.withdrawServiceType)}}
        </template>
      </line-field>
      <template v-if="SmUserType.AGENT === user.type">
        <line-field label="代理服务费">{{user.agentServiceRate | money | defaultValue}} %</line-field>
        <line-field label="默认设备服务费" editable @edit="handleEditAgentDeviceService">{{user.agentDeviceService | money | defaultValue}} %</line-field>
      </template>
    </el-row>
  </div>
</template>


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

export default {
  name: "MchUserProfile",
  mixins: [$serviceType, $withdrawServiceType],
  dicts: ['withdraw_service_type', 'service_type', 'sm_user_type'],
  components: { LineField },
  data() {
    return {
      loading: false,
      user: {}
    }
  },
  computed: {
    SmUserType() {
      return SmUserType
    },
    ...mapGetters(['avatar'])
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 修改默认设备服务费
    handleEditAgentDeviceService() {
      this.$prompt('请输入新的默认设备服务费（%）', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\d+(\.\d+)?$/,
        inputErrorMessage: '请输入数字',
        inputValue: this.user.agentDeviceService,
        inputPlaceholder: "请输入人新的默认设备服务费（%）"
      }).then(({value}) => {
        appUpdateUserSetting({agentDeviceService: value}).then(res => {
          if (res.code === 200 ) {
            this.$message.success("修改成功");
            this.getUserInfo();
          }
        })
      })
    },
    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>
