<template>
	<view class="many-goods-list">
<!--		<scroll-view scroll-x="true" :scroll-into-view="'a' + cateIndex">-->
      <view class="scroll">
			<view
				v-for="(item, index) in value.list"
				class="scroll-item"
				:class="{ active: index == cateIndex }"
				:id="'a' + index"
				:key="index"
				@click="changeCateIndex(item, index)"
			>
				<view class="item-wrap">
					<view class="split-line" v-if="index > 0"></view>
					<view class="cate">
						<view class="name">{{ item.title }}</view>
						<view class="desc" :class="{ 'color-base-bg': index == cateIndex && item.desc }">{{ item.desc }}</view>
					</view>
				</view>
			</view>
      </view>
<!--		</scroll-view>-->
		<diy-goods-list v-if="goodsValue && (goodsValue.sources ==='category' || goodsValue.sources ==='diy')" :value="goodsValue" ref="diyGoodsList"></diy-goods-list>
        <view class="list-wrap" v-if="goodsValue && (goodsValue.sources =='point')">
          <view class="goods-list double-column" v-if="goodsList.length">
            <view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index">
              <view class="goods-img" @click="toDetail(item)">
                <image :src="goodsImg(item.image)" mode="widthFix" @error="imgError(index)"></image>
              </view>
              <view class="info-wrap">
                <view class="name-wrap">
                  <view class="goods-name" @click="toDetail(item)">{{ item.name }}</view>
                </view>
                <view class="lineheight-clear">
                  <view class="discount-price">
                    <text class="unit ">{{ item.point }}</text>
                    <text class="unit  font-size-tag">兑换券</text>
                    <block v-if="item.price > 0 && item.pay_type > 0">
                      <text class="unit  font-size-tag">+</text>
                      <text class="unit  font-size-tag">{{ $lang('common.currencySymbol') }}</text>
                      <text class="price  font-size-toolbar" >{{ parseFloat(item.price).toFixed(2).split(".")[0] }}</text>
                      <text class="unit  font-size-tag">.{{ parseFloat(item.price).toFixed(2).split(".")[1] }}</text>
                    </block>
                  </view>
                </view>
                <view class="pro-info"  v-if="item.stock_show">
                  <view class="font-size-activity-tag color-tip">库存{{ item.stock }}</view>
                  <view class="sale font-size-activity-tag color-tip" @click="toDetail(item)">
                    <!-- <button type="primary" size="mini">立即兑换</button> -->
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="empty" v-if="goodsList.length == 0">
            <ns-empty :isIndex="false" text="暂无兑换券商品"></ns-empty>
          </view>
        </view>
        <view v-if="goodsValue && (goodsValue.sources =='jianlou')">
          <view class="goods-list" v-if="list.length > 0">
            <view class="goods-block" v-for="(item,index) in list" :key="index">
              <view class="left">
                <image class="goods-image" :src="$util.img(item.goods_image)" mode="widthFix"></image>
                <view class="goods-status" v-if="parseInt(item.status) === 2">正在销售</view>
                <view class="goods-status" v-else>{{ status_text[item.status] }}</view>
              </view>
              <view class="right">
                <view class="goods-title">{{ item.goods_name }}</view>
                <view class="goods-sell">
                  <view class="goods-sell-item">销售商：{{ item.seller_nickname }}</view>
                  <view class="goods-sell-item">采购数量：{{ item.total }}件</view>
                </view>
                <view class="goods-bottom">
                  <view class="price">
                    <view class="price-item">单价:￥{{ item.market_price }}/{{ item.unit || '件' }}</view>
                    <view class="price-item">采购价:<text class="purchase_price">￥{{ item.price }}</text></view>
                  </view>
                  <view class="buy-button">
                    <view class="buy-btn" @click="$util.redirectTo('/pages_promotion/futures/details', { id: item.id }, 'redirectTo');">前去采购</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-else>
            <ns-empty :isIndex="false" :text="msg"></ns-empty>
          </view>
      </view>
  </view>
</template>

