<template>
  <div class="goods-detail">
    <section class="section">
      <div class="section__body">
        <div class="goods-info">
          <div class="goods-info__header">
            <div class="img">
              <img
                :src="$methodsTools.splitImgHost(goodsDetail.coverUrl, false)"
                alt=""
              />
            </div>
            <div class="text">
              <div style="display: flex; justify-content: space-between">
                <div class="title">
                  {{ goodsDetail.goodsName }}
                </div>
                <div
                  class="collect el-icon-star-off"
                  :class="{ 'el-icon-star-on': collectStatus == 1 }"
                  :style="{ color: collectStatus == 1 ? '#1890ff' : '' }"
                  @click="handleCollect"
                >
                  收藏
                </div>
              </div>
              <div class="ic_l">
                <div v-if="goodsDetail.educationName" class="iy">
                  {{ goodsDetail.educationName }}
                </div>
                <div v-if="goodsDetail.projectName" class="iy">
                  {{ goodsDetail.projectName }}
                </div>
                <div v-if="goodsDetail.subjectName" class="iy">
                  {{ goodsDetail.subjectName }}
                </div>
                <div style="clear: both"></div>
              </div>
              <div
                class="price"
                v-if="
                  !goodsDetail.specTemplateId ||
                  (!goodsDetail.maxPrice && !goodsDetail.minPrice)
                "
              >
                <strong v-if="goodsDetail.standPrice === 0">免费</strong>
                <span v-else>{{ goodsDetail.standPrice | formatPrice }}</span>
              </div>
              <div v-else class="price">
                <span>{{ goodsDetail.minPrice | formatPrice }}</span>
                <template v-if="goodsDetail.minPrice != goodsDetail.maxPrice">
                  <i>-</i>
                  <span>{{ goodsDetail.maxPrice | formatPrice }}</span>
                </template>
              </div>
              <div class="originalPrice" v-if="goodsDetail.linePrice">
                <span>原价￥{{ goodsDetail.linePrice | formatPrice }}</span>
              </div>
              <div class="btns">
                <el-button type="primary" @click="openStudentDialog(goodsDetail)"
                  >立即下单</el-button
                >
              </div>
            </div>
          </div>
          <div style="display: flex; align-items: flex-start">
            <div class="goods-info__body" ref="ceilingBox2" style="width: 75%">
              <el-tabs v-model="activeName">
                <el-tab-pane label="课程介绍" name="1">
                  <div
                    class="detail ql-editor"
                    v-if="goodsDetail.pcDetailHtml"
                    style="white-space: pre-wrap"
                    v-html="goodsDetail.pcDetailHtml"
                  ></div>
                  <el-empty description="暂无课程详情" v-else></el-empty>
                </el-tab-pane>
                <el-tab-pane label="章节目录" name="2">
                  <div slot="label" style="position: relative">
                    <span class="label">章节目录</span>
                    <span v-if="listenConfigList.length" class="view-note"
                      >试看</span
                    >
                  </div>
                  <goodsDetailTree
                    :goodsId="goodsDetail.goodsId"
                    :goodsAuditionConfigIdList="goodsAuditionConfigIdList"
                  />
                </el-tab-pane>
                <el-tab-pane label="学员须知" name="3">
                  <div
                    class="ql-editor"
                    style="white-space: pre-wrap"
                    v-if="goodsDetail.buyNote"
                    v-html="
                      goodsDetail.buyNote &&
                      goodsDetail.buyNote.replace(/\n|\r\n/g, '<br>')
                    "
                  ></div>
                  <el-empty description="暂无学员须知" v-else></el-empty>
                </el-tab-pane>
                <el-tab-pane
                  label="赠送题卷"
                  name="4"
                  v-if="freeMenuList.length > 0"
                >
                  <div class="goods-menu clearfix">
                    <div class="left-box">
                      <div class="left-box__body">
                        <div
                          class="course-list-item"
                          v-for="(course, index) in freeMenuList"
                          :key="index"
                        >
                          <div class="item__content">
                            <div class="bank-section">
                              <div class="bank-section__item">
                                <div class="bank-section__item__text">
                                  {{ course.freeExamName }}
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="recommendBox">
              <div style="display: flex; justify-content: space-between">
                <div
                  style="
                    font-weight: bold;
                    border-bottom: 2px solid #1890ff;
                    padding-bottom: 10px;
                  "
                >
                  推荐课程
                </div>
                <div
                  @click="comeMoreList"
                  style="font-size: 14px; align-self: flex-end; cursor: pointer"
                >
                  更多>
                </div>
              </div>
              <div
                v-if="recommendList.goodsList && recommendList.goodsList.length"
              >
                <ul>
                  <li
                    class="recommendItem"
                    v-for="(item, index) in recommendList.goodsList"
                    :key="index"
                    style="
                      border: 1px solid #ebebeb;
                      border-radius: 5px;
                      padding: 8px;
                      margin: 10px 0;
                      overflow: hidden;
                    "
                  >
                    <div style="display: flex">
                      <div>
                        <img
                          style="
                            width: 150px;
                            height: 80px;
                            margin-right: 8px;
                            border-radius: 5px;
                          "
                          :src="
                            $methodsTools.splitImgHost(item.coverUrl, false)
                          "
                        />
                      </div>
                      <div
                        style="
                          display: flex;
                          flex-flow: column;
                          justify-content: space-between;
                        "
                      >
                        <div class="text-ellipsis">{{ item.goodsName }}</div>
                        <div
                          class="text-ellipsis"
                          style="font-weight: bold; color: red"
                        >
                          ￥{{ item.standPrice }}
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <el-empty v-else description="暂无数据"></el-empty>
            </div>
          </div>
        </div>
      </div>
    </section>
    <studentDialog ref="studentDialog" />
  </div>
