<template>
  <div>
    <div class="course-item" @click="goodsDetail(item)">
      <div class="course-item__img">
        <div
          class="note"
          :class="{ note__yellow: item.goodsType == 6 }"
          v-if="item.year"
        >
          {{ item.year }}
        </div>
        <img
          v-if="item.coverUrl"
          :src="$tools.splitImgHost(item.coverUrl)"
          alt=""
        />
      </div>
      <div class="course-item__title">
        <span v-if="item.goodsType == 6" class="note">直播</span>
        {{ item.goodsName }}
      </div>
      <div class="course-item__desc">
        <div class="price">￥{{ item.standPrice }}</div>
      </div>
      <div class="course-item__btns">
        <a class="add" @click.stop="addCart(item)">加购物车</a>
        <a class="buynow" @click.stop="buyNow(item)">立即购买</a>
      </div>
    </div>

    <BuyCourseModal ref="selectClassModal"></BuyCourseModal>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import BuyCourseModal from "@/components/buyCourseModal/index";
export default {
  name: "courseItem",
  components: {
    BuyCourseModal,
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  props: ["item"],
  data() {
    return {
      selectClassModal: false,
    };
  },
  mounted() {},
  methods: {
    ...mapMutations(["getCartCount"]),
    /**
     * 查看商品详情
     */
    goodsDetail(item) {
      this.getGoodsDetail(item.goodsId).then((res) => {
        console.log(res);
        if (res.goodsType === 1) {
          this.$router.push({
            path: "/course-detail/" + res.goodsId,
          });
        }
        if (res.goodsType === 2) {
          this.$router.push({
            path: "/bank-detail/" + res.goodsId,
          });
        }

        if (res.goodsType === 6) {
          this.$router.push({
            path: "/live-detail/" + res.goodsId,
          });
        }
      });
    },

    buyNow(item) {
      console.log(item);
      if (!this.$tools.isLogin()) {
        this.setCurrentRouter(this.$route);
        this.$router.push({
          path: "/login",
        });
        return;
      }

      this.getGoodsDetail(item.goodsId).then((res) => {
        if (res.templateType) {
          if (res.goodsType === 1) {
            this.$refs.selectClassModal.showModal(res);
          }
          if (res.goodsType === 2 || res.goodsType === 6) {
            let selectGoodsList = JSON.parse(JSON.stringify([res]));
            localStorage.setItem(
              "checkGoodsList",
              JSON.stringify(selectGoodsList)
            );
            this.$router.push({
              path: "/payment",
            });
          }
        } else {
          let selectGoodsList = JSON.parse(JSON.stringify([res]));
          localStorage.setItem(
            "checkGoodsList",
            JSON.stringify(selectGoodsList)
          );
          this.$router.push({
            path: "/payment",
          });
        }
      });
    },

    /**
     * 加入购物车
     */
    addCart(item) {
      this.$request
        .addCart({ goodsId: item.goodsId })
        .then((res) => {
          if (res) {
            this.getCartCount();
            this.$message({
              message: "加入购物车成功",
              type: "success",
            });
          }
        })
        .catch((err) => {
          if (err.code == 500) {
            this.$message({
              message: err.msg,
              type: "warning",
            });
          }
        });
    },

    getGoodsDetail(goodsId) {
      return new Promise((resolve) => {
        this.$request.commonGoodsDetail(goodsId).then((res) => {
          resolve(res.data);
        });
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.course-item {
  cursor: pointer;
  margin: 94px 7px 0;
  width: 240px;
  height: 193px;
  background: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(213, 218, 224, 0.8);
  border-radius: 10px;
  position: relative;
  background: #fff;
  padding-top: 70px;

  &__img {
    width: 224px;
    height: 125px;
    border-radius: 10px 8px 8px 8px;
    background: #ffffff;
    position: absolute;
    left: 8px;
    top: -62px;
    overflow: hidden;
    .note {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 2;
      width: 80px;
      height: 24px;
      background: #d94404;
      box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
      border-radius: 10px 0px 20px 0px;
      text-align: center;
      line-height: 24px;
      color: #fff;

      &__yellow {
        background: #ffb001;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }

  &__title {
    margin: 0 8px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 24px;
    height: 48px;
    overflow: hidden;

    .note {
      display: inline-block;
      width: 48px;
      height: 20px;
      background: #fff8e8;
      border: 1px solid #ffb001;
      border-radius: 10px;
      text-align: center;
      color: #ffb001;
      line-height: 18px;
      font-size: 12px;
    }
  }

  &__desc {
    height: 32px;
    margin-left: 8px;

    .price {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ff2d55;
      line-height: 32px;
    }
  }

  &__btns {
    margin: 0 8px;
    display: flex;
    justify-content: space-between;
    .add {
      display: block;
      width: 108px;
      height: 32px;
      line-height: 30px;
      border: 1px solid #bfbfbf;
      background: #fff;
      border-radius: 8px;
      font-size: 16px;
      color: #333333;
      text-align: center;
    }

    .buynow {
      display: block;
      width: 108px;
      height: 32px;
      line-height: 30px;
      background: #3f8dfd;
      border-radius: 8px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      transition: all 0.3s;

      &:hover {
        background: #2b6dd6;
      }
    }
  }
}
</style>
