<template>
  <div class="app-container" v-loading="loading">
    <template v-if="userData != null">
      <el-row :gutter="12">
        <el-col :lg="10" :md="12" :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.nickName}}</span>
                  <el-tag type="primary" style="margin-left: 8px;" v-if="userData.isMch">商户</el-tag>
                </el-row>
                <div class="phone-number">{{userData.phonenumber}}</div>
              </div>

              <el-row type="flex" style="margin-top: 16px;">
                <el-statistic title="店铺数" :value="userData.storeCount" :precision="0" suffix="家"/>
                <el-statistic title="设备数" :value="userData.deviceCount" :precision="0" suffix="台"/>
                <el-statistic title="账户余额" :value="userData.balance" :precision="2" suffix="元"/>
                <el-statistic title="总收入" :value="userData.totalIncome" :precision="2" suffix="元"/>
                <el-statistic title="总提现" :value="userData.withDrawlAmount" :precision="2" suffix="元"/>
                <el-statistic title="总消费" :value="userData.rechargeAmount" :precision="2" suffix="元"/>
              </el-row>

              <div class="user-description">
                <el-descriptions :column="3">
                  <el-descriptions-item label="充值服务费">
                    {{userData.realServiceRate | money | defaultValue}} %
                  </el-descriptions-item>
                  <el-descriptions-item label="代理服务费">
                    {{userData.agentServiceRate | money | defaultValue}} %
                  </el-descriptions-item>
                  <el-descriptions-item label="提现服务费">
                    <template v-if="userData.withdrawServiceRate == null || userData.withdrawServiceType == null">跟随渠道</template>
                    <template v-else>
                      <dict-tag :options="dict.type.withdraw_service_type" :value="userData.withdrawServiceType" size="mini"/>
                      {{userData.withdrawServiceRate}} {{serviceUnit(userData.withdrawServiceType)}}
                    </template>
                  </el-descriptions-item>
                  <el-descriptions-item label="限制提现">
                    <boolean-tag :value="userData.limitWithdraw" size="small" true-type="danger" false-type="success"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="限制提现原因" :span="2">
                    {{userData.limitWithdrawReason | defaultValue}}
                  </el-descriptions-item>
                  <el-descriptions-item label="限制退款">
                    <boolean-tag :value="userData.limitRefund" size="small"  true-type="danger" false-type="success"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="限制退款原因" :span="2">
                    {{userData.limitRefundReason | defaultValue}}
                  </el-descriptions-item>
                  <el-descriptions-item label="实名认证">
                    <boolean-tag :value="userData.isReal" size="small"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="备注" :span="2">{{userData.remark | defaultValue}}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="14" :md="12" :xs="24">
          <el-card class="box-card">
            <user-recharge-report :mch-id="userData.userId"/>
          </el-card>
        </el-col>
      </el-row>

      <el-card class="box-card">
        <el-tabs>
          <el-tab-pane label="设备列表" lazy>
            <device v-if="userData.userId != null" :query="{userId: userData.userId}" :view="views.user"/>
          </el-tab-pane>
          <el-tab-pane label="店铺列表" lazy>
            <store :query="{userId: userData.userId}" :view="views.user"/>
          </el-tab-pane>
          <el-tab-pane label="套餐列表" lazy>
            <suit :query="{userId: userData.userId}" :view="views.user"/>
          </el-tab-pane>
          <el-tab-pane label="充值订单" lazy>
            <recharge :query="{userId: userData.userId}" :view="views.user"/>
          </el-tab-pane>
          <el-tab-pane label="收入订单" lazy>
            <recharge :query="{mchId: userData.userId}" :view="views.mch"/>
          </el-tab-pane>
          <el-tab-pane label="提现列表" lazy>
            <withdraw :query="{userId: userData.userId}" :view="views.user"/>
          </el-tab-pane>
          <el-tab-pane label="账变记录" lazy>
            <record-balance :query="{userId: userData.userId}" :view="views.user"/>
          </el-tab-pane>
          <el-tab-pane label="实名认证记录" lazy>
            <real-name :query="{userId: userData.userId}" :view="views.user"/>
          </el-tab-pane>
          <el-tab-pane label="收款账户" lazy>
            <account :query="{userId: userData.userId}" :view="views.user"/>
          </el-tab-pane>
          <el-tab-pane label="用户秘钥" lazy>
            <access :query="{userId: userData.userId}" :view="views.user"/>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </template>
    <el-empty v-else description="用户不存在"/>
  </div>
</template>

<script>
import LineChart from "@/views/dashboard/LineChart.vue";
import {getSmUser} from "@/api/system/smUser";
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 Device from '@/views/system/device/index.vue'
import Recharge from '@/views/system/recharge/index.vue'
import BooleanTag from '@/components/BooleanTag/index.vue'
import Withdraw from '@/views/system/withdraw/index.vue'
import RealName from '@/views/ss/realName/index.vue'

export default {
  name: 'User/:userId',
  mixins: [$view, $serviceType],
  components: { RealName, Withdraw, BooleanTag, Recharge, Device, Suit, Account, RecordBalance, Store, Access, UserRechargeReport, UserAccount, UserDevice, LineChart},
  dicts: ['sm_user_type', 'service_type', 'withdraw_service_type'],
  computed: {
    serviceUnit() {
      return (type) => {
        return type === '2' ? '元' : '%';
      }
    }
  },
  data() {
    return {
      userData: {},
      loading: false,
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.loading = true;
      getSmUser(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;
  height: fit-content;
  flex-direction: column;
}
.user-detail .user-description {
  flex: 1;
  margin-top: 16px;
}
</style>
