<template>
  <div>
    <div class="course-banner">
      <div id="container" style="z-index: 99" v-if="resonimg.length == 1">
        <!-- 当轮播图等于一张时 -->
        <swiper :options="swiperOptiontwo">
          <swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'a' + idx"
            class="swiper-slide games pointer">
            <div class="bannbox" :style="{
              background: `url(${fileBaseUrl + item.image
                }) no-repeat 100% / 100%`,
            }"></div>
            <img class="banner-img" style="margin: 0 auto" :src="fileBaseUrl + item.image" alt="" />
          </swiper-slide>
        </swiper>
      </div>
      <div id="container" style="z-index: 99" v-else>
        <swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length > 1">
          <swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'b' + idx"
            class="swiper-slide games pointer">
            <div class="bannbox" :style="{
              background: `url(${fileBaseUrl + item.image
                }) no-repeat 100% / 100%`,
            }"></div>
            <img class="banner-img" style="margin: 0 auto" :src="fileBaseUrl + item.image" alt="" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
    <!-- 图片 -->
    <div class="xindex-content">
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <div class="gratefulNav">
            <div class="navImg">
              <router-link to="/grateful/teacherOpinion">
                <img src="../../assets/images/grateful/famousTeacher.png" alt="">
              </router-link>
            </div>
            <div class="navNotice">
              <div id="fixd-box" style="height: 100%;">
                <div class="portal-ranking ranking-bg" style="height: 100%;display: flex;flex-direction: column;"
                  :class="showNoticeImg ? 'allPadding' : ''">
                  <div :class="showNoticeImg ? 'noticeBgc' : ''">
                    <div style="display: flex;justify-content: space-between;">
                      <p class="ranking-title">通知</p>
                      <router-link v-if="courseList.noticeList.length >= 6" to="/grateful/gratefulNotice"
                        style="font-size: 14px;">查看更多</router-link>
                    </div>
                    <ul>
                      <li v-for="(item, index) in courseList.noticeList" :key="index"
                        style="cursor: pointer;line-height: 22px;" class="liList">
                        <router-link :to="'/grateful/noticeDetail?id=' + item.id"
                          style="display: flex;align-items: center;">
                          <span class="portal-right-text blue-one">
                            <img :src="getPic(index)" alt="">
                          </span>
                          <div class="portal-title-desc"
                            style="flex: 1;font-size: 14px;display: flex;justify-content: space-between;">
                            <span class="title-line-ellipsis " style="flex: 1;">{{ item.content }}</span>
                            <span>{{ item.createTime.split(' ')[0] }}</span>
                          </div>
                        </router-link>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="navTool">
              <div id="fixd-box" style="height: 100%;">
                <div class="portal-ranking ranking-bg1" style="height: 100%;display: flex;flex-direction: column;"
                  :class="showToolImg ? 'allPadding' : ''">
                  <div :class="showToolImg ? 'toolBgc' : ''">
                    <div style="display: flex;justify-content: space-between;">
                      <p class="ranking-title">工具下载</p>
                      <router-link v-if="courseList.toolList.length >= 6" to="/grateful/toolDown"
                        style="font-size: 14px;">查看更多</router-link>
                    </div>
                    <ul>
                      <li v-for="(item, index) in courseList.toolList" :key="index"
                        style="cursor: pointer;line-height: 22px;" class="title-line-ellipsis liList"
                        @click="downTool(item)">
                        <span class="portal-right-text orange-one" v-if="index == 0">
                          <img :src="`${webBaseUrl}/images/list-01.png`" alt="">
                        </span>
                        <span class="portal-right-text orange-tow" v-if="index == 1">
                          <img :src="`${webBaseUrl}/images/list02.png`" alt="">
                        </span>
                        <span class="portal-right-text orange-three" v-if="index == 2">
                          <img :src="`${webBaseUrl}/images/list03.png`" alt="">
                        </span>
                        <span class="portal-right-text" v-if="index == 3">
                          <img :src="`${webBaseUrl}/images/list04.png`" alt="">
                        </span>
                        <span class="portal-right-text" v-if="index == 4">
                          <img :src="`${webBaseUrl}/images/list05.png`" alt="">
                        </span>
                        <span class="portal-right-text" v-if="index == 5">
                          <img :src="`${webBaseUrl}/images/listblue06.png`" alt="">
                        </span>
                        <span class="portal-title-desc" style="font-size: 14px;">{{ item.name.split('.')[0] }}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 教师赋能 -->
    <div class="xindex-content">
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <!--内容块-->
          <div class="modules-title xindex-main">
            <span class="modules-text">教师赋能</span>
            <span class="more">
              <router-link to="/grateful/teacherEmpowerment">查看更多</router-link>
            </span>
          </div>
          <div class="modules-list list">
            <!--内容列表内容-->
            <div v-for="(course, ccidx) in courseList.list" :key="'cc' + ccidx" class="xindex-course"
              style="position: relative;margin-right: 0;">
              <a @click="toCourseDetail(course)">
                <div class="xindex-course-image">
                  <course-image :course="course"></course-image>
                  <span v-if="course.type == 20 || course.type == 10" class="course-type">录播课</span>
                  <span v-if="course.type == 30 " class="course-type">面授课</span>
                  <span v-if="course.type == 40 " class="course-type">学习项目</span>
                </div>
                <div style="width: 80%" :title="course.name" class="course-title portal-title-tow two-line-ellipsis">
                  {{ course.name }}
                </div>
                <div class="course-author">
                  <div class="course-author-left">
                    {{ course.teacher }}
                    <span class="study-num">{{ formatNum(course.studies) }}人学习</span>
                  </div>
                  <div style="display: flex">
                    <div v-if="course.score != '0'">
                      <span class="course-score-value" style="margin-left: 10px">{{ toScore(Number(course.score))
                      }}分</span>
                    </div>
                    <div v-else class="course-score-no">未评分</div>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="float-tools" @click="() => (gratefulVisible = !gratefulVisible)">
      <div class="content">
        <img src="../../assets/images/grateful/suggestion.png" alt="" />
        <span>给点建议</span>
      </div>
    </div>
    <!-- 意见 -->
    <el-dialog :close-on-click-modal="false" width="629px" :visible.sync="gratefulVisible" :append-to-body="true"
      @closed="closeDlg">
      <div class="dialogContent">
        <div class="dialogTop">
          <div class="words">
            <div>欢迎留下您的宝贵建议</div>
          </div>
        </div>
        <el-form :model="form">
          <el-form-item>
            <el-input type="textarea" placeholder="请输入内容......" v-model="form.textarea" class="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="display: flex; justify-content: center">
              <el-button style="width: 100px;" @click="closeDlg">取消</el-button>
              <el-button style="width: 100px;" @click="submitNotice" type="primary">确认</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import apiCourseStudy from "@/api/modules/courseStudy.js";