<script>
export default {
	name: 'diy-many-goods-list',
	props: {
		value: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			cateIndex: 0, // 当前选中的分类id
			goodsValue: null, // 商品列表数据
      goodsList: [],
      list : [],
      msg: ''
		};
	},
	created() {
		this.changeCateIndex(this.value.list[0], 0, true);
    this.getData()
    this.getList()
	},
	methods: {
		changeCateIndex(item, index, isFirst) {
			this.cateIndex = index;
			this.goodsValue = {
				sources: item.sources,
				categoryId: item.categoryId,
				categoryName: item.categoryName,
				goodsId: item.goodsId,
				componentBgColor: this.value.componentBgColor,
				componentAngle: this.value.componentAngle,
				topAroundRadius: this.value.topAroundRadius,
				bottomAroundRadius: this.value.bottomAroundRadius,
				elementBgColor: this.value.elementBgColor,
				elementAngle: this.value.elementAngle,
				topElementAroundRadius: this.value.topElementAroundRadius,
				bottomElementAroundRadius: this.value.bottomElementAroundRadius,
				count: this.value.count,
				nameLineMode: this.value.nameLineMode,
				template: this.value.template,
				style: this.value.style,
				ornament: this.value.ornament,
				sortWay: this.value.sortWay,
				saleStyle: this.value.saleStyle,
				tag: this.value.tag,
				btnStyle: this.value.btnStyle,
				goodsNameStyle: this.value.goodsNameStyle,
				theme: this.value.theme,
				priceStyle: this.value.priceStyle,
				slideMode: this.value.slideMode,
				imgAroundRadius: this.value.imgAroundRadius,
				cartEvent: this.value.cartEvent
			};

			// 如果是第一次加载，不需要执行下面代码
			if (isFirst) return;
			// this.$refs.diyGoodsList.goodsValue = this.goodsValue;
			// this.$refs.diyGoodsList.getGoodsList();
		},
    //获取兑换券商品详情
    getData(mescroll) {
      this.$api.sendRequest({
        url: '/pointexchange/api/goods/page',
        data: {
          // page_size: mescroll.size,
          // page: mescroll.num,
          type: 1,
          // keyword: this.keyword,
          // category_id: this.categoryId,
          // min_point: this.minPoint,
          // max_point: this.maxPoint,
          // is_free_shipping: (this.isFreeShipping ? 1 : 0),
          // order: this.order,
          // sort: this.sort,
          // coupon: this.coupon
        },
        success: res => {
          let newArr = [];
          let msg = res.message;
          if (res.code == 0 && res.data) {
            newArr = res.data.list;
          } else {
            this.$util.showToast({
              title: msg
            });
          }
          // mescroll.endSuccess(newArr.length);
          //设置列表数据
          // if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
          this.goodsList = this.goodsList.concat(newArr); //追加新数据
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        },
        fail() {
          //联网失败的回调
          // mescroll.endErr();
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        }
      });
    },
    goodsImg(imgStr) {
      let imgs = imgStr.split(',');
      return imgs[0] ? this.$util.img(imgs[0], {
        size: 'mid'
      }) : this.$util.getDefaultImage().goods;
    },
    imgError(index) {
      this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
    },
    //跳转至详情页面
    toDetail(item) {
      this.$util.redirectTo('/pages_promotion/point/detail', {
        id: item.id
      });
    },
    // 获取商品列表
    getList(mescroll) {
      this.$api.sendRequest({
        url: '/futures/api/futures/list',
        data: {
          // page: mescroll.num,
          // page_size: mescroll.size,
          status: 'miaosha',
        },
        success: res => {
          if(parseInt(res.code) === 0){
            // mescroll.endSuccess(Object.keys(res.data.list).length);

            //设置列表数据
            // if (parseInt(mescroll.num) === 1){
            //   this.list = []; //如果是第一页需手动制空列表
            // }

            this.list = this.list.concat(res.data.list); //追加新数据
            // this.end_time = parseInt(res.data.end_time);
            // 开启倒计时
            // this.countDown();
          }else {
            this.msg = res.message;
          }

          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        },
        fail: res => {
          // mescroll.endErr();
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
scroll-view {
	width: 100%;
	white-space: nowrap;
	box-sizing: border-box;
	padding: 40rpx 20rpx;

	.scroll-item {
		display: inline-block;
		text-align: center;
		vertical-align: top;

		.item-wrap {
			display: flex;
			align-items: center;
		}

		.split-line {
			display: inline-block;
			width: 1rpx;
			height: 30rpx;
			background-color: #e5e5e5;
			margin: 0 35rpx;
		}

		&.active {
			.name {
				font-weight: bold;
			}

			.desc {
				color: #ffffff;
				border-radius: 20rpx;
			}
		}

		.name {
			font-size: 32rpx;
			color: $color-title;
			line-height: 1;
		}

		.desc {
			font-size: $font-size-tag;
			color: $color-tip;
			height: 36rpx;
			line-height: 36rpx;
			margin-top: 10rpx;
			min-width: 120rpx;
			max-width: 220rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 0 10rpx;
		}
	}
}
.scroll{
  display: flex;
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 20px 10px;
  justify-content: space-evenly;

  .scroll-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;

    .item-wrap {
      display: flex;
      align-items: center;
    }

    .split-line {
      display: inline-block;
      width: 1rpx;
      height: 30rpx;
      background-color: #e5e5e5;
      margin: 0 35rpx;
    }

    &.active {
      .name {
        font-weight: bold;
      }

      .desc {
        color: #ffffff;
        border-radius: 20rpx;
      }
    }

    .name {
      font-size: 32rpx;
      color: $color-title;
      line-height: 1;
    }

    .desc {
      font-size: $font-size-tag;
      color: $color-tip;
      height: 36rpx;
      line-height: 36rpx;
      margin-top: 10rpx;
      min-width: 120rpx;
      max-width: 220rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 10rpx;
    }
  }
}

// 商品列表单列样式
.goods-list.single-column {
  .goods-item {
    padding: 26rpx;
    background: #fff;
    margin: $margin-updown $margin-both;
    border-radius: $border-radius;
    display: flex;
    position: relative;

    .goods-img {
      width: 200rpx;
      height: 200rpx;
      overflow: hidden;
      border-radius: $border-radius;
      margin-right: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .goods-tag {
      color: #fff;
      line-height: 1;
      padding: 8rpx 12rpx;
      position: absolute;
      border-top-left-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
      top: 26rpx;
      left: 26rpx;
      font-size: $font-size-goods-tag;
    }

    .goods-tag-img {
      position: absolute;
      border-top-left-radius: $border-radius;
      width: 80rpx;
      height: 80rpx;
      top: 26rpx;
      left: 26rpx;
      z-index: 5;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .info-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .name-wrap {
      flex: 1;
    }

    .goods-name {
      font-size: $font-size-base;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      height: 68rpx;
    }

    .introduction {
      line-height: 1;
      margin-top: 10rpx;
    }

    .discount-price {
      display: inline-block;
      font-weight: bold;
      line-height: 1;
      margin-top: 16rpx;
      color: var(--price-color);
      .unit {
        margin-right: 6rpx;
      }
    }

    .pro-info {
      display: flex;
      margin-top: 16rpx;

      .delete-price {
        text-decoration: line-through;
        flex: 1;

        .unit {
          margin-right: 6rpx;
        }
      }

      &>view {
        line-height: 1;

        &:nth-child(2) {
          text-align: right;
        }
      }
    }

    .member-price-tag {
      display: inline-block;
      width: 60rpx;
      line-height: 1;
      margin-left: 6rpx;

      image {
        width: 100%;
      }
    }
  }
}

// 商品列表双列样式
.goods-list.double-column {
  display: flex;
  flex-wrap: wrap;
  margin: 0 $margin-both;
  padding-top: $margin-updown;

  .goods-item {
    flex: 1;
    position: relative;
    background-color: #fff;
    flex-basis: 48%;
    max-width: calc((100% - 30rpx) / 2);
    margin: 0 $margin-both $margin-updown 0;
    border-radius: $border-radius;

    &:nth-child(2n) {
      margin-right: 0;
    }

    .goods-img {
      position: relative;
      overflow: hidden;
      padding-top: 100%;
      border-top-left-radius: $border-radius;
      border-top-right-radius: $border-radius;

      image {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }

    .goods-tag {
      color: #fff;
      line-height: 1;
      padding: 8rpx 16rpx;
      position: absolute;
      border-bottom-right-radius: $border-radius;
      top: 0;
      left: 0;
      font-size: $font-size-goods-tag;
    }

    .goods-tag-img {
      position: absolute;
      border-top-left-radius: $border-radius;
      width: 80rpx;
      height: 80rpx;
      top: 0;
      left: 0;
      z-index: 5;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .info-wrap {
      padding: 0 26rpx 26rpx 26rpx;
    }

    .goods-name {
      font-size: $font-size-base;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-top: 20rpx;
      height: 68rpx;
    }

    .discount-price {
      display: inline-block;
      font-weight: bold;
      line-height: 1;
      margin-top: 16rpx;
      color: var(--price-color);
      .unit {
        margin-right: 6rpx;
      }
    }

    .pro-info {
      display: flex;
      margin-top: 16rpx;

      .delete-price {
        text-decoration: line-through;
        flex: 1;

        .unit {
          margin-right: 6rpx;
        }
      }

      &>view {
        line-height: 1;

        &:nth-child(2) {
          text-align: right;
        }
      }
    }

    .member-price-tag {
      display: inline-block;
      width: 60rpx;
      line-height: 1;
      margin-left: 6rpx;

      image {
        width: 100%;
      }
    }
  }
}
.goods-list{
  margin: 0 30rpx;

  .goods-block{
    --size--: calc((100vw - 100rpx) / 3);
    border-radius: 20rpx;
    background: #ffffff;
    padding: 20rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx #eeeff2;
    width: calc(100% - 40rpx);
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: var(--size--);

    .left{
      margin-right: 20rpx;
      height: var(--size--);
      width: var(--size--);
      position: relative;
      border-radius: 20rpx;
      overflow: hidden;

      .goods-image{
        max-width: 100% !important;
        max-height: 100% !important;
      }
      .goods-status{
        position: absolute;
        bottom: 0;
        width: 100%;
        background: #fc4740;
        color: #febebc;
        font-size: 24rpx;
        text-align: center;
        height: 30rpx;
        line-height: 30rpx;
      }
    }
    .right{
      width: calc((var(--size--) * 2) - 20rpx);
      display: inline-flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: flex-start;
      height: 100%;
      .goods-title{
        width: 100%;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 30rpx;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .goods-sell{
        width: 100%;
        display: inline-flex;
        height: 50rpx;
        line-height: 50rpx;
        color: #b5b7c0;
        .goods-sell-item{
          width: 50%;
          color: #b5b7c0;
          font-size: 24rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 50rpx;
        }
        .goods-sell-item:nth-of-type(1){
          text-align: left;
        }
        .goods-sell-item:nth-of-type(2){
          text-align: right;
        }
      }
      .goods-bottom{
        width: 100%;
        height: calc(var(--size--) - 100rpx);
        display: inline-flex;
        align-items: flex-end;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;

        .price{
          height: 100%;
          display: inline-flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: flex-end;
          align-items: flex-start;
          width: calc(100% - 140rpx);

          .price-item{
            width: 100%;
            color: #b5b7c0;
            font-size: 24rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 40rpx;
            line-height: 40rpx;
            .purchase_price{
              color: #fe7e79;
              font-size: 30rpx;
              font-weight: bold;
            }
          }
        }
        .buy-button{
          height: 100%;
          display: inline-flex;
          align-items: flex-end;
          justify-content: flex-end;
          .buy-btn{
            width: 140rpx;
            height: 70rpx;
            line-height: 70rpx;
            color: #fef5f5;
            background: #ff2724;
            font-size: 26rpx;
            border-radius: 100rpx;
            text-align: center;
            margin-bottom: 8rpx;
          }
        }
      }
    }
  }
}
</style>
