<template>
    <!-- 内部讲师查看详情 -->
    <div class="LookInsideLecturer">
    <a-layout-header style="background: white;color: black; font-size: 20px ;">
     <span>查看讲师</span>
     <router-link to="/lecturerList" class="goback">
            <span class="return"></span>
            <!-- <router-link class="returntext" to="/lecturerList" style="line-height:47px ">
              返回
            </router-link> -->
            <div class="returntext" to="/goback" style="line-height:47px " @click="goback">
              返回
              </div>
          </router-link>
     </a-layout-header>
    <a-divider style="height: 1px; background-color: #b7b8b7 ;margin: 0;" />
    <a-layout-content>
        <!-- 讲师信息 -->
        <div style="width: 100%;margin-top: 10px;">
        <span class="line"></span>
        <a-descriptions title="讲师信息" bordered :column="4" :contentStyle="rowCenter" :labelStyle="rowCenter">
            <!-- 一层 -->
    <a-descriptions-item label="讲师头像">
      <!-- <a-avatar :src="formParam.photo" /> -->
      <a-image
    :width="55" style="border-radius: 50%;"
    :src=formParam.photo
  /></a-descriptions-item>
    <a-descriptions-item label="讲师工号">{{formParam.userNo}}</a-descriptions-item>
    <a-descriptions-item label="讲师姓名">{{formParam.name}}</a-descriptions-item>
    <a-descriptions-item label="讲师体系">{{formParam.tsystemName}}</a-descriptions-item>
    <!-- 二层 -->
    <a-descriptions-item label="讲师级别">{{formParam.tlevelName
 }}</a-descriptions-item>
    <a-descriptions-item label="认证状态">{{ formParam.certStatus==0?'未认证' :formParam.certStatus==1 ?'已认证':''}} 
      <span>
                  <a-button type="text" class="moreidbtn" v-if="formParam.certStatus == 1"
                    @click="handleup">查看认证资料</a-button>
                </span>
    </a-descriptions-item>
    <a-descriptions-item label="授课时长"> <span v-if="formParam.defaultTeachingTime!= null" >{{ (formParam.defaultTeachingTime /60 ).toFixed(2)}}小时</span>
           </a-descriptions-item>
    <a-descriptions-item label="发薪地  ">{{formParam.payrollPlaceName}}</a-descriptions-item>
    <!-- 三层 -->
    <a-descriptions-item label="在职">{{formParam.waitStatus==0?'在职' :formParam.waitStatus==1 ?'离职':''}}</a-descriptions-item>
    <a-descriptions-item label="账号状态">{{formParam.status==0?'临时' :formParam.status==1 ?'启用':formParam.status==1 ?'停用':''}}</a-descriptions-item>
    <a-descriptions-item label="所属组织" :span="2">   <a-popover title="所属组织">
                <template #content>
                  {{ formParam.orgName }}
                </template>
                {{ formParam.neworgName  }}
              </a-popover>
    </a-descriptions-item>
  </a-descriptions>
  <div style="margin-top: 10px;"></div>
  <span class="line" ></span>
  <a-descriptions title="其他信息" bordered :column="4" :contentStyle="rowCenter" :labelStyle="rowCenter"  >
            <!-- 一层 -->
    <a-descriptions-item label="讲师介绍" :span="4"><div style="min-width: 500px;"> 
      {{formParam.description ===null ? ' --' :formParam.description}} </div> </a-descriptions-item>
    <a-descriptions-item label="工作职责" :span="4">{{formParam.workExperience ===null?'--':formParam.workExperience}}</a-descriptions-item>
    <a-descriptions-item label="擅长课程" :span="4">{{formParam.courses===null?'--':formParam.courses}}</a-descriptions-item>
    <a-descriptions-item label="教师专长" :span="4">{{formParam.expertise===null?'--':formParam.expertise}}</a-descriptions-item>
  </a-descriptions>
  <!-- 记录 -->
  <div style="margin-top: 1px;"></div>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="授课记录">
      <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="teacherrecordsColumns"
        
        :data-source="teacherrecordstableData" :loading="teacherrecordsLoading" @expand="expandTable" :pagination="false">
        <template #bodyCell="{  record,  column }" >
            <!-- 鼠标悬停提示 -->
            <template v-if="column.key === 'remark'">
              <a-space style="display:flex ;justify-content: space-around;  ">
                <a-popover>
    <template #content>
      <p>{{ record.remark }}</p>
    </template>
    <span>{{ record.remark }}</span>
  </a-popover>
              </a-space>
            </template>
        </template>
      </a-table>
      <div style="float: right;">
        <a-pagination
          v-if="tableDataTotal > 10"
        :showSizeChanger="false"
        :showQuickJumper="true"
        :hideOnSinglePage="true"
        :pageSize="searchParam.pageSize"
        :current="searchParam.pageNo"
        :total="tableDataTotal"
        class="pagination"
        @change="changePagination"
      />
          </div>
       </a-tab-pane>
    <a-tab-pane key="2" tab="晋级记录">
      <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="promotionrecordsColumns"
        
          :data-source="promotionrecordstableData" :loading="promotionrecordsLoading" @expand="expandTable" :pagination="false">
          <template #bodyCell="{ record, column,index }" >
          </template>
        </a-table>
        <div style="float: right;">
          <a-pagination
          v-if="teacherrepromotableDataTotal > 10"
        :showSizeChanger="false"
        :showQuickJumper="true"
        :hideOnSinglePage="true"
        :pageSize="teacherrepromo.pageSize"
        :current="teacherrepromo.pageNo"
        :total="teacherrepromotableDataTotal"
        class="pagination"
        @change="teacherrepromoPagination"
      />
          </div>
       </a-tab-pane>
  </a-tabs>
