<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <a-drawer
    :visible="Seevisible"
    class="drawerStyle seestu"
    placement="right"
    width="70%"
    @after-visible-change="afterVisibleChange"
  >
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">查看</div>
        <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../assets/images/basicinfo/close.png"
          @click="closeDrawer"
        />
      </div>
      <a-spin v-if="loading" :spinning="loading"/>
      <div v-if="!loading" class="main">
        <div class="stuinfor">
          <div class="portrait">
            <img src="../../assets/images/studentimg/character.png" />
          </div>
          <div class="stumation">
            <div class="stuname">{{ userName }}</div>
            <div class="stugangw">{{ deptName }} - {{ jobName }}</div>
          </div>
          <div class="sortbox">
            <div class="sortname">进度排名</div>
            <div class="sortnub">
              <span class="nub1">{{rank.current}}</span>
              <span class="total">/{{rank.total}}</span>
            </div>
          </div>
          <a-divider
            type="vertical"
            style="
              height: 49px;
              margin-left: 34px;
              background-color: rgba(170, 166, 166, 0.3);
            "
          />
          <div class="sortbox" style="margin-left: 34px">
            <div class="sortname">完成必修</div>
            <div class="sortnub">
              <span class="nub1">{{ currentReqCnt }}</span>
              <span class="total">/{{ totalReqCnt }}</span>
            </div>
          </div>
          <!--
          <a-divider
            type="vertical"
            style="
              height: 49px;
              margin-left: 34px;
              background-color: rgba(170, 166, 166, 0.3);
            "
          />
          <div class="sortbox" style="margin-left: 34px">
            <div class="sortname">已修证书</div>
            <div class="sortnub">
              <span class="nub1">{{ certCnt }}</span>
            </div>
          </div>
       -->
        </div>
        <div class="secondrow">
          <div class="rowleft">{{ name }}</div>
       
        </div>
        <div class="mainbox">
          <a-collapse v-model:activeKey="stageListActive">
            <template #expandIcon="{ isActive }">
              <img
                style="margin-right: 20px"
                :src="
                  isActive
                    ? require('../../assets/images/studentimg/open.png')
                    : require('../../assets/images/studentimg/close.png')
                "
              />
              <div></div>
            </template>
            <a-collapse-panel
              v-for="value in stageList"
              :key="value.stageId"
              :header="value.stageName"
             
            > 
            <template #extra >
            <div @click.stop="">
              <div class="rowbox">
                <a-popover title="阶段说明">
                <template #content>
                  <p>{{value.remark}}</p>
                </template>
              <div class="shuom">说明</div>
              </a-popover>
              <div><img src="../../assets/images/studentimg/chak.png" /></div>
            </div>
           </div> 
            </template>
         
              <div 
                class="rowclass"
                v-for="(item, key) in value.taskProcessList"
                :key="key"
              >
            
                <div class="leftclass">
                  <div>
                    <img
                      :src="
                        item.course === '在线'
                          ? require('../../assets/images/leveladd/zai.png')
                          : item.course === '面授'
                          ? require('../../assets/images/leveladd/mian.png')
                          : item.course === '案例'
                          ? require('../../assets/images/leveladd/an.png')
                          : item.course === '作业'
                          ? require('../../assets/images/leveladd/zuo.png')
                          : item.course === '考试'
                          ? require('../../assets/images/leveladd/kao.png')
                          : item.course === '直播'
                          ? require('../../assets/images/leveladd/zhi.png')
                          : item.course === '外链'
                          ? require('../../assets/images/leveladd/wai.png')
                          : item.course === '讨论'
                          ? require('../../assets/images/leveladd/tao.png')
                          : item.course === '活动'
                          ? require('../../assets/images/leveladd/huo.png')
                          : item.course === '测评'
                          ? require('../../assets/images/leveladd/ce.png')
                          : item.course === '调研'
                          ? require('../../assets/images/leveladd/diao.png')
                          : item.course === '投票'
                          ? require('../../assets/images/leveladd/tou.png')
                          : item.course === '评估'
                          ? require('../../assets/images/leveladd/diao.png')
                          : null
                      "
                    />
                  </div>
                  <div class="text1">{{ item.course }}</div>
                  <div class="text2">{{ item.name }}</div>
                </div>
                <div class="alreadyclass">
                  <div class="alimg">
                    <img
                      :src="
                        item.complete === '已完成'
                          ? require('../../assets/images/studentimg/complete.png')
                          : require('../../assets/images/studentimg/notice.png')
                      "
                    />
                  </div>
                  <div class="altext">{{ item.complete }}</div>
                </div>
               
              </div>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </div>
      <div class="btnn">
        <button class="btn2" @click="closeDrawer">关闭</button>
      </div>
    </div>
    <pro-mess v-model:Provisible="Provisible" />
  </a-drawer>