import courseImage from "@/components/Course/courseImage.vue";
import { toScore, formatUserNumber } from "@/utils/tools.js";
import { saveOpinion, noticeList, courselList, toolList, carouselList, toolDown } from '@/api/modules/grateful.js'
export default {
  name: "Grateful",
  components: {
    courseImage,
  },
  data() {
    return {
      showNoticeImg: false,
      showToolImg: false,
      form: {
        textarea: "",
      },
      gratefulVisible: false,
      formatNum: formatUserNumber,
      toScore,
      // 列表
      courseList: {
        num: 12,
        orderType: 2,
        list: [],
        noticeList: [],
        toolList: []
      },
      resonimg: [],
      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
      swiperOptiontwo: {
        autoplay: false,
        // noSwiping: true,
      },
      resonimg: [],
      swiperOption: {
        autoplay: {
          delay: 2000,
          disableOnInteraction: false, //解决滑动后不能轮播的问题
        },
        speed: 3000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
        loop: true, //循环切换
        peed: 300, //循环速度
        scrollbar: ".swiper-scrollbar",
        pagination: {
          el: ".swiper-pagination",
          // type : 'progressbar', //分页器形状
          clickable: true, //点击分页器的指示点分页器会控制Swiper切换
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      }
    };
  },
  mounted() {
    this.couresreso();
    this.getCourseData(1);
    this.getNoticeData()
    this.getToolData()
  },
  methods: {
    downTool(toolInfo) {
      console.log(toolInfo);
      window.open(`/activityApi/xboe/m/boe/tools/url/download?urlStr=${process.env.VUE_APP_BOE_WEB_URL}/upload${toolInfo.filePath}&fileName=${toolInfo.name}`)
      // toolDown({
      //   urlStr: `${process.env.VUE_APP_BOE_WEB_URL}/upload${toolInfo.filePath}`,
      //   fileName: toolInfo.name
      // }).then((result) => {
      //   const link = document.createElement('a');// 创建a标签
      //   let blob = new Blob([result.data], { type: '' }); // 设置文件类型
      //   link.style.display = "none";
      //   link.href = URL.createObjectURL(blob); // 创建URL
      //   link.setAttribute("download", `${toolInfo.name}`);
      //   document.body.appendChild(link);
      //   link.click();
      //   URL.revokeObjectURL(link.href);
      //   document.body.removeChild(link);
      // })
    },
    couresreso() {
      carouselList().then((res) => {
        console.log(res);
        const list = res.data.records.map(item => {
          return {
            image: item.picPath,
            name: item.displayPage,
            JumpUrl: '',
            bgcolor: '',
            ...item
          }
        });
        this.resonimg = list;
      })
    },
    submitNotice() {
      if (!this.form.textarea) return this.$message({ message: '请输入内容', type: 'error' })
      saveOpinion({ content: this.form.textarea }).then(() => {
        this.$message({ message: '提交成功', type: 'success' })
        this.closeDlg()
      })
    },
    getPic(index) {
      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
    },
    closeDlg() {
      this.form.textarea = ''
      this.gratefulVisible = false
    },
    toCourseDetail(item) {
      console.log(item);
      if (item.type == 10) {
        //console.log("直接进入学习页面");
        this.$router.push("/course/studyindex?id=" + item.courseId);
      } else if (item.type == 20) {
        apiCourseStudy.hasSignup(item.courseId).then((rs) => {
          if (rs.status == 200) {
            this.$router.push("/course/studyindex?id=" + item.courseId);
          } else {
            this.$router.push("/course/detail?id=" + item.courseId);
          }
        });
      }
    },
    getCourseData(pageIndex) {
      courselList({
        pageNo: pageIndex,
        pageSize: 8
      }).then((res) => {
        if (res.code == 200 && res.data.records.length > 0) {
          console.log(res.data.records, '之前的');
          // res.data.records.map((item) => {
          //   return {
          //     ...item,
          //     coverImg:item.coverImg
          //   }
          // })
          this.courseList.list = res.data.records;
        } else {
          console.log("加载课程信息失败:" + res.error);
        }
      });
    },
    getNoticeData() {
      noticeList({
        pageNo: 1,
        pageSize: 6,
        isTop: ''
      }).then((res) => {
        console.log(res, '通知');
        if (res.data.records.length <= 3) {
          this.showNoticeImg = true
        }
        this.courseList.noticeList = res.data.records || []
      })
    },
    getToolData() {
      toolList({
        pageNo: 1,
        pageSize: 6
      }).then((result) => {
        if (result.data.records.length <= 3) {
          this.showToolImg = true
        }
        console.log(result.data.records, '哈哈哈哈');
        this.courseList.toolList = result.data.records || []
      })
    },
  },
};
</script>

<style scoped lang="scss">
.allPadding {
  padding: 0px;
}

.noticeBgc {
  height: 100%;
  width: 100%;
  background: url('../../assets/images/grateful/noticeBgc.png') no-repeat;
  background-size: 100%;
  background-position: left bottom;
  padding: 20px;
  border-radius: 8px;
}

.toolBgc {
  height: 100%;
  width: 100%;
  background: url('../../assets/images/grateful/toolBgc.png') no-repeat;
  background-size: 100%;
  background-position: left bottom;
  padding: 20px;
  border-radius: 8px;
}

@media screen and (max-width: 1366px) {
  .swiper-pagination {
    top: 310px;
  }

  // .noticeBgc {
  //   background-size: 100% 110px;
  // }
}

@media screen and (max-width: 1680px) and (min-width:1367px) {
  .swiper-pagination {
    top: 360px;
  }

  // .noticeBgc {
  //   background-size: 100% 120px;
  // }
}

@media screen and (max-width: 1920px) and (min-width: 1681px) {
  .swiper-pagination {
    top: 360px;
  }

  // .noticeBgc {
  //   background-size: 100% 150px;
  // }
}

@media screen and (min-width: 1921px) {
  .swiper-pagination {
    top: 360px;
  }

  .noticeBgc {
    // background-size: 100% 169px;
  }
}

.bannbox {
  width: 100%;
  height: 420px;
  text-align: center;
  filter: blur(5px);
  z-index: -1;
  background-size: 100% 100%;
}

::v-deep.swiper-slide .games .swiper-slide-active {
  text-align: center !important;
}

#container {
  position: absolute;
  height: 420px;
  top: 0;
  width: 100%;
}

