<script setup>
// 引入依赖
import api from '@/api/market'
// 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 assistantInfo = ref({})
const imgs = ref([])
// 生命周期
onMounted(() => {
  getAssistantDetail()
})
// funstions
async function getAssistantDetail() {
  const res = await api.getAssistantDetail({id:route.params.id})
  if(res.code === 0) {
    assistantInfo.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)
  }
}
const tip_text = ref('')
const dialogVisible = ref(false)
const a_type = ref(0)
function actionFunc(type) {
  dialogVisible.value = true
  a_type.value = type
  switch (type){
    case 3:
      tip_text.value = '是否同意该助教申请？';
      break;
    case 2:
      tip_text.value = '是否拒绝该助教申请？';
      break;
  }
}
async function actionOk() { // 确认提交
  const res = await api.teacherOperator({
    teacher_id:assistantInfo.value.user_id,
    status:a_type.value
  })
  if(res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    getAssistantDetail()
  }
}
function getStateName(state) {
  let str = ''
  switch (state){
    case 1:
        str = '待审核'
      break;
    case 2:
        str = '已拒绝'
      break;
    case 3:
        str = '已同意'
      break;
  }
  return str
}
</script>
<template>
  <div>
    助教详情
    <!--    基本信息-->
    <div class="gva-search-box">
      <div class="baseInfo-box">
        <div class="bb-item">
          <img class="avatar" :src="assistantInfo.avatar" alt="">
        </div>
        <div class="bb-item">
          昵称：{{assistantInfo.nickname}}
        </div>
        <div class="bb-item">
          ID：{{assistantInfo.user_id}}
        </div>
        <div class="bb-item">
          注册时间：{{formatDate(assistantInfo.created_at)}}
        </div>
        <div class="bb-item">
          身份：{{custom.getUserPosition(assistantInfo.user_type)}}
        </div>
<!--        <div class="bb-item">-->
<!--          邀请人数：105人-->
<!--        </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">{{assistantInfo.id_card}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">手机号码：</div>
            <div class="di-right">{{assistantInfo.phone}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">邀请人姓名：</div>
            <div class="di-right">{{assistantInfo.invite_nickname}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">邀请人ID号：</div>
            <div class="di-right">{{assistantInfo.invite_id}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">邀请人数：</div>
            <div class="di-right">{{assistantInfo.invite_num}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">有效人数：</div>
            <div class="di-right">{{assistantInfo.valid_num}}</div>
          </div>
        </div>
      </div>
      <div class="detail-info-box">
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">管理学员：</div>
            <div class="di-right">{{assistantInfo.student_num}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">课程订单：</div>
            <div class="di-right">{{assistantInfo.student_info?.course_num}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">课程收益：</div>
            <div class="di-right">{{assistantInfo.student_info?.course_income/100}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">试卷订单：</div>
            <div class="di-right">{{assistantInfo.student_info?.exam_num}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">试卷收益：</div>
            <div class="di-right">{{assistantInfo.student_info?.exam_income/100}}</div>
          </div>
        </div>
      </div>
      <div class="detail-info-box">
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">推荐老师：</div>
            <div class="di-right">{{assistantInfo.teacher_num}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">授课总订单：</div>
            <div class="di-right">{{assistantInfo.teacher_info?.course_num}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">授课总收益：</div>
            <div class="di-right">{{assistantInfo.teacher_info?.course_income/100}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">试卷总订单：</div>
            <div class="di-right">{{assistantInfo.teacher_info?.exam_num}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">试卷总收益：</div>
            <div class="di-right">{{assistantInfo.teacher_info?.exam_income/100}}</div>
          </div>
        </div>
      </div>
      <div class="detail-info-box">
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">推荐助教：</div>
            <div class="di-right">{{assistantInfo.assistant_num}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">课程总订单：</div>
            <div class="di-right">{{assistantInfo.assistant_info?.course_num}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">课程总收益：</div>
            <div class="di-right">{{assistantInfo.assistant_info?.course_income/100}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">试卷总订单：</div>
            <div class="di-right">{{assistantInfo.assistant_info?.exam_num}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">试卷总收益：</div>
            <div class="di-right">{{assistantInfo.assistant_info?.exam_income/100}}</div>
          </div>
        </div>

      </div>
      <!--    操作区域-->
      <div class="action-box" v-if="assistantInfo.status == 1">
        <div class="a-btn approved" @click="actionFunc(3)">同意</div>
        <div class="a-btn refuse" @click="actionFunc(2)">拒绝</div>
      </div>
      <div class="action-box" v-else>
        <div class="state-text" :class="{'reuse-text':assistantInfo.status == 2}">{{getStateName(assistantInfo.status)}}</div>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="操作提醒"
      width="30%"
    >
      <span>{{tip_text}}</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="actionOk">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </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{
      margin-bottom: 10px;
      border-bottom: 1px solid #f0f2f5;
      padding-bottom: 10px;
      box-shadow: 10px 2px 7px #f0f2f5;
      .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>
