<template>
  <a-drawer
      :visible="CheckStuvisible"
      class="drawerStyle CheckStu"
      placement="right"
      width="70%"
  >
    <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.userInfo?.realName }}</div>
            <div class="stugangw">
              {{pro.routerInfo?.departName || '' }} - {{ pro.userInfo?.jobName || ''}}
            </div>
          </div>
          <div class="sortbox">
            <div class="sortname">进度排名</div>
            <div class="sortnub">
              <span class="nub1">{{ rank.current || 0 }}</span>
              <span class="total">/{{ rank.total || 0 }}</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">{{ rank.finishCompulsoryNum || 0 }}</span>
              <span class="total">/{{ rank.totalCompulsoryNum || 0 }}</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">{{ rank.certNum || 0 }}</span>
            </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.chapterList || []" :key="value.id" :header="value.name">
              <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.taskList"
                  :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/xiangmu.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, watch} from "vue";
import {stuRouterProgress} from "@/api/index1";
import {routerStudentRank} from "@/api/indexProjStu";

export default {
  name: "CheckStu",
  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: false,
      stageListActive: 0,
      rank: {total: 0, current: 0, finishCompulsoryNum: 0, totalCompulsoryNum: 0, certNum: 0},
    });

    watch([()=>props.studentId, ()=>props.routerId], () => {
      console.log(111111)
      console.log(props)
      getStuProgress()
      getStuRank()
    })

    const closeDrawer = () => {
      ctx.emit("update:CheckStuvisible", false);
    };

    const getStuRank = () => {
      routerStudentRank({routerId: props.routerId, studentId: props.studentId}).then(res => state.rank = res.data.data)
    }

    const showProMess = () => {
      state.StuMessvisible = true;
    };
    const changeDown = () => {
      state.showDown = !state.showDown;
    };
    const getStuProgress = () => {
      state.loading = true
      stuRouterProgress({routerId: props.routerId, userId: props.studentId}).then(res => {
        state.pro = res.data.data
        state.loading = false
      })
    }

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

    return {
      ...toRefs(state),
      closeDrawer,
      showProMess,
      changeDown,
      checkType,
    };
  },
};
</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;
              word-break: keep-all;
              white-space: nowrap;
            }

            .text2 {
              color: rgba(51, 51, 51, 0.8);
              font-size: 14px;
              margin-left: 65px;
              word-break: keep-all;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .alreadyclass {
            display: flex;
            margin-right: 57px;

            .alimg {
              height: 16px;
              width: 16px;
            }

            .altext {
              color: rgba(56, 125, 247, 1);
              font-size: 14px;
              margin-left: 16px;
              word-break: keep-all;
              white-space: nowrap;
            }
          }
        }
      }
    }

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