<template>
  <div class="app-container">
    <div class="head">
      <el-image v-if="details.headPhoto" style="width: 100px; height: 100px" :src="details.headPhoto" :preview-src-list="details.headPhoto?[details.headPhoto]:[]"></el-image>
      <el-image v-else style="width: 100px; height: 100px" :src="require('@/assets/images/userPhoto.png')" :preview-src-list="[require('@/assets/images/userPhoto.png')]"></el-image>
      <div class="head_r">
        <div>{{details.nickname}}</div>
        <div>{{details.mobile}}</div>
      </div>
    </div>
    <!-- <div class="numBox">
      <div>兑换豆 ：{{details.integralAble||0}}</div>
      <div>红包数 ：{{details.redEnvelopeTotal||0}}</div>
      <div>PK数 ：{{details.gamesSum||0}}</div>
    </div> -->

    <div class="tabsBox">
      <el-tabs v-model="activeName" @tab-click="handleQuery()">
        <el-tab-pane label="用户信息" name="0">
          <div class="userInfo">
            <div>用户ID：{{details.businessId}}</div>
            <div>用户昵称：{{details.nickname}}</div>
            <div>手机号：{{details.mobile}}</div><br />
            <div>注册时间：{{ parseTime(details.createTime, '{y}-{m}-{d} {h}:{i}') }}</div>
            <div>上次登录时间：{{parseTime(details.lastLoginTime, '{y}-{m}-{d} {h}:{i}')}}</div>
            <!-- <div>邀请人：<span v-if="details.managerUser">{{details.managerUser.mobile}}（{{details.managerUser.nickname}}）</span> </div> -->
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="兑换豆明细" name="1">
          <el-table :data="list" stripe v-loading="loading">
            <el-table-column prop="date" label="序号" width="80">
              <template slot-scope="scope">
                <div>
                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="来源/用户" align="center">
              <template slot-scope="{row}">
                <div>
                  {{dealSourceType(row.sourceType)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="value" label="兑换豆变化" align="center">
              <template slot-scope="{row}">
                <div>
                  {{row.billType==1?'+':'-'}}{{row.value}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="endScore" label="变化后兑换豆" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="操作时间" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="businessCode" label="关联订单号" align="center">
            </el-table-column>
            <el-table-column prop="remark" label="备注">
            </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-tab-pane>
        <el-tab-pane label="红包明细" name="2">
          <el-table :data="list" stripe v-loading="loading">
            <el-table-column prop="date" label="序号" width="80">
              <template slot-scope="scope">
                <div>
                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="gameSerialNumber" label="流水号" align="center">
            </el-table-column>
            <el-table-column prop="userPhone" label="用户手机号" align="center">
            </el-table-column>
            <el-table-column prop="address" label="游戏结果" align="center">
              <template slot-scope="{row}">
                <div>
                  <el-tag type="danger">输盘</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="relatedOrderNo" label="关联订单号" align="center">
            </el-table-column>
            <el-table-column prop="amount" label="红包金额" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="执行时间" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-tab-pane>
        <el-tab-pane label="PK明细" name="3">
          <el-table :data="list" stripe v-loading="loading">
            <el-table-column prop="date" label="序号" width="80">
              <template slot-scope="scope">
                <div>
                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="serialNumber" label="流水号" align="center">
            </el-table-column>
            <el-table-column prop="userPhone" label="用户手机号" align="center">
            </el-table-column>
            <el-table-column prop="address" label="游戏结果" align="center">
              <template slot-scope="{row}">
                <div>
                  <el-tag v-if="row.gameResult">赢盘</el-tag>
                  <el-tag v-else type="danger">输盘</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="relatedOrderNo" label="关联订单号" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.relatedOrderNo||'--' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="rewardOrderNo" label="奖励订单号" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.rewardOrderNo||'--' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="prizeType" label="游戏类型" align="center">
              <template slot-scope="{row}">
                <div v-for="(v,i) in prizeTypeList" :key="i" v-if="row.prizeType==v.value">{{v.label}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="redPacketAmount" label="红包金额" align="center">
            </el-table-column>
            <el-table-column prop="executeTime" label="执行时间" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.executeTime, '{y}-{m}-{d} {h}:{i}') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-tab-pane> -->
      </el-tabs>
    </div>
    <div class="form-footer">
      <el-button @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import { userInfo, integralPage } from "@/api/user.js";
import { rechargeRedPacketPage, gameRecordPage } from "@/api/game.js";
export default {
  data () {
    return {
      details: {},
      activeName: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      list: [],
      sourceTypeList: [
        { label: "购物奖励", value: 0 },
        { label: "活动奖励", value: 1 },
        { label: "兑换礼包", value: 10 },
        { label: "游戏奖励", value: 20 },
        { label: "用户注册", value: 30 },
        { label: "过期", value: 99 },
      ],
      prizeTypeList: [
        { label: "订单翻倍", value: 0 },
        { label: "红包奖励", value: 1 },
        { label: "兜底奖励", value: 2 },
      ],
    }
  },
  created () {
    this.queryParams.userId = this.$route.query.id
    this.getDetails();
  },
  methods: {
    getList () {
      this.loading = true;
      let apiFun = integralPage;
      this.queryParams.behavior = undefined;
      if (this.activeName == 2) {
        this.queryParams.behavior = 4
        apiFun = rechargeRedPacketPage;
      } else if (this.activeName == 3) {
        apiFun = gameRecordPage;
      }
      apiFun(this.queryParams).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleQuery () {
      if (this.activeName != 0) {
        this.queryParams.pageNum = 1;
        this.getList();
      }
    },
    dealSourceType (val) {
      return this.sourceTypeList.find(item => item.value == val)?.label
    },
    getDetails () {
      userInfo(this.$route.query.id).then(res => {
        this.details = res.data
      })
    },
    handleBack () {
      this.$router.back();
    },
  }
}
</script>

<style lang="scss">
.el-tabs__nav-wrap::after {
  display: none !important;
}
.el-tabs__item {
  font-size: 16px;
}
</style>
<style lang='scss' scoped>
.app-container {
  padding-left: 80px;
  padding-right: 80px;
  .head {
    display: flex;
    font-size: 14px;
    font-weight: 700;
    min-height: 100px;
    .head_r {
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
  .numBox {
    display: flex;
    margin-top: 30px;
    font-size: 14px;
    font-weight: 700;
    > div {
      width: 150px;
    }
  }
  .tabsBox {
    margin-top: 30px;
    .userInfo {
      > div {
        width: 300px;
        display: inline-block;
        margin-top: 20px;
        font-size: 14px;
      }
    }
  }
}
.form-footer {
  margin-top: 20px;
  text-align: center;
}
</style>