<script setup>
// 引入依赖
import api from '@/api/teacher'
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 teacherInfo = ref({})
const imgs = ref([])
// 生命周期
onMounted(() => {
  getTeacherDetail()
})
// funstions
async function getTeacherDetail() {
  const res = await api.getTeacherDetail({id:route.params.id})
  if(res.code === 0) {
    teacherInfo.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:teacherInfo.value.user_id,
    status:a_type.value
  })
  if(res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    getTeacherDetail()
  }
}
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="teacherInfo.avatar" alt="">
        </div>
        <div class="bb-item">
          昵称：{{teacherInfo.name}}
        </div>
        <div class="bb-item">
          ID：{{teacherInfo.user_id}}
        </div>
        <div class="bb-item">
          注册时间：{{teacherInfo.CreatedAt}}
        </div>
        <div class="bb-item">
          身份：教师
        </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">{{teacherInfo.id_card}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">手机号码：</div>
            <div class="di-right">{{teacherInfo.phone}}</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">区域：</div>
            <div class="di-right">{{teacherInfo.province}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">提交时间：</div>
            <div class="di-right">{{formatDate(teacherInfo.CreatedAt)}}</div>
          </div>
          <div class="dib-item">
            <div class="di-left">就职单位：</div>
            <div class="di-right">重庆大学</div>
          </div>
          <div class="dib-item">
            <div class="di-left">任职行业：</div>
            <div class="di-right">金融</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">余额：</div>
            <div class="di-right">{{teacherInfo.balance}}元</div>
          </div>
          <div class="dib-item">
            <div class="di-left">累计收益：</div>
            <div class="di-right">{{teacherInfo.income}}元</div>
          </div>
          <div class="dib-item link-item">
            <div class="di-left">查看交易明细</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">上架课程：</div>
            <div class="di-right">{{teacherInfo.publish_course}}门</div>
          </div>
          <div class="dib-item link-item">
            <div class="di-left">查看课程列表</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">上架测试：</div>
            <div class="di-right">{{teacherInfo.publish_exam}}份</div>
          </div>
          <div class="dib-item link-item">
            <div class="di-left ">查看试卷列表</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">销售次数(课程)：</div>
            <div class="di-right">{{teacherInfo.course_sale}}次</div>
          </div>
          <div class="dib-item">
            <div class="di-left">累计金额：</div>
            <div class="di-right">{{teacherInfo.course_income}}</div>
          </div>
          <div class="dib-item link-item">
            <div class="di-left">查看学习记录</div>
          </div>
        </div>
        <div class="dib-row">
          <div class="dib-item">
            <div class="di-left">销售次数(测试)：</div>
            <div class="di-right">{{teacherInfo.exam_sale}}次</div>
          </div>
          <div class="dib-item">
            <div class="di-left">累计金额：</div>
            <div class="di-right">{{teacherInfo.exam_income}}</div>
          </div>
          <div class="dib-item link-item">
            <div class="di-left">查看测试记录</div>
          </div>
        </div>
        <div class="dib-row" style="margin-top: 50px">
          <div class="dib-item">
            <div class="di-left">资质证书（多张）</div>
          </div>
          <div class="dib-item">
            <el-image
              v-for="(item,i) in imgs"
              class="img-css"
              :src="item"
              :zoom-rate="1.2"
              :preview-src-list="imgs"
              :initial-index="4"
              fit="cover"
            />
          </div>
        </div>

      </div>
      <!--    操作区域-->
<!--      <div class="action-box" v-if="teacherInfo.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':teacherInfo.status == 2}">{{getStateName(teacherInfo.status)}}</div>-->
<!--      </div>-->
            <div class="action-box">
              <div class="state-text" :class="{'reuse-text':teacherInfo.status == 2}">{{getStateName(teacherInfo.status)}}</div>
            </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="操作提醒"
      width="30%"
      :before-close="handleClose"
    >
      <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>
