<!--
  @description: 商品详情页-同类热卖
  @Modifier：杨胜国
  @routerPath:
  @date：  2021/06/02-14:00
-->
<template>
  <div class="">
    <section class="goods_tab middle_width1190">
      <div class="goods_left">
        <p class="goods_t">
          同类热卖商品
        </p>
        <div id="box_i">
          <div v-if="sameList.length>0">
            <dl v-for="item in sameList" :key="item.id" class="same_goods" style="cursor:pointer;" @click="addDatailClick(item)">
              <dt>
                <el-image :src="item.productPicture" />
              </dt>
              <dd>
                <p v-if="isLogin" class="same_price">
                  ￥{{ item.commodityPrice }}
                </p>
                <p v-if="!isLogin" class="same_price">
                  市场价：￥{{ item.marketPrice }}
                </p>
                <p class="same_name goods_item_title_two">
                  {{ item.productName }}
                </p>
              </dd>
              <!-- <dd class="sales_number">
                <p>销量：{{ item.salesQuantity ? item.salesQuantity:0 }}</p>
                <p class="join_button cursor" @click="addToCarHot(item)">加入购物车</p>
              </dd> -->
            </dl>
          </div>
          <div v-else style="text-align:center">
            暂无数据
          </div>
        </div>
      </div>
      <div class="goods_right">
        <el-tabs v-model="goodActives" type="border-card">
          <el-tab-pane label="商品详情" name="first">
            <div
              class="scroll_div"
              v-html="goodsInfo.productDescription"
            >
              {{ goodsInfo.productDescription }}
            </div>
          </el-tab-pane>
          <el-tab-pane label="规格参数" name="second">
            <div class="has_table" v-html="goodsInfo.specs">
              {{ goodsInfo.specs }}
            </div>
          </el-tab-pane>
          <el-tab-pane label="包装清单" name="third">
            {{ goodsInfo.ware }}
          </el-tab-pane>
          <el-tab-pane label="售后服务" name="fourth">
            {{ goodsInfo.service }}
          </el-tab-pane>
        </el-tabs>
      </div>
    </section>
  </div>
</template>

<script>
// api
export default {
  name: 'SimilarHotDetail',
  components: {
  },
  props: {
    sameList: {
      type: Array,
      default: function() {
        return []
      }
    },
    goodActive: {
      type: String,
      default: ''
    },
    isLogin: {
      type: Boolean,
      default: false
    },
    goodsInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      goodActives: this.goodActive
    }
  },
  methods: {
    // 跳转同类热卖详情
    addDatailClick(item) {
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id: item.id }
      })
      // window.open(routes.href, '_blank')
    }
  }
}
</script>

<style scoped lang="less">
.goods_tab {
  display: flex;
  // 同类热卖
  .goods_left {
    width: 22%;
    margin-right: 12px;
    min-height: 680px;
    color: #666;
    .goods_t {
      margin-bottom: 5px;
      background-color: #f5f7fa;
      border-bottom: 1px solid #e4e7ed;
      text-align: center;
      line-height: 40px;
      text-indent: 20px;
      cursor:pointer;
    }
    .same_goods {
      margin-bottom: 8px;
      border-top: 2px solid rgba(242, 242, 242, 1);
      &:nth-of-type(1) {
        border-top: none;
      }
      dt {
        margin: 20px auto;
        width: 155px;
        height: 161px;
        img {
          display: block;
          margin: 0 auto;
        }
      }
      dd {
        padding-left: 25px;
      }
      .same_price {
        color: @orange;
        font-size: 14px;
      }
      .same_name {
        width: 95%;
        margin: 10px 0;
        font-size: 12px;
        color: #999;
        height: 36px;
      }
      .sales_number {
        display: flex;
        justify-content: space-between;
        padding-right: 20px;
      }
      .join_button {
        width: 115px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background: @orange;
        border: none;
        color: #ffffff;
        font-size: 12px;
        font-weight: bold;
        margin-top: -6px;
      }
    }
  }
  #box_i {
    margin-top: -6px;
    dl {
      border: 1px solid #e4e7ed;
      padding-bottom: 3px;
    }
  }
  .goods_right {
    flex: 1;
  }
}
/deep/.goods_right .has_table {
  padding-left: 1px;
  .Ptable {
    td {
      border: 1px solid #eeeeee;
      padding: 10px 15px;
    }
    td.tdTitle {
      width: 25%;
      text-align: center;
      padding: 10px 5px;
    }
    th.tdTitle {
      font-weight: 600;
      padding: 10px 0;
      font-size: 16px;
    }
  }
}
/deep/.goods_right .el-tabs {
  width: 100%;
}
/deep/.goods_right .el-tabs__content {
  max-width: 963px;
  >div {
    width: 100%;
    overflow: hidden;
  }
}
/deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
  color: #fd6b2b !important;
  background-color: #FFF !important;
  border-right-color: #DCDFE6 !important;
  border-left-color: #DCDFE6 !important;
}
/deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
  color: #fd6b2b !important;
}
</style>
