
<template>
  <a-drawer :visible="visible" class="largeDrawerInside" placement="right" :closable="false" :maskClosable="false"
  width="80%" :title="false">
    <!-- 外部讲师查看详情 -->
    <div class="LookExternalLecturer">
     <div class="header" style="margin-top: -24px;">
        <div class="headerTitle">查看讲师</div>
        <!-- <router-link :to="{ path: '/lecturerList', query: { activeKey: '2', } }"> -->
          <img
            @click="handleBack"
            style="width: 29px; height: 29px; cursor: pointer"
            src="../../assets/images/basicinfo/close.png"
          />
        <!-- </router-link> -->
      </div>
    <!-- <a-divider style="height: 1px; background-color: #b7b8b7 ;margin: 0;" /> -->
    <a-layout-content>
        <!-- 讲师信息 -->
        <div style="width: 100%;margin-top: 10px;">
        <span class="line" style="margin-left:12px;"></span>
        <a-descriptions title="基本信息" style="padding:0 20px;" bordered :column="3" :contentStyle="rowCenters" :labelStyle="rowCenter">
            <!-- 一层 -->
    <a-descriptions-item label="讲师头像">  <a-image
    :width="55" style="border-radius: 50%;width:55px;height:55px;"
    :src=formParam.photo
  /></a-descriptions-item>
    <a-descriptions-item label="讲师姓名">{{formParam.name||'-'}}</a-descriptions-item>
    <a-descriptions-item label="手机号码">{{formParam.mobile||'-'}}</a-descriptions-item>
    <a-descriptions-item label="供应商">{{formParam.supplier||'-'}}</a-descriptions-item>
    <a-descriptions-item label="讲师邮箱">{{formParam.email||'-'}}</a-descriptions-item>
  <a-descriptions-item label="授课时长" :span="2">{{formParam.teaching||'-'}} 
    <span style="margin-left: 5px;" v-if="formParam.teaching != null">分钟</span>
    <span style="margin-left: 10px ; padding: 2px;" v-if="formParam.teaching != null">({{
                (formParam.teaching / 60).toFixed(2) }}小时)</span>
  </a-descriptions-item>
  </a-descriptions>
  <div style="margin-top: 18px;"></div>
  <span class="line" style="margin-left:12px;"></span>
  <!-- 记录 -->
  <a-descriptions title="其他信息" bordered :column="4" style="padding:0 20px;" :contentStyle="rowCenters" :labelStyle="rowCenter"  >
            <!-- 一层 -->
    <a-descriptions-item label="讲师介绍" :span="4" >
      <div v-if="formParam.description !=null&&resp(formParam.description)"  style="min-width: 500px;" v-html="formParam.description" ></div>
      <div v-else>-</div>
     </a-descriptions-item>
    <a-descriptions-item label="备注" :span="4">
      <div v-if="formParam.remark ==null || formParam.remark =='<p><br></p>'"  style="min-width: 500px;">-  </div>
      <div style="min-width: 500px;">{{formParam.remark  ===null?'':formParam.remark}}</div>
      <!-- </a-tag>
      </div> -->
    </a-descriptions-item>
  </a-descriptions>
  <!--  -->
  <div style="margin-top: 9px;"></div>
  <a-tabs v-model:activeKey="activeKey" style="padding:0 20px;">
    <a-tab-pane key="1" tab="授课记录">
      <a-table :header-cell-style="{ 'text-align': 'center' }" :columns="teacherrecordsColumns"
        :sroll="{ x: '1000' }"
        :data-source="teacherrecordstableData" :loading="teacherrecordsLoading" @expand="expandTable" :pagination="pagination">
        
      </a-table>
       </a-tab-pane>
   
  </a-tabs>
</div>
    </a-layout-content>
    </div>
  </a-drawer>
