
<script setup>
// 引入依赖
import api from '@/api/teacher'
import custom from '@/utils/custom'
import {formatDate} from '@/utils/format'
import cityList from '@/utils/city.json'
import {ref,onMounted,provide } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
// store
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()
// 变量
// const path = ref(import.meta.env.VITE_BASE_API)
const queryParams = ref({
  page:1,
  pageSize:10,
  name:'',
  status:'',
  province:''
})
// const subjectParams = ref({
//     page:1,
//     pageSize:100,
// })
const state_arr = ref([
    {
      name:'申请中',
      id:1
    },
    {
      name:'拒绝',
      id:2
    },
    {
      name:'同意',
      id:3
    }
])
const tableData = ref([])
const deleteVisible = ref(false)
const total = ref(0)
// const dialogFormVisible = ref(false)
// const dialogTitle = ref('')
// const form =ref({})
// const rules = ref({
//   name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }]
// })
const question_id = ref(0)
const content = ref(null)
const teacher_ids = ref([])
// 生命周期
onMounted(() => {
  getAssistantList()
})
// provide('subjectList', subjectList)
// provide('current_subject', current_subject)
// 方法
async function getAssistantList() {
  const res = await api.getAssistantList(queryParams.value)
  if(res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  }
}
// async function getSubject(){ // 获取课程分类
//   const res = await capi.getSubjectList(subjectParams.value)
//   if(res.code === 0) {
//     subjectList.value = custom.getStdSubject(res.data.records)
//   }
// }
function onSubmit() {
  getAssistantList()
}
const onReset = () => {
  queryParams.value = {
    page:1,
    pageSize:10,
    name:'',
    status:'',
    subject:''
  }
}
async function onDelete() {
  const ids = teacher_ids.value
  const res = await api.delExamination({ teacher_ids:ids })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    deleteVisible.value = false
    getAssistantList()
  }
}
const handleSelectionChange = (val) => {
  teacher_ids.value = val.map((item) => {
      return item.teacher_info_id
  })
}
function handleCurrentChange(val) {
  queryParams.value.page = val
  getAssistantList()
}
function handleSizeChange(val) {
  queryParams.value.pageSize = val
  getAssistantList()
}
function viewTeacherFunc(row) { // 查看详情
  router.push({name:'teacherDetail',params:{id:row.teacher_info_id}})
}
//审核相关
const p_visible = ref(false)
const pFormRules = ref({
  desc: [{ required: true, message: '请输入说明', trigger: 'blur' }]
})
const p_type = ref(null); // 审核类型
const pForm = ref({})
const teacher_id = ref(0)
const p_title = ref('')
function processFunc(row,state) { // 审核
  p_type.value = state
  p_visible.value = true
  teacher_id.value = row.user_id
  if(state === 3) { //同意
    p_title.value = '审核同意'
  }
  else if(state === 2) { // 拒绝
    p_title.value = '审核拒绝'
  }
}
function close_pv(){
  p_visible.value = false
}
async function pOk() { // 审核提交
  const res = await api.assistantOperator({
    teacher_id:teacher_id.value,
    status:p_type.value,
    desc:pForm.value.desc
  })
  ElMessage({
    type: 'success',
    message: res.data.msg
  })
  if(res.code === 0) {
    close_pv()
  }
}
</script>
<template>
  <div>
    <!--    搜索框-->
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="queryParams">
        <el-form-item label="教师名称">
          <el-input v-model="queryParams.name" placeholder="根据教师名称进行查询" />
        </el-form-item>
        <el-form-item label="教师状态">
          <el-select v-model="queryParams.status" clearable placeholder="请选择">
            <el-option
              v-for="item in state_arr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--    表格数据-->
    <div class="gva-table-box">
      <!--      批量操作-->
      <div class="gva-btn-list">
        <el-popover v-model="deleteVisible" placement="top" width="160">
          <p>确定要删除吗？</p>
          <div style="text-align: right; margin-top: 8px;">
            <el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
            <el-button size="small" type="primary" @click="onDelete">确定</el-button>
          </div>
        </el-popover>
      </div>
      <!--      数据列表-->
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column align="center" label="ID"  prop="teacher_info_id" sortable="custom" />
        <el-table-column align="center" label="头像">
          <template #default="scope">
            <img class="avatar-box" :src="scope.row.avatar" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="姓名" prop="name" />
        <el-table-column align="center" label="手机号" min-width="150" prop="phone" />
        <el-table-column align="center" label="所属区域" min-width="150" prop="province">
          <template #default="scope">
            {{cityList[scope.row.province].name}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="申请时间" min-width="150" >
          <template #default="scope">
            {{formatDate(scope.row.CreatedAt)}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="推荐人ID" prop="invite_id" />
        <el-table-column align="center" label="授课次数" prop="publish_course" />
        <el-table-column align="center" label="测试次数" prop="publish_exam" />
        <el-table-column align="center" label="累计销售" prop="exam_sale" />
        <el-table-column align="center" label="状态" prop="exam_sale">
          <template #default="scope">
            <div>{{scope.row.status == 1?'审核中':scope.row.status == 2?'已同意':'已拒绝'}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核说明" prop="desc" />
        <el-table-column align="center" fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button
              icon="view"
              size="small"
              type="primary"
              link
              @click="viewTeacherFunc(scope.row)"
            >查看</el-button>
            <el-button v-if="scope.row.status == 1"
              icon="edit"
              size="small"
              type="primary"
              link
              @click="processFunc(scope.row,2)"
            >同意</el-button>
            <el-button v-if="scope.row.status == 1"
              icon="delete"
              size="small"
              type="danger"
              link
              @click="processFunc(scope.row,3)"
            >拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="queryParams.page"
          :page-size="queryParams.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <!--    审核窗口-->
    <el-dialog
      v-model="p_visible"
      :title="p_title"
      width="30%"
      :before-close="close_pv"
    >
      <el-form ref="apiForm" :model="pForm" :rules="pFormRules" label-width="80px">
        <el-form-item label="审核说明" prop="name">
          <el-input v-model="pForm.desc" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="p_visible = false">取消</el-button>
          <el-button type="primary" @click="pOk">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
  .avatar-box{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #dbdbdb;
  }
  .e-img{
    width: 150px;
    height: 100px;
  }
  .option-item{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .button-box {
    padding: 10px 20px;
    .el-button {
      float: right;
    }
  }
  .warning {
    color: #dc143c;
  }
</style>
