<template>
  <div class="app-container" v-loading="loading">
    <template v-if="detail != null">
      <el-row :gutter="12">
        <el-col :lg="8" :md="10" :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
                  >
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    size="small"
                    style="padding: 5px 0 0"
                    @click="showEditDialog = 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">{{ detail.realOrUserName }}</span>
                  <dict-tag
                    :value="detail.type"
                    :options="dict.type.sm_user_type"
                  />
                </el-row>
                <div class="phone-number">{{ !isEmpty(detail.phonenumber) ? detail.phonenumber : '未绑定手机' }}</div>
              </div>
              <div class="user-description">
                <el-descriptions :column="2">
                  <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="所属应用">{{ detail.appName | dv }}</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 | defaultValue }}
                  </el-descriptions-item>
                  <el-descriptions-item label="身份证">
                    {{ detail.realIdCard | defaultValue }}
                  </el-descriptions-item>
                  <el-descriptions-item label="实名手机">
                    {{ detail.realPhone | defaultValue }}
                  </el-descriptions-item>
                  <el-descriptions-item label="开放平台ID" :span="2">{{ detail.wxOpenId | dv }}</el-descriptions-item>
                  <el-descriptions-item label="注册时间" :span="2">{{ detail.createTime | dv }}</el-descriptions-item>
                  <el-descriptions-item label="备注" :span="2">{{detail.remark | defaultValue}}</el-descriptions-item>
                  <el-descriptions-item label="专属渠道" :span="2">
                    <el-tag type="success" v-for="item in detail.channelList" :key="item.channelId" size="mini">{{ item.name }}</el-tag> 
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="16" :md="14" :xs="24">
          <el-card class="box-card">
            <el-row type="flex">
                <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>
          </el-card>
          <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>

      <el-card class="box-card">
        <el-tabs>
          <el-tab-pane label="商户设备列表" lazy>
            <device
              v-if="detail.userId != null"
              :query="{ userId: detail.userId }"
              :view="views.user"
            />
          </el-tab-pane>
          <el-tab-pane label="代理设备列表" lazy>
            <device
              v-if="detail.userId != null"
              :query="{ agentId: detail.userId }"
              :view="views.user"
            />
          </el-tab-pane>
          <el-tab-pane label="店铺列表" lazy>
            <store :query="{ userId: detail.userId }" :view="views.user" />
          </el-tab-pane>
          <el-tab-pane label="套餐列表" lazy>
            <suit :query="{ userId: detail.userId }" :view="views.user" />
          </el-tab-pane>
          <el-tab-pane label="充值订单" lazy>
            <recharge :query="{ userId: detail.userId }" :view="views.user" />
          </el-tab-pane>
          <el-tab-pane label="收入订单" lazy>
            <recharge :query="{ mchId: detail.userId }" :view="views.mch" />
          </el-tab-pane>
          <el-tab-pane label="分成记录" lazy>
            <bonus
              :query="{
                arrivalId: detail.userId,
                arrivalTypes: BonusArrivalType.userList(),
              }"
              :view="views.user"
            />
          </el-tab-pane>
          <el-tab-pane label="提现列表" lazy>
            <withdraw :query="{ userId: detail.userId }" :view="views.user" />
          </el-tab-pane>
          <el-tab-pane label="应收账" lazy>
            <receive-bill
              :query="{ userId: detail.userId }"
              :view="views.user"
            />
          </el-tab-pane>
          <el-tab-pane label="账变记录" lazy>
            <record-balance
              :query="{ userId: detail.userId }"
              :view="views.user"
            />
          </el-tab-pane>
          <el-tab-pane label="风控记录" lazy>
            <risk :query="{ userId: detail.userId }" :view="views.user" />
          </el-tab-pane>
          <el-tab-pane label="风控审核" lazy>
            <risk-info :query="{ userId: detail.userId }" :view="views.user" />
          </el-tab-pane>
          <el-tab-pane label="实名认证记录" lazy>
            <real-name :query="{ userId: detail.userId }" :view="views.user" />
          </el-tab-pane>
          <el-tab-pane label="绑定记录" lazy>
            <bind-record
              :query="{ userId: detail.userId }"
              :view="views.user"
            />
          </el-tab-pane>
          <el-tab-pane label="收款账户" lazy>
            <account :query="{ userId: detail.userId }" :view="views.user" />
          </el-tab-pane>
          <el-tab-pane label="用户秘钥" lazy>
            <access :query="{ userId: detail.userId }" :view="views.user" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </template>
    <el-empty v-else description="用户不存在" />

    <!--用户设置-->
    <user-config-dialog
      :show.sync="showConfigDialog"
      :user-id="detail.userId"
      @success="getDetail"
    />

    <!--用户编辑-->
    <user-form-dialog
      :show.sync="showEditDialog"
      :user-id="detail.userId"
      @success="getDetail"
    />
  </div>
</template>

<script>
import LineChart from "@/views/dashboard/LineChart.vue";
import { getSmUser, resetSmUserRealName } 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'
import UserConfigDialog from '@/views/system/smUser/components/UserConfigDialog.vue'
import { BonusArrivalType, SmUserType } from '@/utils/constants'
import ReceiveBill from '@/views/ss/receiveBill/index.vue'
import Risk from '@/views/ss/risk/index.vue'
import UserDailyRechargeReport from '@/views/system/smUser/components/UserDailyRechargeReport.vue'
import Bonus from '@/views/ss/bonus/index.vue'
import RiskInfo from '@/views/ss/riskInfo/index.vue'
import BindRecord from '@/views/system/bindRecord/index.vue'
import UserFormDialog from '@/views/system/smUser/components/UserFormDialog.vue'
import {isEmpty} from '@/utils/index'
export default {
  name: 'User/:userId',
  mixins: [$view, $serviceType],
  dicts: ['sm_user_type', 'service_type', 'withdraw_service_type'],
  components: { 
    BindRecord, 
    RiskInfo,
    Bonus, 
    UserDailyRechargeReport, 
    Risk, 
    ReceiveBill, 
    UserConfigDialog,
    RealName,
    Withdraw, 
    BooleanTag,
    Recharge,
    Device,
    Suit,
    Account,
    RecordBalance,
    Store,
    Access, 
    UserRechargeReport,
    UserAccount,
    UserDevice, 
    LineChart, 
    UserFormDialog
  },
  data() {
    return {
      BonusArrivalType,
      SmUserType,
      detail: {},
      loading: false,
      showConfigDialog: false,
      showEditDialog: false,
    }
  },
  computed: {
    serviceUnit() {
      return (type) => {
        return type === '2' ? '元' : '%';
      }
    }
  },
  created() {
    this.getDetail();
  },
  methods: {
    isEmpty,
    handleResetRealName() {
      this.$confirm(`确认重置用户的实名认证信息？`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        resetSmUserRealName(this.detail.userId).then(res => {
          if (res.code === 200) {
            this.$message.success("解除成功")
            this.getDetail();
          }
        }).catch((e) => {
          this.loading = false;
        })
      })
    },
    getDetail() {
      this.loading = true;
      getSmUser(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>