</template>
<script lang ="jsx">
import { useRouter,useRoute } from "vue-router";
import { reactive, toRefs, ref,computed,watch } from "vue"
import {getTeacherById} from "../../api/Lecturer"; 
import { getNewInTeacherCourseList  } from "../../api/Teaching";
// import boe from '@/assets/boe.jpg'
import avatar from '@/assets/Avatarman.png'
import dayjs from "dayjs";
export default{
    name :"LookExternalLecturer",
    components:{

    },
    props:{
      visible:{
        type: Boolean,
        default: false,
      },
      id:{
        type: String,
        default: ""
      }
    },
    setup(props,emits){
        const router=useRouter();
        const state = reactive({
            activeKey:'1',
            formParam: {
      },
      promotionrecordsLoading: false,  //晋级记录遮罩层
      teacherrecordsLoading: false,// 授课记录遮罩层
      teacherrecordstableDataTotal: 0,//授课记录列表总条数
      teacherrepromotableDataTotal: -1,//晋级记录总条数
      teacherrecords: {
        recordType:2,
        pageNo: "1",
        pageSize: "10",
        id: null
      },
      teacherrepromo:{
        id:null,
        pageNo: "1",
        pageSize: "10",
      }
        });
    watch(()=>props.visible,(val)=>{
      if(val){
        TeacherSystem(props.id)
      }else{
        state.formParam = {}
        teacherrecordstableData.value = []
      }
    })
          //外部讲师详情
    const TeacherSystem = (id) => {
      getTeacherById({id,}).then((res) => {
        console.log("内部讲师详情", res.data);
        state.formParam = res.data.data
        state.formParam.photo = state.formParam.photo ===null ?avatar : state.formParam.photo
        state.formParam.teachingDate = res.data.data.teachingDate ? dayjs(res.data.data.teachingDate, 'YYYY-MM-DD HH:mm'):'',
        getteacherrecordstableData()
      })
        .catch((err) => {
          console.log("内部讲师详情", err);
        });
    }
           //返回上一层
    const handleBack=()=>{
      emits.emit('update:visible',false)
    };
        //授课记录列表
        const teacherrecordsColumns = ref([
      // {
      //   title: '课程编号',
      //   dataIndex: 'offcourseId',
      //   key: 'offcourseId',
      //   ellipsis: true, align: "center",
      //   width: 120,
      // },
      {
        title: '课程编号',
        dataIndex: 'courseId',
        key: 'courseId',
         align: "center",
         customRender: ({text, index})=>{
                return index+1;
            },    
        width: 120,
      },
      {
        title: '课程名称',
        dataIndex: 'courseName',
        key: 'courseName',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '课程日期',
        dataIndex: 'teachingDate',
        key: 'teachingDate',
        ellipsis: true, align: "center",
        width: 200,
        customRender: (value) => {
          return (
            <div>
              {value.record?.teachingDate?dayjs(value.record?.teachingDate).format("YYYY-MM-DD HH:mm"):'-'}
            </div>
          );
        },
      },
      {
        title: '内容分类',
        dataIndex: 'courseTypeName',
        key: 'courseTypeName',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '课程类型',
        dataIndex: 'type',
        key: 'type',
        ellipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
              <div>
                {String(value.record.type)
                  ? {
                    "0": "在线课",
                    "1": "面授课",
                    "2": "课程开发",
                    "3": "作业员入模培训",
                    "4": "其他",
                  }[value.record.type + ""]
                  : "-"}
              </div>
            )
        }
      },
      {
        title: '学习总人数',
        dataIndex: 'studys',
        key: 'studys',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '授课时长(分钟)',
        dataIndex: 'teaching',
        key: 'teaching',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '评分',
        dataIndex: 'score',
        key: 'score',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '开课状态',
        dataIndex: 'courseStatus',
        key: 'courseStatus',
        ellipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>
              {value.record.courseStatus == 0 || value.record.courseStatus == 1
                ? {
                  "0": "未开课",
                  "1": "开课",
                }[value.record.courseStatus + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        ellipsis: true, align: "center",
        width: 120,
        customRender: (text)=>{
          return (
            <div>
              {text.record.remark || "-"}
            </div>
          )
        }, 
      },
    ])
    //授课记录列表数据
    const teacherrecordstableData = ref([
    ])
    const getteacherrecordstableData = () => {
      state.teacherrecordsLoading = true
      state.teacherrecords.name  = state.formParam.name
      let obj = { ...state.teacherrecords }
      // api接口
      getNewInTeacherCourseList(obj).then((res) => {
        teacherrecordstableData.value = res.data.data.records
        state.teacherrecordstableDataTotal = Number(res.data.data.total);
        state.teacherrecordsLoading = false
      })
    };
    const pagination = computed(() => ({
      total: state.teacherrecordstableDataTotal,
      showSizeChanger: true,
      showQuickJumper:true,
      current: state.teacherrecords.pageNo,
      pageSize: state.teacherrecords.pageSize,
      onChange: paginationChange,
    }));
    const paginationChange = (e,pageSize) => {
      state.teacherrecords.pageNo = e;
      state.teacherrecords.pageSize = pageSize
      getteacherrecordstableData();
    };
    //授课翻页
    const teacherchangePagination = (page) => {
       state.searchParam.pageNo = page;
      // state.pageNo = page;
      state.searchParam.pageSize = pageSize;
      getTableDate();
      state.teacherrecords.pageNo = page;
      getteacherrecordstableData();
    };
    const resp = (val) => {
      if(val){
        const reg = /<[^<>]+>/g;
        const value = val.replace(reg, "");
        return value
      }


    }
        return{
            ...toRefs(state),
            router,
            resp,
            TeacherSystem,
            handleBack,
            rowCenter:{"text-align":"center",'width':'120px'},
            rowCenters:{'min-width':'176px'},
            teacherrecordstableData,
      teacherrecordsColumns,
      getteacherrecordstableData,
      teacherchangePagination,
      pagination,
      paginationChange,
        }
    }
}
</script>
<style lang="scss" scoped>

