<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.realOrUserName}}</span>
                </el-row>
                <div class="phone-number">{{userData.phonenumber}}</div>
              </div>

              <div class="user-description">
                <el-descriptions :column="3">
                  <el-descriptions-item label="用户角色">
                    <dict-tag :options="dict.type.user_type" :value="userData.type" size="mini"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="实名认证">
                    <el-tag :type="userData.isReal ? 'success' : 'danger'" size="mini">{{userData.isReal ? '已实名' : '未实名'}}</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="推广人" v-if="![SmUserType.NORMAL, SmUserType.BUSINESS_PLACE].includes(userData.type)">
                    <user-link :id="userData.referenceId" :name="userData.referenceName"/>
                  </el-descriptions-item>
                  <el-descriptions-item :label="`直属${FieldName.AGENT}`" v-if="![SmUserType.NORMAL, SmUserType.BUSINESS_PLACE].includes(userData.type)">
                    <user-link :id="userData.agentId" :name="userData.agentName"/>
                  </el-descriptions-item>
<!--                  <el-descriptions-item label="微信OpenId" :span="3">{{userData.wxOpenId | defaultValue}}</el-descriptions-item>-->
                  <el-descriptions-item label="分成比例" v-if="![SmUserType.BUSINESS_PLACE, SmUserType.NORMAL].includes(userData.type)">
                    {{userData.point | money | defaultValue}} %
                  </el-descriptions-item>
                  <el-descriptions-item :label="FieldName.AGENT" v-if="[SmUserType.AGENT].includes(userData.type)">
                    {{userData.agentCount | defaultValue}} 人
                  </el-descriptions-item>
                  <el-descriptions-item :label="FieldName.BIZ" v-if="[SmUserType.AGENT, SmUserType.BIZ].includes(userData.type)">
                    {{userData.bizManCount | defaultValue}} 人
                  </el-descriptions-item>
                  <el-descriptions-item :label="FieldName.INVESTOR" v-if="[SmUserType.AGENT, SmUserType.BIZ].includes(userData.type)">
                    {{userData.investorCount | defaultValue}} 人
                  </el-descriptions-item>
                  <el-descriptions-item :label="FieldName.STORE">
                    {{userData.storeCount | defaultValue}} 家
                  </el-descriptions-item>
                  <el-descriptions-item label="设备数" v-if="[SmUserType.AGENT, SmUserType.BIZ, SmUserType.INVESTOR].includes(userData.type)">
                    {{userData.deviceCount | defaultValue}} 台
                  </el-descriptions-item>
                  <el-descriptions-item label="账户余额">{{userData.balance | money | defaultValue}} 元</el-descriptions-item>
                  <el-descriptions-item label="总收入">{{userData.totalIncome | money | defaultValue}} 元</el-descriptions-item>
                  <el-descriptions-item label="总充值">{{userData.rechargeAmount | money | defaultValue}} 元</el-descriptions-item>
                  <el-descriptions-item label="总提现">{{userData.withDrawlAmount | money | defaultValue}} 元</el-descriptions-item>
<!--                  <el-descriptions-item label="真实姓名">{{userData.realName | defaultValue}}</el-descriptions-item>-->
<!--                  <el-descriptions-item label="身份证">{{userData.realIdCard | defaultValue}}</el-descriptions-item>-->
<!--                  <el-descriptions-item label="实名手机" >{{userData.realPhone | 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>
          <template v-if="userData.type === SmUserType.AGENT">
            <el-tab-pane :label="`${FieldName.AGENT}列表`" lazy v-if="checkPermi(['system:smUser:agentList'])">
              <sm-user :query="{referenceId: userData.userId, type: SmUserType.AGENT}"/>
            </el-tab-pane>
            <el-tab-pane :label="`${FieldName.BIZ}列表`" lazy v-if="checkPermi(['system:smUser:bizList'])">
              <sm-user :query="{referenceId: userData.userId, type: SmUserType.BIZ}"/>
            </el-tab-pane>
            <el-tab-pane :label="`${FieldName.INVESTOR}列表`" lazy v-if="checkPermi(['system:smUser:investorList'])">
              <sm-user :query="{agentId: userData.userId, type: SmUserType.INVESTOR}"/>
            </el-tab-pane>
            <el-tab-pane label="合作场所" lazy v-if="checkPermi(['ss:storeInvestor:list'])">
              <store-investor :query="{investorAgentId: userData.userId}"/>
            </el-tab-pane>
            <el-tab-pane label="设备列表" lazy v-if="checkPermi(['system:device:list'])">
              <device v-if="userData.userId != null" :query="{agentId: this.userData.userId}"/>
            </el-tab-pane>
          </template>
          <template v-if="userData.type === SmUserType.BIZ">
            <el-tab-pane :label="`${FieldName.BIZ}列表`" lazy v-if="checkPermi(['system:smUser:bizList'])">
              <sm-user :query="{referenceId: userData.userId, type: SmUserType.BIZ}"/>
            </el-tab-pane>
            <el-tab-pane :label="`${FieldName.INVESTOR}列表`" lazy v-if="checkPermi(['system:smUser:investorList'])">
              <sm-user :query="{referenceId: userData.userId, type: SmUserType.INVESTOR}"/>
            </el-tab-pane>
            <el-tab-pane label="合作场所" lazy v-if="checkPermi(['ss:storeInvestor:list'])">
              <store-investor :query="{bizId: userData.userId}" :view="views.user"/>
            </el-tab-pane>
            <el-tab-pane label="设备列表" lazy v-if="checkPermi(['system:device:list'])">
              <device v-if="userData.userId != null" :query="{investorReferenceId: this.userData.userId}"/>
            </el-tab-pane>
          </template>
          <template v-if="userData.type === SmUserType.INVESTOR">
            <el-tab-pane label="设备列表" lazy v-if="checkPermi(['system:device:list'])">
              <user-device :user-id="userData.userId"/>
            </el-tab-pane>
            <el-tab-pane label="合作场所" lazy v-if="checkPermi(['ss:storeInvestor:list'])">
              <store-investor :query="{investorId: userData.userId}" :view="views.user"/>
            </el-tab-pane>
          </template>
          <template v-if="userData.type === SmUserType.BUSINESS_PLACE">
            <el-tab-pane label="经营场所" lazy v-if="checkPermi(['ss:store:list'])">
              <store :query="{userId: userData.userId}" :view="views.user"/>
            </el-tab-pane>
          </template>
          <el-tab-pane label="财务记录" lazy v-if="checkPermi(['ss:recordBalance:list'])">
            <record-balance v-if="userData.userId != null" :query="{userId: userData.userId, subjectType: RecordBalanceSubjectType.USER}" :view="views.user"/>
          </el-tab-pane>
          <el-tab-pane label="收款账户" lazy v-if="checkPermi(['ss:account:list'])">
            <account v-if="userData.userId != null"  :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 { 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'

export default {
  name: 'User/:userId',
  mixins: [$view, $serviceType],
  components: { 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
    },
    serviceUnit() {
      return (type) => {
        return type === '2' ? '元' : '%';
      }
    }
  },
  data() {
    return {
      userData: {},
      loading: false,
    }
  },
  created() {
    this.initData();
  },
  methods: {
    checkPermi,
    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: 320px;
  flex-direction: column;
}
.user-detail .user-description {
  flex: 1;
  margin-top: 32px;
}
</style>
