<template>
  <!-- 直播结束组件 -->
  <div class="livedIsEnd">
    <div class="end">
      <p class="endTxt">直播已结束</p>
      <p class="time">
        <span>直播时长：</span>
        <span>{{endInfo.liveTime}}</span>
      </p>
      <div class="data">
        <div>
          <p>{{endInfo.watchNum}}</p>
          <p>观看</p>
        </div>
        <div>
          <p>{{endInfo.guestBookNum}}</p>
          <p>评论</p>
        </div>
        <div>
          <p>{{endInfo.likeNum}}</p>
          <p>赞</p>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="goodsList" v-if="list.length>0">
        <div class="tit">
          <span>商品列表</span>
          <span>({{list.length}})</span>
        </div>
        <div class="list">
          <div class="item" v-for="(item,index) in list" :key="index" :class="{'itemBorder':index!=list.length-1}">
            <div class="img" @click="toGoodsInfo(item)">
              <img :src="item.productImgUrl" alt />
            </div>
            <div class="info">
              <p class="name line-clamp2">{{item.productName}}</p>
              <div class="price">
                <p>
                  <span>￥</span>
                  <span>{{item.minPrice}}</span>
                </p>
                <div class="icon" @click="isLogin(item)">
                  <van-icon name="shopping-cart" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择规格弹层 -->
    <livedSelectionSpe
      v-if="showSpe"
      :show="showSpe"
      :productInfoId="itemGoods.productId"
      :minSale="itemGoods.minSale"
      :maxSale="itemGoods.maxSale"
      :goodsImg="itemGoods.goodsImg"
      :minSuggestedRetailPrice="itemGoods.minSuggestedRetailPrice"
      :maxSuggestedRetailPrice="itemGoods.maxSuggestedRetailPrice"
      :goodsLowerShelf="itemGoods.goodsLowerShelf"
      @closeSpeDia="closeSpeDia"
    ></livedSelectionSpe>
  </div>
</template>

<script type="text/ecmascript-6">
import livedSelectionSpe from "@/components/livedModel/livedSelectionSpe";
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
  props: ["updateGoods", "goodsList", "endInfo"],
  name: "",
  data() {
    return {
      list: [],
      liveId: 0,
      itemGoods: {}, //选中商品
      showSpe: false
    };
  },
  watch: {
    updateGoods() {
      this.list = this.goodsList;
    }
  },
  components: {
    livedSelectionSpe
  },
  computed: {},
  onLoad(options) {
    let params = JSON.parse(options.params);
    this.liveId = params.liveId;
  },
  created() {},
  mounted() {},
  methods: {
    // 到商品详情
    toGoodsInfo(val) {
      // 点击商品埋点
      let info={
        liveBroadcastId:Number(this.liveId),
        liveBroadcastGoodsId:Number(val.productId),
      }
      live.addLiveUserGoodsByUser(info).then(res=>{});
      let query = {
        fromLived: 1,
        liveId: this.liveId
      };
      let backPath = `/goods/${val.productId}`;
      wx.reLaunch({
        url: `../index/main?from=livedToGoodsInfo&backpath=${backPath}&params=${JSON.stringify(
          query
        )}`
      });
    },
    // 是否登录
    isLogin(val) {
      let _this = this;
      wx.getStorage({
        key: "sessionid",
        success(res) {
          _this.showSpeDia(val);
        },
        fail(res) {
          console.log("未登录------150");
          // 跳转登录页
          let backUrl = "/lived/main";
          let query = {
            liveId: _this.liveId,
            fromType: "mini"
          };
          let url = `/pages/login/main?back=${backUrl}&params=${JSON.stringify(
            query
          )}`;
          wx.navigateTo({
            url: url
          });
        }
      });
    },
    showSpeDia(val) {
      if (val.multiSpecificationFlag != 1) {
        // 不是多规格直接加入购物车
        live
          .addCart([{ productGoodsId: val.productGoodsId, qty: 1 }])
          .then(res => {
            if (res.data.code == 200) {
              wx.showToast({
                title: "加入成功",
                icon: "success"
              });
              this.showSize = false;
            } else {
              wx.showToast({
                title: res.data.msg,
                icon: "none"
              });
            }
          });
        return;
      }
      let productId = val.productId;
      this.itemGoods.productId = productId;
      wx.showLoading({
        title: "加载中..."
      });
      live.getProductInfo(productId).then(res => {
        wx.hideLoading();
        if (res.data.code == 200) {
          this.itemGoods.maxSale = Number(
            res.data.data.maxSuggestedRetailPrice
          );
          this.itemGoods.minSale = Number(
            res.data.data.minSuggestedRetailPrice
          );
          this.itemGoods.maxDiscountPrice = Number(
            res.data.data.maxDiscountPrice
          );
          this.itemGoods.minDiscountPrice = Number(
            res.data.data.minDiscountPrice
          );
          this.itemGoods.productNature = res.data.data.productNature;
          this.itemGoods.goodsLowerShelf =
            res.data.data.saleStatus != 1 ? true : false; //1 上架  0下架  true 下架
          if (
            res.data.data.productPictures &&
            res.data.data.productPictures.length > 0
          ) {
            this.itemGoods.goodsImg = DFSImg(
              res.data.data.productPictures[0].url
            );
          }
          this.showSpe = true;
        } else {
          wx.showToast({
            title: res.data.msg,
            icon: "none"
          });
        }
      });
    },
    closeSpeDia() {
      this.showSpe = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.line-clamp2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 22px;
  word-break: break-all;
}
.livedIsEnd {
  position: absolute;
  top: 20vh;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .end {
    p {
      text-align: center;
      color: #fff;
    }
    .endTxt {
      font-size: 34px;
      font-weight: bold;
    }
    .time {
      margin-top: 10px;
      font-size: 16px;
    }
    .data {
      margin-top: 20px;
      width: 70vw;
      display: flex;
      justify-content: space-around;
      align-items: center;
      & > div {
        p {
          text-align: center;
          font-size: 20px;
        }
      }
    }
    .goodsList {
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba(#000, 0.4);
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      padding: 12px;
      width: 100%;
      box-sizing: border-box;
      p,
      span {
        color: #fff;
      }
      .tit {
        font-size: 16px;
        padding: 0 4px 6px 0;
      }
      .list {
        max-height: 50vh;
        overflow-y: auto;
        .item {
          padding: 14px 4px;
          display: flex;
          .img {
            width: 100px;
            height: 100px;
            border-radius: 6px;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .info {
            flex: 1;
            height: 100px;
            margin-left: 16px;
            color: #fff;
            font-size: 16px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name {
              text-align: left;
            }
            .price {
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 18px;
              span {
                color: #ff0000;
              }
              .icon {
                font-size: 22px;
                color: #ff8181;
              }
            }
          }
        }
        .itemBorder{
          border-bottom: 0.5px solid #b8b8b8;
        }
      }
    }
  }
}
</style>