.LookExternalLecturer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding:24px;
  .header {
    padding: 0px 32px;
    height: 73px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // background-color: red;
    // margin-bottom: 20px;
    flex-shrink: 0;

    .headerTitle {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
      line-height: 25px;
      // margin-left: 24px;
    }
  }
  .filter {
    margin-left: 38px;
    margin-right: 38px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
      .select {
        margin-right: 20px;
        margin-bottom: 20px;
      }
    }
}
.backbtn{
    float: right;
    margin-right: 20px;
  border: none;
  color: #4ea6ff;
  width: 80px;
  height:64px 
}
//小竖线
.line{
  float:left; width: 3px; height: 25px; background: #4ea6ff;border-radius: 30%; margin-right: 5px;
}
::v-deep .ant-descriptions-header{
    margin-bottom: 18px ;
    margin-top: 18px;
}
.goback {
        float: right;
        padding-right: 70px;
        //padding-top: 37px;
        position: relative;

        .return {
          display: inline-block;
          width: 42px;
          height: 42px;
          margin-top: 12px;
          margin-right: 10px;
          background-image: url("../../assets/images/projectadd/return.png");
        }

        .returntext {
          display: inline-block;
          position: absolute;
          top: 12px;
          color: #4ea6ff;
          font-size: 14px;
        }
      }
      
::v-deep .ant-select-selection-overflow-item {
  margin-top: -2px;
}

::v-deep .ant-select-multiple .ant-select-selection-item {
  height: 34px
}
.tableBox {
padding-bottom: 20px;
margin: 20px 38px 30px;
::v-deep .ant-select-dropdown{
 display: inline-block;
}
::v-deep .ant-select-selection-item{
margin-left: 3px;
}
::v-deep .ant-pagination-options-size-changer.ant-select{
width: 84px;
}
.pa {
width: 100%;
display: flex;
justify-content: right;
}
}
</style>