<template>
  <div id="goods_li">
    <img :src="$methodsTools.splitImgHost(goodsItem.mainImg)" alt="" />
    <p class="title">
      {{ goodsType === 10 ? goodsItem.configName : goodsItem.goodsName }}
    </p>
    <div class="ic_l">
      <div v-if="goodsItem.educationName" class="iy">
        {{ goodsItem.educationName }}
      </div>
      <div v-if="goodsItem.projectName" class="iy">
        {{ goodsItem.projectName }}
      </div>
      <div v-if="goodsItem.subjectName" class="iy">
        {{ goodsItem.subjectName }}
      </div>
      <div style="clear: both"></div>
    </div>
    <div class="text-ellipsis" v-if="goodsType != 10">
      <span class="price"
        >￥{{
          goodsItem.standPrice === 0 ? "免费" : goodsItem.standPrice
        }}</span
      >
      <span v-if="goodsItem.linePrice" class="line-price"
        >原价￥{{ goodsItem.linePrice }}</span
      >
    </div>
    <div style="display: flex">
      <el-button
        size="medium"
        type="primary"
        plain
        style="flex: 1"
        @click="goodsDetail(goodsItem)"
        >详情</el-button
      >
      <el-button
        size="medium"
        type="primary"
        style="flex: 5"
        @click="openStudentDialog(goodsItem)"
        >立即下单</el-button
      >
    </div>
    <studentDialog ref="studentDialog" />
  </div>
</template>

<script>
import studentDialog from "../studentDialog/index.vue";
export default {
  props: {
    goodsItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
    goodsType: {
      type: String,
      default: () => {},
    },
  },
  components: { studentDialog },
  data() {
    return {};
  },
  methods: {
    /**
     * 查看商品详情
     */
    goodsDetail(row) {
      console.log(row, "查看商品详情");
      if (this.goodsType == 10) {
        // 跳转商品包详情
        this.$router.push({
          path: "/goodsPackDetail/" + row.configId,
        });
      } else {
        // 跳转课程详情
        this.$router.push({
          path: "/goodsCourseDetail/" + row.goodsId,
        });
      }
    },
    // 立即下单（打开学员弹窗）
    openStudentDialog(row) {
      this.$refs.studentDialog.openBoxs(row);
    },
  },
};
</script>

<style lang="scss" scoped>
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}
.price {
  font-size: 18px;
  color: red;
  font-weight: bold;
  margin-right: 5px;
}
.line-price {
  font-size: 12px;
  color: #7f7f7f;
  text-decoration: line-through;
}
#goods_li {
  margin: 0px 8px 8px 0px;
  transition: all 0.2s;
  cursor: pointer;
  width: 282px;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  &:hover {
    border-color: rgb(1, 123, 255);
  }
  & > img {
    width: 264px;
    height: 155px;
    margin-bottom: 10px;
    border-radius: 4px;
  }
  & > .title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  & > .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;
    }
  }
}
</style>