</template>
  
<script>
import goodsDetailTree from "../goodsDetailTree/course-index.vue";
import studentDialog from "../studentDialog/index.vue";
export default {
  name: "GoodsDetail",
  components: { goodsDetailTree, studentDialog },
  data() {
    return {
      goodsExamConfig: [],
      goodsDetail: {
        standPrice: 0,
      },
      params: {},
      activeName: "1",
      goodsAuditionConfigIdList: [], //试听列表
      listenConfigList: [],
      educationId: "",
      recommendList: {}, //推荐课程
      needOpen: true, //是否需要一进来展开第一章节
      menuIndex: [], //需要展开的章节索引值
      freeMenuList: [], //赠送题卷列表
      collectStatus: 0,
    };
  },
  watch: {
    "$route.params": {
      handler(newVal, oldVal) {
        this.getInit();
        console.log(newVal, oldVal, "你好");
        //判断newVal有没有值监听路由变化
      },
      deep: true,
    },
  },
  mounted() {
    this.getInit();
  },
  methods: {
    getInit() {
      this.params.goodsId = this.$route.params.goodsId;
      console.log(this.params, "params");
      this.getGoodsDetail();
      this.getIsCollect();
    },
    /**
     * 查看更多
     */
    comeMoreList() {
      this.$router.push({
        path: "/shopMall",
      });
    },
    /**
       * 
       获取推荐列表
       */
    getRecommend() {
      // /bs/app/common/activity/recommend/list
      this.$api
        .appCommonActivityRecommendList({
          businessId: this.goodsDetail.businessId,
          type: 1,
        })
        .then((res) => {
          console.log(res, "推荐课程");
          if (res.rows.length) {
            this.recommendList = res.rows[0];
          }
        });
    },
    // 立即下单（打开学员弹窗）
    openStudentDialog() {
      this.$refs.studentDialog.openBoxs(this.goodsDetail);
    },
    /**
     * 获取商品详情
     */
    getGoodsDetail() {
      this.$api.getBsTypeGoodsDetail(this.params.goodsId).then((res) => {
        if (res.data.pcDetailHtml) {
          res.data.pcDetailHtml =
            res.data.pcDetailHtml &&
            res.data.pcDetailHtml.replace(
              /<img/gi,
              '<img style="max-width:100%;height:100%;display:block;margin:0px auto;"'
            );
        }
        this.goodsDetail = res.data;
        this.goodsExamConfig = JSON.parse(res.data.goodsExamConfig);
        if (this.goodsDetail.goodsAuditionConfig) {
          this.listenConfigList = JSON.parse(
            this.goodsDetail.goodsAuditionConfig
          );
          for (var itemChild of this.listenConfigList) {
            this.goodsAuditionConfigIdList.push(itemChild.sectionId); //存储试听节ID
          }
        }
        this.getRecommend();
      });
    },
    // 收藏操作
    handleCollect() {
      const params = {
        goodsId: this.params.goodsId
      }
      if (this.collectStatus == 0) {
        this.$api.addGoodsCollect(params).then((res) => {
          this.$message.success("已收藏~");
          this.getIsCollect();
        });
      } else {
        this.$api.delGoodsCollect(params).then((res) => {
          this.$message.success("已取消收藏~");
          this.getIsCollect();
        });
      }
    },
    // 获取当前商品id收藏状态
    getIsCollect() {
      this.$api.isCollect({ goodsId: this.params.goodsId }).then((res) => {
        this.collectStatus = res.data.collectStatus || 0;
      });
    },
  },
};
</script>
  