</template>

<script>
import { reactive, toRefs } from "vue";
import ProMess from "./ProMess.vue";
import {studentProcess, studentRank} from "../../api/indexProjStu";
export default {
  name: "SeeStu",
  components: { ProMess },
  props: {
    Seevisible: {
      type: Boolean,
      default: false,
    },
    checkStuId: {
      type: Number,
      default: null,
    },
    projectId: {
      type: Number,
      default: null,
    },
  },
  setup(props, ctx) {
    const state = reactive({
      loading:false,
      userName: null, //用户名
      deptName: null, //部门
      jobName: null, //岗位
      certCnt: null, //已修证书
      name: null, //路径图名称
      totalReqCnt: null, //累计必修数
      currentReqCnt: null, //完成必修数
      Provisible: false,
      showDown: true,
      showDown1: false,
      rank:{total:1,current:1},
      stageList: [
        // {
        //   stageName: "阶段1腾飞班阶段1",
        //   stageId: 1,
        //   taskProcessList: [
        //     {
        //       course: "在线",
        //       name: "如何成为一个产品经理",
        //       complete: "已完成",
        //     },
        //     {
        //       course: "直播",
        //       name: "管理直播课",
        //       complete: "已完成",
        //     },
        //     {
        //       course: "面授",
        //       name: "管理面授课",
        //       complete: "未完成",
        //     },
        //     {
        //       course: "活动",
        //       name: "管理活动",
        //       complete: "未完成",
        //     },
        //     {
        //       course: "作业",
        //       name: "管理者作业",
        //       complete: "未完成",
        //     },
        //   ],
        // },
      ],
      stageListActive: 0,
    });
    const closeDrawer = () => {
      ctx.emit("update:Seevisible", false);
    };

    const getStuRank = () => {
      studentRank({
        projectId: props.projectId,
        studentId: props.checkStuId,
      }).then(res=>{
        state.rank = res.data.data
      })
    }

    const showProMess = () => {
      state.Provisible = true;
    };
    const afterVisibleChange = (bool) => {
      console.log("state", bool);
      if (bool == true) {
        check();
        getStuRank()
      }
    };
    const changeDown = () => {
      state.showDown = !state.showDown;
    };
    const changeDown1 = () => {
      state.showDown1 = !state.showDown1;
    };
    const taskProcessList = (tableData) => {
      let data = tableData;
      let array = [];
      data.map((value) => {
        let obj = {
          course:
            value.type == 1
              ? "在线"
              : value.type == 2
              ? "面授"
              : value.type == 3
              ? "案例"
              : value.type == 4
              ? "作业"
              : value.type == 5
              ? "考试"
              : value.type == 6
              ? "直播"
              : value.type == 7
              ? "外链"
              : value.type == 8
              ? "讨论"
              : value.type == 9
              ? "活动"
              : value.type == 10
              ? "测评"
              : value.type == 11
              ? "评估"
              : value.type == 12
              ? "投票"
              : "-",
          name: value.name,
          complete:
            value.status == -1
              ? "未开始"
              : value.status == 1
              ? "已完成"
              : value.status == 0
              ? "未完成"
              : "-",
          flag: value.flag == 0 ? "选修" : "必修",
          currentRatio: value.currentRatio,
          routerTaskId: value.routerTaskId,
        };
        array.push(obj);
      });
      return array;
    };
    const setStageList = (tableData) => {
      let data = tableData;
      let array = [];
      //无阶段任务
      if(data?.length ==1 && data[0].stageId ==0){
        data.map((value) => {
        let obj = {
          stageName:"无阶段任务",
          stageId:0,
          remark:value.remark,
          taskProcessList: taskProcessList(value.taskProcessList),
        };
        array.push(obj);
      });
      }else{ //有阶段
        data.map((value) => {
        let obj = {
          stageName: value.stageName,
          stageId: value.stageId,
          remark:value.remark,
          taskProcessList: taskProcessList(value.taskProcessList),
        };
        if(value.stageId >0){
          array.push(obj);
        }
       
      });
      }
     
      state.stageList = array;
    };
    const check = () => {
      state.loading = true
      let obj = {
        projectId: props.projectId,
        studentId: props.checkStuId,
      };
      studentProcess(obj).then((res) => {
        state.loading = false
        console.log("查看了学员", res.data.data);
        let result = res.data.data;
        state.userName = result.userInfoBo.userName;
        state.deptName = result.userInfoBo.deptName;
        state.jobName = result.userInfoBo.jobName;
        state.certCnt = result.certCnt == null ? 0 : result.certCnt;
        state.name = result.name;
        state.currentReqCnt = result.currentReqCnt;
        state.totalReqCnt = result.totalReqCnt;
        if (result.stageProcessList.length > 0) {
          setStageList(result.stageProcessList);
        }
      });
    };

    return {
      ...toRefs(state),
      afterVisibleChange,
      closeDrawer,
      showProMess,
      changeDown,
      changeDown1,
      check,
      setStageList,
      taskProcessList,
      // change,
    };
  },
};
</script>