.banner-img {
  height: 420px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: (-50%, -50%);
}

.course-banner {
  height: 420px;
  position: relative;

  &::before {
    content: url(../../assets/images//grateful/logo.png);
    position: absolute;
    top: 20px;
    left: 40px;
  }

  .swiper-button-prev {
    height: 38px;
    padding: 0 16px;
    background: rgba($color: #000000, $alpha: 0.8) url("../../assets/images/icon/ban-left.png") no-repeat;
    background-size: 12px 18px;
    background-position: 16px 10px;
    bottom: 66px;
    border-radius: 19px 0 0 19px;
  }

  .swiper-button-next {
    height: 38px;
    bottom: 66px;
    top: auto;
    padding: 0 16px;
    background: rgba($color: #000000, $alpha: 0.1) url("../../assets/images/icon/ban-right.png") no-repeat;
    background-size: 12px 18px;
    background-position: 6px 10px;
    border-radius: 0 19px 19px 0;
  }

  .swiper-pagination-bullets {
    left: 60px;
    bottom: 66px;
  }

  ::v-deep .swiper-pagination {
    line-height: 25px;
    height: 32px;
    border-radius: 19px;
    width: auto;
    left: 45%;
    padding: 0 20px;
    border-radius: 19px;

    .swiper-pagination-bullet {
      position: relative;
      width: 25px;
      height: 5px;
      margin-top: 10px;
      background: #fff;
      opacity: 1 !important;
      border-radius: 2px;
    }

    .swiper-pagination-bullet::before {
      content: "";
      position: absolute;
      top: -20px;
      bottom: -20px;
      left: -2px;
      right: -2px;
    }

    .swiper-pagination-bullet-active {
      height: 5px;
      opacity: 1 !important;
      margin-top: 10px;
      width: 25px;
      background: #387df7;
      border-radius: 2px;
    }
  }
}

::v-deep .el-dialog__body {
  background: linear-gradient(180deg, rgba(56, 125, 247, 0.2) 0%, rgba(166, 168, 255, 0) 100%) no-repeat;
  background-size: 100% 136px;
}

::v-deep .el-dialog__header {
  background: linear-gradient(180deg, rgba(56, 125, 247, 0.2) 0%, rgba(166, 168, 255, 0) 100%) no-repeat;
  background-size: 100% 1000px;
}

.dialogContent {

  .dialogTop {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;

    .words {
      font-size: 26px;
      font-weight: 600;
      color: #333333;
      line-height: 37px;
    }
  }
}

.title-line-ellipsis {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
  word-break: break-all;
  overflow: hidden;
}

.gratefulNav {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  column-gap: 40px;

  .navImg {
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.textarea {
  width: 100%;

  ::v-deep .el-textarea__inner {
    min-height: 300px !important;
  }
}

.float-tools {
  position: fixed;
  right: 0;
  bottom: 40%;
  z-index: 999;
  cursor: pointer;

  .content {
    width: 152px;
    height: 55px;
    display: flex;
    align-items: center;
    background: linear-gradient(86deg, #00c8ff 0%, #167cff 100%);
    border-radius: 100px 0px 0px 100px;
    padding: 20px;

    img {
      width: 20px;
      height: 20px;
    }

    span {
      margin-left: 10px;
      color: #fff;
      font-size: 20px;
    }
  }
}

.xindex-course-image:hover {
  transform: scale(1.2) translateY(-15px);
  transition: all 0.6s;
}


.two-line-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  box-sizing: border-box;
}


// 内容部分
.modules {
  margin-top: 20px;
  display: flex;

  .modules-title {
    padding: 0;

    .modules-text {
      height: 28px;
      font-size: 20px;
      font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
      font-weight: 700;
      color: #333333;
    }

    .recommend {
      vertical-align: text-bottom;
      height: 26px;
    }

    .quyer-tag {
      margin-left: 15px;

      a {
        color: #333333;
        font-size: 14px;
        margin: 0 15px;
        display: inline-block;
        text-decoration: none;
        outline: none;
      }

      .current {
        width: 44px;
        height: 26px;
        background: #387df7;
        border-radius: 4px;
        color: #fff;
        line-height: 26px;
        text-align: center;
      }
    }

    .more {
      float: right;
      margin-top: 7px;
      color: #333333;
      font-size: 14px;
    }
  }

  .modules-list {
    margin-top: 30px;

    .case-card {
      margin-bottom: 15px;

      .case-info-image-box {
        position: relative;

        .case-info {
          width: 385px;

          .case-info-title {
            font-size: 18px;
            color: #343434;
            margin-bottom: 5px;

            .case-info-time {
              font-size: 12px;
              color: #999999;
              float: right;
              margin-top: 8px;
            }
          }

          .case-info-summary {
            font-size: 12px;
            color: #666666;
            height: 82px;
            line-height: 18px;
          }
        }

        img {
          width: 160px;
          height: 105px;
          position: absolute;
          top: 5px;
          right: 0;
        }
      }

      .case-info-box {
        .case-info {
          .case-info-title {
            font-size: 18px;
            color: #343434;
            margin-bottom: 5px;

            .case-info-time {
              font-size: 12px;
              color: #999999;
              float: right;
              margin-top: 8px;
            }
          }

          .case-info-summary {
            font-size: 12px;
            color: #666666;
            height: 82px;
            line-height: 18px;
          }
        }
      }

      .case-other-info {
        height: 40px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
      }
    }

    .article-card {
      background: #fff;
      border-radius: 8px;

      .article-card-left {
        .article-card-box {
          .article-info-image-box {
            border-radius: 4px;

            .article-info {
              height: 400px;

              .article-info-title {
                font-size: 16px;
                color: #00253e;
                font-weight: 500;
                margin-bottom: 5px;
                margin-top: 5px;
              }

              .article-info-summary {
                font-size: 14px;
                color: #6e7b84;
                height: 160px;
                line-height: 22px;
              }
            }

            img {
              width: 470px;
              height: 330px;
            }
          }
        }
      }

      .article-card-right {
        flex: 1;
        margin-left: 28px;

        .article-card-box {
          margin-bottom: 16px;
          padding-bottom: 16px;

          &:last-child {
            margin-bottom: 0px;
            padding-bottom: 0px;
          }

          .article-info-box {
            .article-info {
              display: flex;

              .article-image {
                width: 140px;
                height: 105px;
                margin-top: 10px;
                margin-left: 20px;
              }

              .article-body {
                flex: 1;

                .article-info-title {
                  font-size: 18px;
                  color: #343434;
                  margin-bottom: 5px;

                  .article-info-time {
                    font-size: 12px;
                    color: #999999;
                    float: right;
                    margin-top: 8px;
                    font-weight: 500;
                  }
                }

                .article-info-summary {
                  padding-top: 9px;
                  font-size: 14px;
                  color: #666666;
                  height: 43px;
                  line-height: 18px;
                  font-weight: 500;
                  margin-bottom: 20px;
                }
              }
            }
          }
        }

        .article-card-box:not(:last-child) {
          border-bottom: 1px solid #ededed;
        }
      }

      .article-other-info {
        display: flex;
      }
    }

    .qa-card {
      box-sizing: border-box;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
      border-radius: 8px;
      background: #fff;

      &:last-child {
        margin-right: 0;
      }

      .qa-top {
        & span:first-child {
          height: 24px;
          background: rgba($color: #387df7, $alpha: 0.05);
          border-radius: 4px;
          font-size: 12px;
          color: #387df7;
        }

        span {
          color: #6e7b84;
        }
      }

      .qa-center {
        position: relative;
        background: rgba($color: #04243c, $alpha: 0.04);
        border-radius: 4px;

        .qa-views {
          position: absolute;
          color: #6e7b84;
        }
      }

      .qa-char {
        display: flex;
      }
    }
  }

  .list {
    display: grid;
    justify-content: space-between;
  }
}
</style>