</div>
    </a-layout-content>
    </div>
</template>
<script lang ="jsx">
import { useRouter,useRoute } from "vue-router";
import { reactive, toRefs, ref,  computed } from "vue"
import { useStore } from "vuex";
import {getTeacherById,getTeacherCourseList ,getTeacherLogList} from "../../api/Lecturer"; 
export default{
    name :"LookInsideLecturer",
    components:{

    },
    setup(){
        const router=useRouter();
        const { query: { id }} = useRoute();
        const state = reactive({
            activeKey:'1',
            id,
            formParam: {
      },
      promotionrecordsLoading: false,  //晋级记录遮罩层
      teacherrecordsLoading: false,// 授课记录遮罩层
      teacherrecordstableDataTotal: -1,//授课记录列表总条数
      teacherrepromotableDataTotal: -1,//晋级记录总条数
      teacherrecords: {
        teacherType:'0',
        pageNo: "1",
        pageSize: "10",
        id: null
      },
      teacherrepromo:{
        userId:null,
        pageNo: "1",
        pageSize: "10",
      }
        });
        
          //内部讲师详情
    const TeacherSystem = () => {
      getTeacherById(state.id).then((res) => {
        let objA= res.data.data[0]
            if( objA.orgName !==null ){
              objA.neworgName=objA.orgName.split('/')
              
              objA.neworgName= objA.neworgName[objA.neworgName.length-1]
          }
          // console.log(objA ,'11111111111')
          state.formParam = objA
        state.formParam.photo = state.formParam.photo ===null ? 'https://p0.itc.cn/q_70/images01/20211013/f45d91616a364d6ea9c42a8db69734aa.png' : state.formParam.photo
        state.teacherrepromo.userId=res.data.data[0].kid
        console.log(state.teacherrepromo.kid);
        getpromotionrecordstableData()
      })
        .catch((err) => {
          console.log("内部讲师详情", err);
        });
    }
    TeacherSystem()
        //授课记录列表
        const teacherrecordsColumns = ref([
      {
        title: '课程编号',
        dataIndex: 'index',
        key: 'index',
         align: "center",
        customRender: (text,record,index) => `${index+1}`,
        width: 120,
      },
      {
        title: '课程名称',
        dataIndex: 'name',
        key: 'name',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '课程日期',
        dataIndex: 'beginTime',
        key: 'beginTime',
        elipsis: true, align: "center",
        width: 120,
      },
      {
          title: "内容分类",
          width: 100,
          dataIndex: "sysType1",
          ellipsis: true,
          key: "keywords",
          align: "center",
          // customRender: ({ record,text }) =>
          // `${getSysTypeMap(record.sysType1, record.sysTypeId)?getSysTypeMap(record.sysType1) : ""}
          // ${getSysTypeMap(record.sysType2, record.sysTypeId)?'-'+getSysTypeMap(record.sysType2) : ""}
          // ${getSysTypeMap(record.sysType3, record.sysTypeId)?'-'+getSysTypeMap(record.sysType3) : ""}
          // `
        },
      {
        title: '课程类型',
        dataIndex: 'type',
        key: 'type',
        elipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>
              {value.record.type == 1 || value.record.type == 2 || value.record.type == 3
                ? {
                  "1": "项目开课",
                  "2": "路径开课",
                  "3": "面授开课",
                }[value.record.type + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '学习总人数',
        dataIndex: 'projectMember',
        key: 'projectMember',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '授课时长',
        dataIndex: 'duration',
        key: 'duration',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '评分',
        dataIndex: 'score',
        key: 'score',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '开课状态',
        dataIndex: 'status ',
        key: 'status ',
        elipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>
              {value.record.status == 0 || value.record.status == 1
                ? {
                  "0": "未开课",
                  "1": "已开课",
                }[value.record.status + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '备注',
        dataIndex: 'remark ',
        key: 'remark ',
        elipsis: true, align: "center",
        width: 120,
        scopedSlots: { customRender: "remark" },
      },
    ])
    //授课记录列表数据
    const teacherrecordstableData = ref([
    ])
    const getteacherrecordstableData = () => {
      state.teacherrecordsLoading = true
      state.teacherrecords.id = state.id
      let obj = { ...state.teacherrecords }

      // api接口
      getTeacherCourseList(obj).then((res) => {
        console.log(res);
        teacherrecordstableData.value = res.data.data.records
        state.teacherrecordstableDataTotal = Number(res.data.data.total);
        state.teacherrecordsLoading = false
      })
    };
    getteacherrecordstableData()
    //授课翻页
    const teacherchangePagination = (page) => {
      state.teacherrecords.pageNo = page;
      getteacherrecordstableData();
    };
    //晋级记录翻页
    const teacherrepromoPagination = (page) => {
      state.teacherrepromo.pageNo = page;
      getpromotionrecordstableData();
    };
        //晋级记录列表
        const promotionrecordsColumns = ref([
      {
        title: '变更时间',
        dataIndex: 'operatorTime',
        key: 'operatorTime',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '变更方式',
        dataIndex: 'operatorType',
        key: 'operatorType',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '变更结果',
        dataIndex: 'levelName',
        key: 'levelName',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '操作人',
        dataIndex: 'operatorId',
        key: 'operatorId',
        elipsis: true, align: "center",
        width: 120,
      },
    ])
    //晋级记录列表数据
    const promotionrecordstableData = ref([
    ])
    const getpromotionrecordstableData = () => {
      state.promotionrecordsLoading = true
      // state.teacherrepromo.kid = state.kid
      getTeacherLogList(state.teacherrepromo).then((res) => {
        promotionrecordstableData.value = res.data.data.records
        state.teacherrepromotableDataTotal = Number(res.data.data.total);
      })
      state.promotionrecordsLoading = false
    };
    const goback = ()=>{
      router.back()
    }
    const store = useStore();
    //  // 内容分类
    //  const sysTypeOptions = computed(() => {return store.state.content_type;});
    //     //内容分类
    //     const getSysTypeMap = (code) => {
    //   if(code=="")return
    //   // console.log(store.state.sysTypeMap,'map集合');
    //   return store.state.sysTypeMap.get(code)
    // }
    // getSysTypeMap()

const handleup = ()=>{
  window.open (
        `${process.env.VUE_APP_BASE_API}/teacherUpload/teacherDownload?teacherId= ${state.id}`
      );
}
        return{
            ...toRefs(state),
            router,
            goback,
            handleup,
            // getSysTypeMap,
            // sysTypeOptions,
            TeacherSystem,
            rowCenter:{"text-align":"center"},
            teacherrecordstableData,
      teacherrecordsColumns,
      getteacherrecordstableData,
      teacherchangePagination,
      teacherrepromoPagination,
      promotionrecordsColumns,
      promotionrecordstableData,
      getpromotionrecordstableData,
        }
    }
}
</script>
<style lang="scss" scoped>

.LookInsideLecturer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .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: 10px ;
}
.goback {
        float: right;
        padding-right: 70px;
        //padding-top: 37px;
        position: relative;

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

        .returntext {
          display: inline-block;
          position: absolute;
          top: 12px;
          color: #4ea6ff;
          font-size: 14px;
        }
      }
      .moreidbtn {
  border: none;
  color: #4ea6ff;
  width: 80px
}
</style>