<template>
  <div class="app-container" v-loading="loading">
    <template v-if="userData != null">
      <el-row :gutter="12">
        <el-col :lg="6" :md="10" :xs="24">
          <el-card class="box-card" header="用户详情">
            <div class="user-detail">
              <div class="user-header">
                <el-avatar :size="64" :src="userData.avatar"></el-avatar>
                <el-row type="flex" class="name-box">
                  <span class="user-name">{{userData.realOrUserName}}</span>
                </el-row>
                <div class="phone-number">{{userData.phonenumber}}</div>
              </div>

              <div class="user-description">
                <line-field label="用户角色">
                  <dict-tag :options="dict.type.user_type" :value="userData.type" size="mini"/>
                </line-field>
                <line-field label="实名认证">
                  <el-tag :type="userData.isReal ? 'success' : 'danger'" size="mini">{{userData.isReal ? '已实名' : '未实名'}}</el-tag>
                </line-field>
                <line-field label="推广人" v-if="![SmUserType.NORMAL, SmUserType.BUSINESS_PLACE].includes(userData.type)">
                  <user-link :id="userData.referenceId" :name="userData.referenceName"/>
                </line-field>
                <line-field label="分成比例" v-if="![SmUserType.BUSINESS_PLACE, SmUserType.NORMAL].includes(userData.type)">
                  {{userData.point | money | defaultValue}} %
                </line-field>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="18" :md="14" :xs="24">
          <el-card class="box-card" header="统计信息">
            <el-row>
              <el-col :span="statisticSpan" class="statistic-col" v-if="[SmUserType.AGENT].includes(userData.type)" >
                <el-statistic :title="FieldName.AGENT" group-separator="," suffix="人">
                  <template #formatter>
                    <svg-icon icon-class="user1" style="color: #ff3939;"/>
                    {{userData.agentCount | defaultValue }}
                  </template>
                </el-statistic>
              </el-col>
              <el-col :span="statisticSpan" class="statistic-col" v-if="[SmUserType.AGENT, SmUserType.BIZ].includes(userData.type)" >
              <el-statistic :title="FieldName.BIZ" group-separator="," suffix="人">
                <template #formatter>
                  <svg-icon icon-class="user1" style="color: #ffa339;"/>
                  {{userData.bizManCount | defaultValue }}
                </template>
              </el-statistic>
              </el-col>
              <el-col :span="statisticSpan" class="statistic-col" v-if="[SmUserType.AGENT, SmUserType.BIZ].includes(userData.type)">
                <el-statistic :title="FieldName.INVESTOR" group-separator="," suffix="人" >
                  <template #formatter>
                    <svg-icon icon-class="user1" style="color: #3967ff;"/>
                    {{userData.investorCount | defaultValue }}
                  </template>
                </el-statistic>
              </el-col>
              <el-col :span="statisticSpan" class="statistic-col">
                <el-statistic :title="FieldName.STORE" group-separator="," suffix="家">
                  <template #formatter>
                    <svg-icon icon-class="hotel" style="color: #8839ff;"/>
                    {{userData.storeCount | defaultValue }}
                  </template>
                </el-statistic>
              </el-col>
              <el-col :span="statisticSpan" class="statistic-col">
                <el-statistic title="设备数" group-separator="," suffix="台">
                  <template #formatter>
                    <svg-icon icon-class="device" style="color: #0082ed;"/>
                    {{userData.deviceCount | defaultValue }}
                  </template>
                </el-statistic>
              </el-col>
              <el-col :span="statisticSpan" class="statistic-col">
                <el-statistic title="订单数" group-separator="," suffix="单">
                  <template #formatter>
                    <svg-icon icon-class="bill" style="color: #ff39a9;"/>
                    {{userData.billCount | defaultValue }}
                  </template>
                </el-statistic>
              </el-col>
              <el-col :span="statisticSpan" class="statistic-col">
                <el-statistic title="订单金额" group-separator="," suffix="元" >
                  <template #formatter>
                    <svg-icon icon-class="money1" style="color: #ffa339;"/>
                    {{userData.billAmount | money | defaultValue }}
                  </template>
                </el-statistic>
              </el-col>
              <el-col :span="statisticSpan" class="statistic-col">
                <el-statistic title="提供分成" group-separator="," suffix="元" >
                  <template #formatter>
                    <svg-icon icon-class="bonus" style="color: #ff3939;"/>
                    {{userData.provideBonus | money | defaultValue }}
                  </template>
                </el-statistic>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card">
            <el-tabs>
              <el-tab-pane label="提供订单列表">
                <mch-recharge v-if="userData.userId != null" :query="rechargeQuery" :view="views.user"/>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </template>
    <el-empty v-else description="用户不存在"/>
  </div>