<style scoped lang="scss">
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.collect {
  font-size: 14px;
  white-space: nowrap;
  padding: 8px 10px;
  background: #f2f2f2;
  color: #696969;
  align-self: flex-start;
  border-radius: 30px;
  cursor: pointer;

  &:hover {
    background: #e6f2ff;
    color: #1890ff;
  }
}
.goods-detail {
  .section {
    &__header {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }

    &__body {
      .goods-info {
        .ceilingFixed {
          position: fixed;
          top: 84px;
          background: white;
          z-index: 999;
          box-shadow: 0 1px 0 #d8dce5;
          border-radius: 5px;
          padding-left: 5px;
          transition: 0.5 ease;
        }
        .ceilingBox {
          width: 100%;
          display: flex;
          align-items: center;
          font-size: 16px;
          font-weight: bold;
          div:nth-child(1) {
            width: 290px;
            /deep/.el-tabs__nav-wrap::after {
              background-color: white;
            }
          }
          div:nth-child(2) {
            margin-left: 23%;
            span:nth-child(1) {
              font-size: 20px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #ff2d55;
              margin-right: 15px;
              // vertical-align: bottom;
            }
            span:nth-child(2) {
              color: #7f7f7f;
              text-decoration: line-through;
              font-size: 14px;
              margin-right: 15px;
            }
          }
        }
        &__header {
          width: 100%;
          height: 288px;
          // background: #f5f7fa;
          box-shadow: 0px 0px 0px 1px #ebebeb;
          border-radius: 10px;
          padding: 20px;
          display: flex;
          //   justify-content: space-between;
          .img {
            width: 442px;
            margin-right: 0;
            img {
              width: 442px;
              height: 248px;
              border-radius: 10px;
            }
          }
          .text {
            margin-left: 24px;
            display: flex;
            flex-flow: column wrap;
            justify-content: space-between;
            width: 100%;
            .title {
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              max-width: 600px;
            }
            .originalPrice {
              color: #7f7f7f;
              text-decoration: line-through;
              font-size: 14px;
            }
            .price {
              margin-top: 10px;
              font-size: 24px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #ff2d55;
              line-height: 24px;

              span {
                font-size: 32px;
                &::before {
                  content: "￥";
                  font-size: 24px;
                  font-weight: bold;
                }
              }
              i {
                font-size: 32px;
              }
            }

            .ic_l {
              margin-bottom: 10px;
              .iy {
                float: left;
                color: rgb(85, 85, 85);
                margin: 0px 4px 4px 0px;
                background-color: rgb(235, 238, 245);
                padding: 4px 6px;
                border-radius: 4px;
                font-size: 12px;
              }
            }
          }
        }

        &__body {
          margin-top: 25px;
          box-shadow: 0px 0px 0px 1px #ebebeb;
          border-radius: 10px;
          padding: 0 15px 15px 15px;
          /deep/ .el-tabs__item {
            padding: 0 20px !important;
            height: 80px;
            line-height: 80px;
            font-size: 16px;
            font-weight: bold;
          }

          .label {
            font-size: 16px;
            font-weight: bold;
          }

          .view-note {
            width: 40px;
            height: 24px;
            background: #ff3b30;
            border-radius: 4px 4px 0px 4px;
            border: 1px solid #ff3b30;
            text-align: center;
            line-height: 22px;
            color: #fff;
            position: absolute;
            right: -10px;
            top: 5px;
          }

          .detail {
            img {
              max-width: 100% !important;
            }
          }

          .goods-img {
            width: 100%;
          }
        }
      }
    }
    .recommendBox {
      margin-top: 25px;
      box-shadow: 0px 0px 0px 1px #ebebeb;
      border-radius: 10px;
      padding: 15px;
      width: 25%;
      margin-left: 20px;
    }
  }
}
</style>
  