<template>
    <!-- 内部讲师查看详情 -->
    <div class="LookInsideLecturer">
    <!-- <a-layout-header style="background: white;color: black; font-size: 20px ;">
     <span>查看讲师</span>
     <router-link :to="{ path: '/lecturerList', query: { activeKey: '1', } }" class="goback">
            <span class="return"></span>
           
            <div class="returntext" to="/goback" style="line-height:47px ">
              返回
              </div>
          </router-link>
     </a-layout-header> -->
     <div class="header">
        <div class="headerTitle">查看讲师</div>
        <router-link :to="{ path: '/lecturerList', query: { activeKey: '1', } }">
          <img
            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;padding: 20px;">
        <span class="line"></span>
        <a-descriptions title="讲师信息" bordered :column="4" :contentStyle="rowCenter" :labelStyle="rowCenters">
            <!-- 一层 -->
    <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}}/{{formParam.userNo}}</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.teaching!= null" >{{ (Number(formParam.teaching) /60 ).toFixed(2)}}小时</span><span v-else>-</span>
           </a-descriptions-item>
    <a-descriptions-item label="发薪地  ">{{formParam.salaryName||'-'}}</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==2 ?'停用':'-'}}</a-descriptions-item>
    <a-descriptions-item label="创建方式">{{formParam.createFrom=='0'?'自动录入' :formParam.createFrom=='1'?'手动录入':'-'}}</a-descriptions-item>
    <a-descriptions-item style="max-width: 400px;" label="所属组织" >
      <!-- <a-popover title="所属组织"> -->
                <!-- <template #content>
                  {{ formParam.orgName }}
                </template> -->
                <span :title="formParam.orgName">{{ formParam.orgNames || '-' }}</span>
              <!-- </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="rowCenters"  >
            <!-- 一层 -->
    <a-descriptions-item style="max-width: 200px;" 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.workExperience !=null&&resp(formParam.workExperience)"  style="min-width: 500px;" v-html="formParam.workExperience" ></div>
      <div v-else>-</div>
      </a-descriptions-item>
    <a-descriptions-item label="擅长课程" :span="4">
      <div v-if="formParam.courses !=null&&resp(formParam.courses)"  style="min-width: 500px;" v-html="formParam.courses" ></div>
      <div v-else>-</div>
      </a-descriptions-item>
    <a-descriptions-item label="教师专长" :span="4">
      <a-tag v-if="formParam.expertiseNames" color="blue" style="margin-right:10px" v-for="item in formParam.expertiseNames?.split(',')">{{item}}</a-tag>
      <span v-else>-</span>
    </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' }" :columns="teacherrecordsColumns"
        
        :data-source="teacherrecordstableData" :loading="teacherrecordsLoading" :scroll="{ x: '1000' }" :pagination="pagination">
        <!-- <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="true"
        :showQuickJumper="false"
        :hideOnSinglePage="false"
        :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="true"
        :showQuickJumper="false"
        :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,watch } from "vue"
import { useStore } from "vuex";
import {getTeacherById ,getTeacherLogList} from "../../api/Lecturer"; 
import { getNewInTeacherCourseList  } from "../../api/Teaching";
// import boe from '@/assets/boe.jpg'
import avatar from '@/assets/avatar.png'
import Avatarman from '@/assets/Avatarman.png'
import Avatarwoman from '@/assets/Avatarwoman.png'
import dayjs from "dayjs";
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: 0,//授课记录列表总条数
      teacherrepromotableDataTotal: -1,//晋级记录总条数
      teacherrecords: {
        recordType:1,
        pageNo: "1",
        pageSize: "10",
        id: null
      },
      teacherrepromo:{
        userId:null,
        pageNo: "1",
        pageSize: "10",
      }
        });
        watch(() => state.formParam.orgName, (val) => {
          if(val){
            const parts = val.split('/');
            const reversedParts = parts.reverse();
            state.formParam.orgNames = reversedParts.join('/'); 
          }
        })
        
          //内部讲师详情
    const TeacherSystem = () => {
      getTeacherById({id:state.id}).then((res) => {
        let objA= res.data.data
        console.log(objA ,'11111111111')
          state.formParam = objA
        state.formParam.photo = state.formParam.photo ==null ?
        state.formParam.gender == 1 ? Avatarman : 
        state.formParam.gender ==2 ? Avatarwoman : avatar : state.formParam.photo
        state.teacherrepromo.userId=res.data.data.id
        console.log(state.teacherrepromo.id);
        getteacherrecordstableData()
        promotionrecordstableData.value = res.data.data.levelLogList
        // getpromotionrecordstableData()
      })
        .catch((err) => {
          console.log("内部讲师详情", err);
        });
    }
    TeacherSystem()
    const resp = (val) => {
      if(val){
        const reg = /<[^<>]+>/g;
        const value = val.replace(reg, "");
        return value
      }
    }
        //授课记录列表
        const teacherrecordsColumns = ref([
      {
        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>
              {dayjs(value.record?.teachingDate).format("YYYY-MM-DD HH:mm")}
            </div>
          );
        },
      },
      {
          title: "内容分类",
          width: 100,
          dataIndex: "courseTypeName",
          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',
        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,
        // scopedSlots: { customRender: "remark" },
        customRender: (value) => {
          return (
            <div>{value.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) => {
        console.log(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.teacherrecords.pageNo = page;
      // state.pageNo = page;
      state.teacherrecords.pageSize = pageSize;
      getteacherrecordstableData();
    };
    //晋级记录翻页
    const teacherrepromoPagination = (page) => {
      state.teacherrepromo.pageNo = page;
      // getpromotionrecordstableData();
    };
        //晋级记录列表
        const promotionrecordsColumns = ref([
      {
        title: '变更时间',
        dataIndex: 'createTime',
        key: 'createTime',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '变更方式',
        dataIndex: 'type',
        key: 'type',
        ellipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>
              {value.record.type == 1 ? "自动" : value.record.type == 0 ? '手动':"-"}
            </div>
          )
        }
      },
      {
        title: '变更结果',
        dataIndex: 'result',
        key: 'result',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '操作人',
        dataIndex: 'updateName',
        key: 'updateName',
        ellipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>{value.record.updateName || '-'}</div>
          )
        }
      },
    ])
    //晋级记录列表数据
    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_BOE_API_URL}/upload${state.formParam.certification}`
  );
}
        return{
            ...toRefs(state),
            router,
            goback,
            handleup,
            // getSysTypeMap,
            // sysTypeOptions,
            TeacherSystem,
            rowCenter:{"text-align":"left"},
            rowCenters:{"text-align":"center",'width':'160px'},
            teacherrecordstableData,
      teacherrecordsColumns,
      resp,
      getteacherrecordstableData,
      teacherchangePagination,
      pagination,
      paginationChange,
      teacherrepromoPagination,
      promotionrecordsColumns,
      promotionrecordstableData,
      // getpromotionrecordstableData,
        }
    }
}
</script>
<style lang="scss" scoped>
.LookInsideLecturer {
  .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;
    }
  }
  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: 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;
        }
      }
      .moreidbtn {
  border: none;
  color: #4ea6ff;
  width: 80px
}

::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>