<template>
  <div class="goods-detail">
    <div v-if="goodsDetail" class="goods-info">
      <div class="goods-info__header" v-loading="loading">
        <div class="img" style="width: 600px">
          <img
            :src="$methodsTools.splitImgHost(goodsDetail.mainImg, false)"
            alt=""
          />
        </div>
        <div class="text">
          <div style="display: flex; justify-content: space-between">
            <div class="title">
              {{ goodsDetail.configName }}
            </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 && goodsDetail.businessName"
              class="iy"
            >
              {{ goodsDetail.businessName }} -
              {{ goodsDetail.projectName }}
            </div>
            <div style="clear: both"></div>
          </div>
          <div v-if="goodsDetail.subjectName" class="subText text-ellipsis">
            {{ goodsDetail.subjectName }}
          </div>
          <div class="btns">
            <el-button type="primary" @click="openStudentDialog()"
              >立即下单</el-button
            >
          </div>
        </div>
      </div>

      <div v-if="goodsDetail.courseSubjectList" class="goods-info__body">
        <div>
          <el-tabs v-model="labelActive" :editable="false">
            <el-tab-pane
              v-for="(item, index) in goodsDetail.courseSubjectList"
              :key="index"
              :label="item.goodsTypeName + '：' + item.subjectName"
            >
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 题库商品详情树 -->
        <bankGoodsDetailTree
          v-if="goodsDetail.courseSubjectList[labelActive].goodsType == 2"
          :goodsId="goodsDetail.courseSubjectList[labelActive].goodsId"
          :goodsExamConfig="goodsExamConfig"
        />
        <!-- 其他商品详情树 -->
        <goodsDetailTree
          v-else
          :goodsId="goodsDetail.courseSubjectList[labelActive].goodsId"
          :goodsAuditionConfigIdList="goodsAuditionConfigIdList"
        />
      </div>
    </div>
    <!-- 匹配学员弹窗 -->
    <studentDialog ref="studentDialog" />
  </div>
</template>
    
<script>
import goodsDetailTree from "../goodsDetailTree/course-index.vue";
import bankGoodsDetailTree from "../goodsDetailTree/bank-index.vue";
import studentDialog from "../studentDialog/index.vue";
export default {
  name: "GoodsDetail",
  components: { goodsDetailTree, bankGoodsDetailTree, studentDialog },
  data() {
    return {
      labelActive: "0", // 选中的标签
      goodsDetail: {},
      params: {},
      listenConfigList: [],
      needOpen: true, //是否需要一进来展开第一章节
      goodsAuditionConfigIdList: [], //试听列表
      goodsExamConfig: [],
      collectStatus: 0,
      loading: false,
    };
  },
  mounted() {
    this.getInit();
  },
  methods: {
    getInit() {
      this.params.configId = this.$route.params.configId;
      this.getGoodsDetail();
      this.getIsCollect();
    },
    // 立即下单（打开学员弹窗）
    openStudentDialog() {
      this.$refs.studentDialog.openBoxs(this.goodsDetail);
    },
    /**
     * 获取商品详情
     */
    getGoodsDetail() {
      this.loading = true;
      this.$api
        .getBsGoodPackDetail({ goodsType: 10, configId: this.params.configId })
        .then((res) => {
          this.goodsDetail = res.rows[0];
          this.goodsExamConfig = JSON.parse(res.data[0].goodsExamConfig);
          if (this.goodsDetail.goodsAuditionConfig) {
            this.listenConfigList = JSON.parse(
              this.goodsDetail.goodsAuditionConfig
            );
            for (var itemChild of this.listenConfigList) {
              this.goodsAuditionConfigIdList.push(itemChild.sectionId); //存储试听节ID
            }
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 收藏操作
    handleCollect() {
      const params = {
        configId: this.params.configId,
      };
      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({ configId: this.params.configId }).then((res) => {
        this.collectStatus = res.data.collectStatus || 0;
      });
    },
  },
};
</script>
    
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.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 {
  .goods-info {
    &__header {
      width: 100%;
      height: 288px;
      // background: #f5f7fa;
      box-shadow: 0px 0px 0px 1px #ebebeb;
      border-radius: 10px;
      padding: 20px;
      display: flex;
      .img {
        width: 442px;
        margin-right: 0;
        img {
          width: 442px;
          height: 248px;
          border-radius: 10px;
        }
      }
      .text {
        width: 100%;
        margin-left: 24px;
        display: flex;
        flex-flow: column wrap;
        justify-content: space-between;
        .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;
          }
        }
        .subText {
          margin-bottom: 10px;
          width: 100%;
          color: rgb(85, 85, 85);
          margin: 0px 4px 4px 0px;
          background-color: rgb(235, 238, 245);
          padding: 4px 6px;
          border-radius: 4px;
          font-size: 14px;
          line-height: 30px;
        }

        .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: 15px;
      /deep/ .el-tabs__item {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }

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

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

      .goods-img {
        width: 100%;
      }
    }
  }
}
</style>
    