<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"
          ><text class="title_price">￥{{ selectGoodsData.activityPrice?selectGoodsData.activityPrice: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 ${
                selectGoodsData &&
                selectGoodsData.productId == slotProps.row.productId
                  ? '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" style=" color: #333;">
					￥{{ slotProps.row.activityPrice?slotProps.row.activityPrice:slotProps.row.price }}</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",
  ],
  data() {
    return {
      show: false,
    };
  },
  onLoad() {},
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    // 放大图片
    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;
  display: flex;
  align-items: center;
  justify-content: space-between;
  float: left;
  .name {
    font-size: 26rpx;
    color: #333;
  }
  .price {
    font-size: 26rpx;
    color: #aaa;
  }
}
.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;
  }
}
</style>
