<template>
	<view class="commonPageBox commonDetailPage" style="height: auto !important;padding-bottom: 0 !important;">
		<u-popup :show="show" mode="bottom" @close="close" class="popup_box">
			<view class="popup_top">
				<view class="product_image">
				  <image
					:src="selectGoodsData.productImages"
					mode="aspectFit"
					class="goods_image"
				  ></image>
				</view>
				<view class="title">已选：{{ selectGoodsData.productName }}</view>
			</view>

			<view :class="`common_radius_box  goods_box popup_content`">
				<view class="title title_box">
					<view class="title_price" v-if="selectGoodsData.isVipPrice==1&&selectGoodsData.vipPrice!=null&&selectGoodsData.vipPrice!=0">
						￥{{selectGoodsData.vipPrice}}
						<text style=" font-weight: normal; padding-left: 15rpx; font-size: 26rpx;">VIP到手价</text>
					</view>
					<view class="title_price" v-else-if="selectGoodsData.activityPrice&&selectGoodsData.activityPrice>0">
						￥{{selectGoodsData.activityPrice}}
						<text style=" font-weight: normal; padding-left: 15rpx; font-size: 26rpx; color: #999;">活动价</text>
					</view>
					<text class="title_price" v-else>
						￥{{selectGoodsData.price}}
					</text>
					<u-icon
					name="close"
					color="#333"
					size="18"
					@click="close"
					style="display: inline-block"
					></u-icon>
				</view>
				<view class="title title_list">
					<text>商品列表（{{ goodsList.length }}）</text>
				</view>

				<common-list
				  imgUrl="url"
				  isNoIcon
				  imgMode="aspectFit"
				  defaultUrl=""
				  :isCondition="true"
				  :dataList="goodsList"
				  @hancleClick="selectGoods"
				  label="title"
				>
				  <template slot="labelSlot" slot-scope="slotProps">
					<!-- isSelectGoods -->
					<view
					  class="related_courses_name"
					  :class="`goods_item ${
					   (!isFudu &&
					      selectGoodsData &&
					      selectGoodsData.productId == slotProps.row.productId) ||
					    (isFudu &&
					      selectGoodsData.productName == slotProps.row.productName)
					      ? 'isSelectGoods color_shandow'
					      : ''
					  }`"
					>
					  <view class="image_box" style="margin-right: 10rpx">
						<image
						  :src="slotProps.row.productImages"
						  mode="aspectFit"
						  class="goods_image"></image>
					  </view>

					  <view :class="`goods_info `">
						<view class="name">{{ slotProps.row.productName }}</view>
						<view class="price">
							<text v-html="getPrice(slotProps)"></text>
							
							<text class="goods_text" v-if="slotProps.row.isVipPrice==1&&slotProps.row.vipPrice!=null&&slotProps.row.vipPrice!=0">
								VIP优惠
							</text>
						</view>
					  </view>
					</view>
				  </template>
				</common-list>

				<view class="goods_nav_box">
				  <uni-goods-nav
					:fill="true"
					:options="buyOptions"
					:button-group="customButtonGroup1"
					@click="onHandleClickBuy"
					@buttonClick="onHandleClickBuy"
				  />
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: [
    "goodsList",
    "label",
    "isCondition",
    "imgUrl",
    "imgMode",
    "className",
    "col",
    "defaultUrl",
    "isScroll",
    "selectGoodsData",
    "customButtonGroup1",
    "buyOptions", "isFudu", // 是否复读
  ],
  data() {
    return {
      show: false,
    };
  },
  onLoad() {},
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
	  getPrice(slotProps) {
		if (
		  Number(slotProps.row.isVipPrice) === 1 &&
		  Number(slotProps.row.vipPrice) > 0
		) {
		  return `
			<text style="color: #e97512; font-size: 28rpx; font-weight: bold;">
			  ￥${Number(slotProps.row.vipPrice).toFixed(2)}
			</text>
			<text
			  style="color: #8a8a8a; font-size: 22rpx; margin-left: 4px; font-weight: bold; text-decoration: line-through;"
			>
			  ￥${Number(slotProps.row.price).toFixed(2)}
			</text>
			`;
		} else if (Number(slotProps.row.activityPrice) > 0) {
		  return `
			<text style="color: #e97512; font-size: 28rpx; font-weight: bold;">
			  ￥${Number(slotProps.row.activityPrice).toFixed(2)}
			</text>
			<text
			  style="color: #8a8a8a; font-size: 22rpx; margin-left: 4px; font-weight: bold; text-decoration: line-through;"
			>
			  ￥${Number(slotProps.row.price).toFixed(2)}
			</text>
		  `;
		} else {
		  return `<span style="color: #e97512;font-size: 28rpx;font-weight: bold;">
			￥${Number(slotProps.row.price).toFixed(2)}</span>
		  `;
		}
	},
    // 放大图片
    previewImage(url) {
      console.log(url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
			  
          },
        },
      });
    },
    close() {
      this.show = false;
    },
    selectGoods(data) {
      this.$emit("selectGoods", data);
    },
    open() {
      this.show = true;
    },
    gotoDetail(v) {
      this.$emit("hancleClick", v);
    },
    onHandleClickBuy() {
      this.$emit("selectGoodsData", this.selectGoodsData);
      this.$emit("onHandleClickBuy");
    },
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },

  components: {},
};
</script>

<style lang="scss" scoped>
@import '@/static/mixin.scss';
.goods_item {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 20rpx;
  border: 2rpx solid #fff;
  border-radius: 10rpx;
}
.title {
  box-sizing: border-box;
  margin-bottom: 40rpx;
  padding-left: 20rpx;
}
.image_box {
  width: 70rpx;
  height: 70rpx;
  float: left;
  background-color: #f5f5f5;
}

.goods_image {
  width: 100%;
  height: 100%;
}
.goods_info {
  width: calc(100%);
  box-sizing: border-box;
  float: left;
  .name {
    font-size: 26rpx;
    color: #333;
	line-height: 36rpx;
  }
  .price {
    font-size: 30rpx;
    color: #aaa;
	display: flex;
	align-items: center;
	margin-top: 5rpx;
  }
}
.isSelectGoods {
  color: $themeColor !important;
  .name {
    color: $themeColor !important;
  }
  .price {
    color: $themeColor !important;
  }
  border: 2rpx solid $themeColor;
  border-radius: 10rpx;
}
/deep/.list_item {
  padding: 10rpx 0 !important;
  padding-right: 0 !important;
}
.goods_image {
  width: 100%;
  height: 100%;
}
.curriulum_box {
  margin-top: 20rpx;
  width: 100%;

  .curriulum_title_box {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    background-color: #fff;

    .curriulum_title {
      width: calc(100% - 80rpx);

      font-size: 32rpx;
      line-height: 40rpx;
      padding: 20rpx;
      box-sizing: border-box;
    }
  }
}

.goods_box {
  background-color: #fff;
  box-sizing: border-box;
  width: 100%;

  .curriulum_title_box {
    width: calc(100%) !important;
    padding-bottom: 20rpx;
    background-color: #fff;

    .curriulum_title {
      width: calc(100%);
      font-weight: 600;
      font-size: 34rpx;
      margin-top: 80rpx;
      margin-bottom: 0rpx;
      box-sizing: border-box;
    }
  }
}
.popup_box {
  padding-top: 30rpx;

  background-color: transparent;
  .popup_top {
    display: flex;
    align-items: center;
    color: #fff;
    margin-bottom: 20rpx;
    padding: 0 20rpx;
    .title {
      margin-bottom: 0;
      font-size: 30rpx;
      font-weight: 600;
    }
  }
  .popup_content {
    padding-bottom: 140rpx;
  }
  /deep/.list_item {
    border: none !important;
    box-shadow: none !important;
  }

  .product_image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
    background-color: #f5f5f5;
  }
}
/deep/.u-popup__content {
  background-color: transparent !important;
}
/deep/.u-popup__content__close {
  color: #fff !important;
}
.title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0;
  .title_price {
    color: #ef1224;
    font-size: 40rpx;
    font-weight: 700;
  }
}
.line_text{
	text-decoration: line-through;
	font-size: 24rpx;
	padding: 0 20rpx;
	color: #999;
}
.goods_price{
	color: #ff1f00;
	font-weight: bold;
}
.goods_text{
	font-size: 22rpx;
	color: #ff1f00;
	font-weight: bold;
}
/deep/.titleItem .related_courses_name{
	width: calc(100%) !important;
}
</style>
