<template>
  <div class="app-container" v-loading="loading">
    <template>
      <el-row :gutter="12">
        <el-col :lg="10" :md="12" :xs="24">
          <el-card class="box-card">
            <template #header>
              <el-row type="flex" style="justify-content: space-between">
                <div>用户详情</div>
                <div>
                  <el-button type="text" icon="el-icon-setting" size="small" style="padding: 5px 0 0;" @click="showConfigDialog = true">用户配置</el-button>
                </div>
              </el-row>
            </template>

            <div class="user-detail">
              <div class="user-header">
                <el-avatar :size="64" :src="detail.avatar"></el-avatar>
                <el-row type="flex" class="name-box">
                  <span class="user-name">11</span>
                  <dict-tag :value="detail.type" :options="dict.type.sm_user_type"/>
                </el-row>
                <div class="phone-number">{{detail.phonenumber}}</div>
              </div>

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

              <div class="user-description">
                <el-descriptions :column="3">
                  <el-descriptions-item label="充值服务费">
                    {{detail.realServiceRate | money | defaultValue}} %
                  </el-descriptions-item>
                  <el-descriptions-item label="代理服务费">
                    {{detail.agentServiceRate | money | defaultValue}} %
                  </el-descriptions-item>
                  <el-descriptions-item label="提现服务费">
                    <template v-if="detail.withdrawServiceRate == null || detail.withdrawServiceType == null">跟随渠道</template>
                    <template v-else>
                      <dict-tag :options="dict.type.withdraw_service_type" :value="detail.withdrawServiceType" size="mini"/>
                      {{detail.withdrawServiceRate}} {{serviceUnit(detail.withdrawServiceType)}}
                    </template>
                  </el-descriptions-item>
<!--                  <el-descriptions-item label="实名认证">-->
<!--                    <boolean-tag :value="detail.isReal" size="small"/>-->
<!--                    <el-link-->
<!--                      v-if="detail.isReal"-->
<!--                      style="margin-left: 4px;"-->
<!--                      type="primary"-->
<!--                      size="small"-->
<!--                      icon="el-icon-link"-->
<!--                      @click="handleResetRealName"-->
<!--                    >解除实名</el-link>-->
<!--                  </el-descriptions-item>-->
                  <el-descriptions-item label="姓名">
                    {{detail.realName | dv}}
                  </el-descriptions-item>
                  <el-descriptions-item label="身份证">
                    {{detail.realIdCard | dv}}
                  </el-descriptions-item>
                  <el-descriptions-item label="实名手机">
                    {{detail.realPhone | dv}}
                  </el-descriptions-item>
                  <el-descriptions-item label="备注" :span="2">{{detail.remark | dv}}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="14" :md="12" :xs="24">
          <el-card class="box-card">
            <el-row type="flex">
              <el-tabs style="width: 100%">
                <el-tab-pane label="日报表" lazy>
                  <user-daily-recharge-report v-if="detail.userId != null" :query="{arrivalId: detail.userId}"/>
                </el-tab-pane>
                <el-tab-pane label="月报表" lazy>
                  <user-recharge-report :mch-id="detail.userId"/>
                </el-tab-pane>
              </el-tabs>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </template>
<!--    <el-empty v-else description="用户不存在"/>-->

<!--    &lt;!&ndash;用户设置&ndash;&gt;-->
<!--    <user-config-dialog :show.sync="showConfigDialog" :user-id="detail.userId" @success="getDetail"/>-->
  </div>
</template>

<script>
import { getUser } from '@/api/system/user'
import Device from '@/views/system/device/index.vue'
// import Withdraw from '@/views/system/withdraw/index.vue'
// import UserDailyRechargeReport from '@/views/system/smUser/components/UserDailyRechargeReport.vue'
// import UserRechargeReport from '@/views/system/smUser/components/userRechargeReport.vue'
// import UserConfigDialog from '@/views/system/smUser/components/UserConfigDialog.vue'
// import { BonusArrivalType, SmUserType } from '@/utils/constants'
import { $serviceType, $view } from '@/utils/mixins'

export default {
  name: 'UserDetail',
  mixins: [$view, $serviceType],
  dicts: ['sm_user_type', 'service_type', 'withdraw_service_type'],
  components: {
    Device

  },
  data() {
    return {
      detail: {},
      loading: false,
      showConfigDialog: false,
    }
  },
  computed: {
    serviceUnit() {
      return (type) => {
        return type === '2' ? '元' : '%';
      }
    }
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.loading = true;
      getUser(this.$route.params.userId).then(response => {
        this.detail = 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>
