<template>
  <div class="outerchain">
    <ReturnHead text="外链详情"></ReturnHead>
    <!-- <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead> -->
    <!-- <div class="top" :style="{ display: closeBtn ? 'flex' : 'none' }">
      <div class="topin">
        <div class="topsa">
          {{ data?.liveNotice }}
        </div>
        <img
          class="topimg"
          @click="isShowClose"
          src="../../assets/image/liveboradcast/cha.png"
        />
      </div>
    </div> -->
    <div class="notice" style="margin-top: 0">
      <div class="noticebox">
        <!-- <div class="avator">
          <img class="avaimg" :src="teacherInfo.avatar" />
          <div class="avaname">{{ data.userInfoBo?.userName }}</div>
        </div> -->
        <div class="mani">
          <div class="joininfo">【外链】{{ data?.linkName }}</div>
          <!-- <div class="contenttitle">
            <img class="timeimg" src="../../assets/image/ballotpage/time.png" />
            <div class="timee">
              {{ data?.liveStartTime + " 至 " + data?.liveEndTime }}
            </div>
          </div> -->
          <div class="midline"></div>
        </div>
      </div>
    </div>

    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div class="joininfo">外链说明</div>
          <div class="line"></div>
          <div class="contentone">
            <div class="actinner">
              {{ data.linkDescription }}
            </div>
          </div>
        </div>
      </div>
      <div class="btnbox">
        <div class="submitbtn" @click="goOuterChain">去查看</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ReturnHead from "@/components/ReturnHead.vue";
import { computed, reactive, toRefs, onUnmounted, ref } from "vue";
import img from "@/assets/image/uploadimg.png";
import { request, useRequest } from "@/api/request";
import { LINK_DETAILS, STUDY_RECORD } from "@/api/api";
import { useRoute } from "vue-router/dist/vue-router";
import { useRouter } from "vue-router";
import { useUserInfo } from "@/api/utils";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

const {
  query: {
    courseId: linkId,
    id: taskId,
    type,
    status,
    chapterOrStageId,
    infoId,
  },
} = useRoute();
const router = useRouter();
console.log("外链信息", linkId);
const { data } = useRequest(LINK_DETAILS(linkId));
console.log("外链信息", data);
const userInfo = computed(() => store.state.userInfo);
const goOuterChain = () => {
  status != 1 &&
    request(STUDY_RECORD, {
      studentId: userInfo.value.id,
      targetId: infoId,
      logo: type,
      stageOrChapterId: chapterOrStageId,
      taskId: taskId,
    });

  window.open(data.value.linkAddress, "_top");
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.outerchain {
  width: 100%;
  .top {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 25px;
    background-color: #fffbee;
    .topin {
      // text-align: center;
      width: 90%;
      height: 25px;
      display: flex;
      justify-content: space-between;
      .topsa {
        color: #ff9e00;
        line-height: 25px;
        font-size: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .topimg {
        height: 10px;
        width: 10px;
        margin-top: 7px;
      }
    }
  }
  .notice {
    width: 100%;
    // display: flex;
    // justify-content: center;
    // // margin-top: -17.5px;
    padding-bottom: 24px;
    margin-top: 20px;
    background: #fff;
    .noticebox {
      width: 100%;
      background: #fff;
      // border-radius: 4px;
      position: relative;
      display: flex;
      justify-content: center;
      .avator {
        display: flex;
        position: absolute;
        right: 29px;
        top: 30px;
        // background-color:red;
        // z-index: 999;
        .avaimg {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
        .avaname {
          line-height: 30px;
          margin-left: 8px;
          color: #0d233a;
        }
      }
      .line {
        width: 100%;
        height: 0;
        border-top: 1px solid #f1f2f3;
        margin-top: 17px;
        position: absolute;
        left: 0;
      }
      .mani {
        width: 90%;
        margin-top: 20px;
        // position:relative;
        .joininfo {
          color: #0d233a;
          font-size: 16px;
          font-weight: bold;
        }

        .contenttitle {
          width: 100%;
          // height:10px;
          margin-top: 15px;
          // background-color: #bfa;
          display: flex;
          .timeimg {
            width: 12.8px;
            height: 13px;
          }
          .timee {
            color: #6e7b84;
            font-size: 14px;
            line-height: 13px;
            margin-left: 6px;
          }
        }
        .midline {
          height: 0;
          border-top: 1px solid #f1f2f3;
          width: 100%;
          margin-top: 15px;
          margin-bottom: 15px;
        }
        .timebox {
          display: flex;
          justify-content: center;
          width: 100%;
          // height: 100px;
          // background-color: #bfa;
          margin-bottom: 15px;
          .allbtn {
            width: 92%;
            display: flex;
            justify-content: space-between;
            // background-color: lightcoral;
            .samebtn {
              width: 93px;
              height: 33px;
              border: 0;
              color: #fff;
              font-size: 14px;
              border-radius: 6px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .btno {
              background-color: #00c1fc;
            }
            .btnt {
              background-color: #0096fa;
            }
            .btnr {
              background-color: #2478ff;
            }
          }
        }
        .detailin {
          width: 100%;
          // height: 100px;
          // background-color: red;
          display: flex;
          justify-content: center;
          .in {
            margin-left: 20px;
            width: 86%;
            color: #6e7b84;
            line-height: 30px;
            font-size: 13px;
          }
        }
        .contentone {
          margin-top: 43px;
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin-bottom: 20px;
          // height: 200px;
          .actinner {
            // background-color: red;
            color: #6e7b84;
            font-size: 13px;
            line-height: 30px;
          }
          .de {
            width: 100%;
            height: 34px;
            border-radius: 10px;
            background-color: #f2f5f7;
            display: flex;
            justify-content: space-between;
            .deal {
              color: #333330;
              font-weight: bold;
              line-height: 34px;
              margin-left: 21px;
              font-size: 14px;
            }
            .rightpng {
              width: 6px;
              height: 11px;
              margin-right: 6px;
              margin-top: 12px;
            }
          }
          .ballotjoincontainer {
            display: flex;
            width: 100%;
            justify-content: center;
            .ballotjoin {
              width: 85%;
              // height:100px;
              // background-color: #bfa;
              .ballotitem {
                .upitem {
                  display: flex;
                  justify-content: space-between;
                  .left {
                    display: flex;
                    .leftimg {
                      width: 4.5px;
                      height: 14.5px;
                      margin-top: 1px;
                    }
                    .leftcontent {
                      margin-left: 9px;
                      color: #6e7b84;
                      font-size: 13px;
                      line-height: 30px;
                      margin-top: -5px;
                    }
                  }
                  .btn {
                    background-color: #2478ff;
                    color: #fff;
                    width: 64px;
                    height: 21px;
                    border-radius: 10px;
                    border: 0;
                    font-size: 12px;
                    line-height: 19px;
                    margin-top: -1px;
                  }
                }
                .thinline {
                  width: 100%;
                  border-top: 1px solid #f1f2f3;
                  margin-top: 17px;
                  margin-bottom: 17px;
                }
              }
            }
          }
        }
      }
    }
    .btnbox {
      width: 301.5px;
      height: 33px;
      background-color: #2478ff;
      border-radius: 6px;
      box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
      font-size: 14px;
      margin: 30px auto 0 auto;
      text-align: center;
      line-height: 33px;
      .submitbtn {
        border: none;
        border-radius: 6px;
        background-color: #2478ff;
        color: #ffffff;
      }
    }
  }
}
</style>