</template>

<script>
import LineChart from "@/views/dashboard/LineChart.vue";
import UserDevice from "@/views/system/smUser/components/userDevice.vue";
import UserAccount from "@/views/system/smUser/components/userAccount.vue";
import UserRechargeReport from "@/views/system/smUser/components/userRechargeReport.vue";
import Access from '@/views/ss/access/index.vue'
import { $serviceType, $view } from '@/utils/mixins'
import Store from '@/views/ss/store/index.vue'
import RecordBalance from '@/views/ss/recordBalance/index.vue'
import Account from '@/views/ss/account/index.vue'
import Suit from '@/views/ss/suit/index.vue'
import { FieldName, RecordBalanceSubjectType, SmUserType } from '@/utils/constants'
import Device from '@/views/system/device/index.vue'
import StoreInvestor from '@/views/ss/storeInvestor/index.vue'
import SmUser from '@/views/system/smUser/index.vue'
import User from '@/views/system/user/index.vue'
import UserLink from '@/components/Business/SmUser/UserLink.vue'
import { checkPermi } from '@/utils/permission'
import { appGetUser } from '@/api/app/user'
import MchUser from '@/views/mch/user/index.vue'
import LineField from '@/components/LineField/index.vue'
import MchRecharge from '@/views/mch/recharge/index.vue'

export default {
  name: 'User/:userId',
  mixins: [$view, $serviceType],
  components: { MchRecharge, LineField, MchUser, UserLink, SmUser, User, StoreInvestor, Device, Suit, Account, RecordBalance, Store, Access, UserRechargeReport, UserAccount, UserDevice, LineChart},
  dicts: ['service_type', 'withdraw_service_type', 'user_type'],
  computed: {
    FieldName() {
      return FieldName
    },
    RecordBalanceSubjectType() {
      return RecordBalanceSubjectType
    },
    SmUserType() {
      return SmUserType
    },
    // 订单列表查询条件
    rechargeQuery() {
      let query = {};
      if (this.userData.type === SmUserType.AGENT) {
        query.agentId = this.userData.userId;
      } else if (this.userData.type === SmUserType.BIZ) {
        query.bizId = this.userData.userId;
      } else if (this.userData.type === SmUserType.INVESTOR) {
        query.investorId = this.userData.userId;
      }
      return query;
    }
  },
  data() {
    return {
      statisticSpan: 6,
      userData: {},
      loading: false,
    }
  },
  created() {
    this.getDetail();
  },
  methods: {
    checkPermi,
    getDetail() {
      this.loading = true;
      appGetUser(this.$route.params.userId).then(response => {
        this.userData = response.data;
      }).finally(()=> {
        this.loading = false;
      })
    },
  }
}
</script>

<style scoped>
.app-container .box-card:nth-child(n + 1) {
  margin-top: 1em;
}
.user-name {
  font-size: 18px;
  line-height: 30px;
  vertical-align: center;
}
.phone-number {
  font-size: 18px;
  line-height: 30px;
  color: #9B9B9B;
}
.user-header {
  text-align: center;
  margin: 0 2em;
}
.user-header .name-box {
  margin: 0 auto;
  width: fit-content;
}
.user-detail {
  position: relative;
  display: flex;
  flex-direction: column;
}
.user-detail .user-description {
  margin-top: 32px;
  flex: 1;
}
.statistic-col {
  margin-bottom: 23px;
}
</style>