<style lang="scss">
.seestu {
  .ant-drawer-content-wrapper {
    // max-width: 1000px;
    .ant-drawer-header {
      display: none !important;
    }
    .ant-drawer-body {
      padding: 0;
    }
  }
  .drawerMain {
    min-width: 600px;
    margin: 0px 32px 0px 32px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    .header {
      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;
      }
    }
    .main {
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding-bottom: 80px;
      .stuinfor {
        display: flex;
        align-items: center;
        height: 133px;
        margin-top: 20px;
        margin-right: 37px;
        background-image: url("../../assets/images/studentimg/bgimg.png");
        background-repeat: no-repeat;
        background-position: right;
        .stumation {
          margin-left: 24px;
          .stuname {
            color: #333333;
            font-size: 18px;
          }
          .stugangw {
            color: #999999;
            font-size: 16px;
            margin-top: 7px;
          }
        }
        .sortbox {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 114px;
          .sortname {
            color: #666660;
            font-size: 14px;
          }
          .sortnub {
            display: flex;
            justify-content: center;
            margin-top: 7px;
            .nub1 {
              color: #0060ff;
              font-size: 22px;
            }
            .total {
              color: #999999;
              font-size: 22px;
            }
          }
        }
      }
      .secondrow {
        margin-top: 32px;
        display: flex;
        .rowleft {
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
        }
        
      }
      .mainbox {
        // height: 463px;
        margin-right: 37px;
        margin-top: 32px;
        //border: 1px solid rgba(221, 238, 255, 1);
        //border-radius: 6px;
        .rowbox {
          width: 64px;
          height: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 24px;
          border: 1px solid rgba(64, 158, 255, 1);
          background: rgba(64, 158, 255, 0.1);
          margin-right: 480px;
          cursor: pointer;
          .shuom {
            color: rgba(64, 158, 255, 1);
            font-size: 14px;
            line-height: 20px;
            margin-right: 5px;
          }
        }
        .ant-collapse {
          background-color: #ffffff;
          border: 0;
        }
        .ant-collapse-content > .ant-collapse-content-box {
          padding: 0;
          border: 0;
        }
        .ant-collapse > .ant-collapse-item {
          border: 1px solid rgba(221, 238, 255, 1);
          border-radius: 6px;
          margin-bottom: 15px;
          border-bottom: 0px;
        }
        .ant-collapse-content {
          border-top: 0;
        }
        .ant-collapse-header {
          display: flex;
          align-items: center;
          height: 56px;
          background-color: rgba(240, 246, 252, 1);
          font-size: 16px;
          color: rgba(51, 51, 51, 1);
          font-weight: 500;
        }
        .rowclass {
          height: 81px;
          border-bottom: 1px solid rgba(221, 238, 255, 1);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .leftclass {
            display: flex;
            margin-left: 25px;
            align-items: center;
            .text1 {
              color: #000000;
              font-size: 14px;
              font-weight: 500;
              margin-left: 25px;
            }
            .text2 {
              color: rgba(51, 51, 51, 0.8);
              font-size: 14px;
              margin-left: 65px;
            }
          }
          .alreadyclass {
            display: flex;
            margin-right: 57px;
            .alimg {
              height: 16px;
              width: 16px;
            }
            .altext {
              color: rgba(56, 125, 247, 1);
              font-size: 14px;
              margin-left: 16px;
            }
          }
        }
      }
    }
    .btnn {
      height: 72px;
      width: 100%;
      position: absolute;
      bottom: 0;
      background-color: #fff;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
      .btn2 {
        cursor: pointer;
        width: 100px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 0;
        margin-left: 15px;
        color: #fff;
      }
    }
  }
}
</style>
