<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()
// 地区
import cityList from '@/utils/city.json'
// 变量
const managerInfo = ref({})
const imgs = ref([])
// 生命周期
onMounted(() => {
  getManagerDetail()
})
// funstions
async function getManagerDetail() {
  const res = await api.getManagerDetail({managerId:route.params.id})
  if(res.code === 0) {
    managerInfo.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:managerInfo.value.user_id,
    status:a_type.value
  })
  if(res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    getManagerDetail()
  }
}
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="managerInfo.avatar" alt="">
        </div>
        <div class="bb-item">
          昵称：{{managerInfo.nickname}}
        </div>
        <div class="bb-item">
          ID：{{managerInfo.user_id}}
        </div>
        <div class="bb-item">
          注册时间：{{formatDate(managerInfo.CreatedAt)}}
        </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">{{managerInfo.province>-1?cityList[managerInfo.province].province:'无'}}</div>
          </div>
        </div> -->
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">身份证号码：</div>
            <div class="di-right">{{managerInfo.id_card}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">手机号码：</div>
            <div class="di-right">{{managerInfo.phone}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">域内助教人数：</div>
            <div class="di-right">{{managerInfo.assistant_num}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">域内学员人数：</div>
            <div class="di-right">{{managerInfo.student_num}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">课程总订单数：</div>
            <div class="di-right">{{managerInfo.course_num}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">课程总学费：</div>
            <div class="di-right">{{managerInfo.course_total/100}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">课程总佣金：</div>
            <div class="di-right">{{managerInfo.course_income/100}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">测试总订单数：</div>
            <div class="di-right">{{managerInfo.exam_num}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">测试总学费：</div>
            <div class="di-right">{{managerInfo.exam_total/100}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">测试总佣金：</div>
            <div class="di-right">{{managerInfo.exam_income/100}}</div>
          </div>
        </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{
      .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>
