<script setup>
// 引入依赖
import api from '@/api/userManage'
import capi from '@/api/course'
import custom from '@/utils/custom'
import {formatDate} from '@/utils/format'
// import { toSQLLine } from '@/utils/stringFun'
// import WarningBar from '@/components/warningBar/warningBar.vue'
// import coursePool from './components/coursePool.vue'
// import exercisesPool from '@/view/course/components/exercisesPool.vue'
import {ref,onMounted,provide } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 变量
const userManageInfo = ref({})
const imgs = ref([])
const detail_type = ref({
  dealDetailMoney:'dealDetailMoney',
  dealDetailPoint:'dealDetailPoint',
  learningDetail:'learningDetail',
  testDetail:'testDetail',
  auctionDetail:'auctionDetail',// 竞拍
  raffleDetail:'raffleDetail',// 抽奖
})
// 生命周期
onMounted(() => {
  getUserDetail()
})
// funstions
async function getUserDetail() {
  const res = await api.viewUser({id:route.params.id})
  if(res.code === 0) {
    userManageInfo.value = res.data
    // let teacher_cert = JSON.parse(res.data.teacher_cert)
    // let skill_cert = JSON.parse(res.data.skill_cert)
    // imgs.value = [...skill_cert,...teacher_cert]
    // console.log(imgs.value)
  }
}
function toDealDetail(type) {
  // let url = ''
  // switch (type){
  //   case detail_type.value.dealDetailMoney:
  //       url = 'dealDetailMoney';
  //       break;
  //   case 2:
  //       url = 'dealDetailPoint';
  //       break;
  // }
  const params = {
    user_id:route.params.id
  }
  if(type === detail_type.value.auctionDetail) { // 竞拍
    params.type = 1
  }
  else if(type === detail_type.value.raffleDetail){ // 抽奖
    params.type = 2
  }
  router.push({name:type,params:{user_id:route.params.id}})
}
</script>
<template>
  <div>
    <!--    基本信息-->
    <div class="gva-search-box">
      <div class="baseInfo-box">
        <div class="bb-item">
          <img class="avatar" :src="userManageInfo?.avatar" alt="">
        </div>
        <div class="bb-item">
          昵称：{{userManageInfo.nickname}}
        </div>
        <div class="bb-item">
          ID：{{userManageInfo.user_id}}
        </div>
        <div class="bb-item">
          注册时间：{{custom.dateFmt(userManageInfo.created_at)}}
        </div>
        <div class="bb-item">
          身份：学员
        </div>
        <div class="bb-item">
          邀请人数：{{userManageInfo.invite_num}}人
        </div>
      </div>
    </div>
    <!--    章节信息-->
    <div class="gva-table-box">
      <div class="detail-info-box">
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">身份证号码：</div>
            <div class="di-right">{{userManageInfo.id_card}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">手机号码：</div>
            <div class="di-right">{{userManageInfo.phone}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">区域：</div>
            <div class="di-right">{{custom.getProvinceName(userManageInfo.province)}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">余额：</div>
            <div class="di-right">{{userManageInfo.balance/100}}元</div>
          </div>
          <div class="dib-item link-item" @click="toDealDetail(detail_type.dealDetailMoney)">
            <div class="di-left">查看交易明细</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">积分：</div>
            <div class="di-right">{{userManageInfo.point}}</div>
          </div>
          <div class="dib-item link-item" @click="toDealDetail(detail_type.dealDetailPoint)">
            <div class="di-left">查看交易明细</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">报课次数：</div>
            <div class="di-right">{{userManageInfo.course_num}}次</div>
          </div>
          <div class="dib-item">
            <div class="di-left">累计消费金额：</div>
            <div class="di-right">{{userManageInfo.course_expend/100}}</div>
          </div>
          <div class="dib-item link-item" @click="toDealDetail(detail_type.learningDetail)">
            <div class="di-left">查看学习记录</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">测试次数：</div>
            <div class="di-right">{{userManageInfo.exam_num}}次</div>
          </div>
          <div class="dib-item">
            <div class="di-left">累计金额：</div>
            <div class="di-right">{{userManageInfo.exam_expend/100}}</div>
          </div>
          <div class="dib-item link-item" @click="toDealDetail(detail_type.testDetail)">
            <div class="di-left">查看测试记录</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">抽奖次数：</div>
            <div class="di-right">{{userManageInfo.lottery_num}}次</div>
          </div>
          <div class="dib-item">
            <div class="di-left">中奖次数：</div>
            <div class="di-right">{{userManageInfo.lottery_win}}次</div>
          </div>
          <div class="dib-item link-item" @click="toDealDetail(detail_type.raffleDetail)">
            <div class="di-left">查看抽奖记录</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">竞拍次数：</div>
            <div class="di-right">{{userManageInfo.auction_num}}次</div>
          </div>
          <div class="dib-item">
            <div class="di-left">中奖次数：</div>
            <div class="di-right">{{userManageInfo.auction_win}}次</div>
          </div>
          <div class="dib-item link-item" @click="toDealDetail(detail_type.auctionDetail)">
            <div class="di-left">查看竞拍记录</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">邀请人姓名：</div>
            <div class="di-right">{{userManageInfo.invite_name}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">邀请人姓名ID：</div>
            <div class="di-right">{{userManageInfo.invite_id}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .action-box{
    display: flex;
    margin-top: 20px;
    justify-content: center;
    .a-btn{
      background: rgb(60, 106, 112);
      color: white;
      padding: 10px 50px;
      cursor: pointer;
      margin: 10px;
          border-radius: 5px;
    }
    .approved{

    }
    .refuse{
      background: white !important;
      color:rgb(60, 106, 112) !important;
      border: 1px solid rgb(60, 106, 112) !important;
    }
  }
  /*基本信息*/
  .gva-search-box{
    .baseInfo-box{
      display: flex;
      align-items: center;
      //justify-content: space-around;
      .bb-item{
        margin: 10px 20px;
        .avatar{
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 1px solid #cdcdcd;
        }
      }
    }
  }
  /*详细信息*/
  .text{
    color: red !important;
  }
  .state-text{
    font-size: 15px;
    color: gray;
  }
  .gva-table-box{
    .detail-info-box{
      .dib-row{
        overflow: hidden;
        .link-item{
          color: #3C6A70 !important;
          cursor: pointer;
        }
        .dib-item{
          //color: gray;
          padding: 10px 0;
          display: flex;
          float: left;
          margin-right: 30px;
          .di-left{
          }
          .img-css{
            width: 100px;
            height: 100px;
            margin: 0 10px 10px 0;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
