<template>
  <a-drawer
    :visible="CheckStuvisible"
    class="drawerStyle CheckStu"
    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">{{pro.userInfoBo.userName}}</div>
            <div class="stugangw">{{pro.userInfoBo.deptName?pro.userInfoBo.deptName:"" + '-' + pro.userInfoBo.jobName?pro.userInfoBo.jobName:""}}</div>
          </div>
          <div class="sortbox">
            <div class="sortname">进度排名</div>
            <div class="sortnub">
              <span class="nub1">{{pro.currentChapterCnt}}</span>
              <span class="total">/{{pro.totalChapterCnt}}</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">{{pro.currentReqCnt}}</span>
              <span class="total">/{{pro.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">{{pro.certCnt}}</span>
            </div>
          </div> -->
        </div>
        <div class="secondrow">
          <div class="rowleft">{{ pro.name }}</div>
          <!-- <div class="rowbox" @click="showProMess">
            <div class="shuom">说明</div>
            <div><img src="../../assets/images/studentimg/chak.png" /></div>
          </div> -->
        </div>
        <!-- <div v-for="(item) in pro.chapterProcessList" class="mainbox"
        style="margin-top: 15px; height: 56px"
        :key="item.chapterId">
        <div class="rowtitle" @click="changeDown">
            <div class="titleimg">
              <img
                :src="
                  showDown
                    ? require('../../assets/images/studentimg/open.png')
                    : require('../../assets/images/studentimg/close.png')
                "
              />
            </div>
            <div class="titletext">{{item.chapterName}}</div>
          </div>

          <div :style="{ display: showDown ? 'block' : 'none' }">
            <div  v-for="_item in item.taskProcessList" :key="_item.routerTaskId" class="rowclass">
              <div class="leftclass">
                <div><img src="../../assets/images/leveladd/zai.png" /></div>
                <div class="text1">{{checkType(_item.type)}}</div>
                <div class="text2">{{_item.name}}</div>
              </div>
              <div class="alreadyclass">
                <div class="alimg">
                  <img src="../../assets/images/studentimg/complete.png" />
                </div>
                <div class="altext">{{checkStatus(_item.status)}}</div>
              </div>
            </div>
          </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 pro.chapterProcessList"
              :key="value.chapterId"
              :header="value.chapterName"
             
            > 
            <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.type === 1
                          ? require('../../assets/images/leveladd/zai.png')
                          : item.type === 2
                          ? require('../../assets/images/leveladd/mian.png')
                          : item.type === 3
                          ? require('../../assets/images/leveladd/an.png')
                          : item.type === 4
                          ? require('../../assets/images/leveladd/zuo.png')
                          : item.type === 5
                          ? require('../../assets/images/leveladd/kao.png')
                          : item.type === 6
                          ? require('../../assets/images/leveladd/zhi.png')
                          : item.type === 7
                          ? require('../../assets/images/leveladd/wai.png')
                          : item.type === 8
                          ? require('../../assets/images/leveladd/tao.png')
                          : item.type === 9
                          ? require('../../assets/images/leveladd/huo.png')
                          : item.type === 10
                          ? require('../../assets/images/leveladd/ce.png')
                          : item.type === 11
                          ? require('../../assets/images/leveladd/diao.png')
                          : item.type === 12
                          ? require('../../assets/images/leveladd/tou.png')
                          : item.type === 13
                          ? require('../../assets/images/leveladd/diao.png')
                          : null
                      "
                    />
                  </div>
                  <div class="text1">{{ checkType(item.type) }}</div>
                  <div class="text2">{{ item.name }}</div>
                </div>
                <div class="alreadyclass">
                  <div class="alimg">
                    <img
                      :src="
                        item.status === 1
                          ? require('../../assets/images/studentimg/complete.png')
                          : require('../../assets/images/studentimg/notice.png')
                      "
                    />
                  </div>
                  <div class="altext">{{ item.status ==0?"进行中":item.status ==1?"已完成":"未开始" }}</div>
                </div>
               
              </div>
            </a-collapse-panel>
          </a-collapse>
        </div>

      </div>
      <div class="btnn">
        <button class="btn2" @click="closeDrawer">关闭</button>
      </div>
    </div>
  </a-drawer>
  <check-stu-mess v-model:StuMessvisible="StuMessvisible" />
</template>

<script>
import { reactive, toRefs } from "vue";
import CheckStuMess from "./CheckStuMess.vue";
import {stuProgress} from "@/api/index1";
// import {message} from "ant-design-vue";
export default {
  name: "CheckStu",
  components: { CheckStuMess },
  props: {
    CheckStuvisible: {
      type: Boolean,
      default: false,
    },
    studentId: {
      type: Number,
      default: null,
    },
    routerId: {
      type: Number,
      default: null,
    },
  },
  setup(props, ctx) {
    const state = reactive({
      StuMessvisible: false,
      showDown: false,
      pro:null,
      loading:true,
      stageListActive: 0,
    });
    const closeDrawer = () => {
      ctx.emit("update:CheckStuvisible", false);
    };

    const showProMess = () => {
      state.StuMessvisible = true;
    };
    const afterVisibleChange = (bool) => {
      if(props.CheckStuvisible) {
        getStuProgress()
      }
      console.log("state", bool);
    };
    const changeDown = () => {
      state.showDown = !state.showDown;
    };
    const getStuProgress = () => {
      state.loading = true
      let obj = {
        routerId:props.routerId,
        studentId:props.studentId
      }
      stuProgress(obj).then(res => {
        console.log("查询当前学员进度信息success",res)
        state.pro = res.data.data
        state.loading = false
        console.log(res)
      }).catch(err => {
        console.log("查询当前学员进度信息err",err)
        state.loading = false
        console.log(err)
      })
    }

  const checkType = (type) => {
    let typeRules = [
        "",
        "在线",
        "面授",
        "案例",
        "作业",
        "考试",
        "直播",
        "外链",
        "讨论",
        "活动",
        "测评",
        "评估",
        "投票",
      ];
      return typeRules[type];
  }

  const checkStatus = (status) => {
    if(status < 0) return "未开始"
    let statusRules = [
      "进行中","已完成"
    ]
    return statusRules[status]
  }


    return {
      ...toRefs(state),
      afterVisibleChange,
      closeDrawer,
      showProMess,
      changeDown,
      checkType,
      checkStatus,
      // change,

    };
  },
};
</script>

<style lang="scss" >
.CheckStu {
  .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;
        }
        .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);
          cursor: pointer;
          .shuom {
            color: rgba(64, 158, 255, 1);
            font-size: 14px;
            line-height: 20px;
            margin-right: 5px;
          }
        }
      }
      // .mainbox {
      //   // height: 463px;
      //   margin-right: 37px;
      //   margin-top: 32px;
      //   border: 1px solid rgba(221, 238, 255, 1);
      //   border-radius: 6px;
      //   .rowtitle {
      //     height: 56px;
      //     background: rgba(240, 246, 252, 1);
      //     display: flex;
      //     align-items: center;
      //     .titleimg {
      //       width: 20px;
      //       height: 20px;
      //       margin-left: 23px;
      //     }
      //     .titletext {
      //       color: rgba(51, 51, 51, 1);
      //       font-size: 16px;
      //       font-weight: 500;
      //       margin-left: 16px;
      //     }
      //   }
      //   .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;
      //       }
      //     }
      //   }
      // }
      .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>