<template>
   
  <view
    class="container 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">
        <!-- @click="previewImage(selectGoodsData.productImages)" -->
        <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
            v-if="
              selectGoodsData.isVipPrice == 1 &&
              selectGoodsData.vipPrice != 0 &&
              selectGoodsData.vipPrice != null
            "
          >
            <text style="color: #e97512; font-weight: bold;font-size: 28rpx !important;"
              >￥{{ selectGoodsData.vipPrice.toFixed(2) }}</text
            >
            <text style="color: #fa2d12; font-size:22rpx !important; margin-left: 4px"
              >VIP到手价</text
            >
            <!-- <text style="color: #8a8a8a;font-size: 10px;margin-left: 4px;font-weight: bold;text-decoration: line-through;">￥{{(selectGoodsData.price).toFixed(2)}}</text> -->
          </text>

          <text
            v-else-if="
              selectGoodsData.activityPrice && selectGoodsData.activityPrice > 0
            "
          >
            <text style="color: #e97512; font-weight: bold;font-size: 28rpx !important;"
              >￥{{ selectGoodsData.activityPrice.toFixed(2) }}</text
            >
            <text style="color: #613804; font-size: 22rpx !important; margin-left: 4px;"
              >活动价</text
            >
            <!-- <text style="color: #8a8a8a;font-size: 10px;margin-left: 4px;font-weight: bold;text-decoration: line-through;">￥{{(selectGoodsData.price).toFixed(2)}}</text> -->
          </text>

          <text v-else style="color: #e97512;font-size: 28rpx !important; font-weight: bold">
            ￥{{ Number(selectGoodsData.price).toFixed(2) }}</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
            style="width: 100%;"
              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="" style="align-items: center">
                  <!-- <text style="color: #999; text-decoration: line-through; margin-right: 20rpx;"
													v-if="slotProps.row.activityPrice > 0 && slotProps.row.activityPrice < slotProps.row.price" >￥{{slotProps.row.price}}</text>
					  <view class="price" style="color: #3AB3AE "
					    >￥{{ slotProps.row.activityPrice?slotProps.row.activityPrice:slotProps.row.price }}</view
					  ></view
					> -->
                  <text v-html="getPrice(slotProps)"></text>

                  <text
                    v-if="
                      slotProps.row.isVipPrice == 1 &&
                      slotProps.row.vipPrice != 0 &&
                      slotProps.row.vipPrice != null
                    "
                    style="
                      z-index: 10;

                      margin-left: 10rpx;

                      font-size: 24rpx;
                      color: #f94f04;

                      font-weight: bold;
                    "
                    >VIP优惠</text
                  >
                </view>
              </view>
            </view>

            <!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
          </template>
        </common-list>

        <view class="goods_nav_box">
          <uni-goods-nav
            :fill="true"
            :options="buyOptions"
            :button-group="customButtonGroup1"
            @click="onHandleClickBuy"
            @buttonClick="onHandleClickBuy"
          />
        </view>
        <!-- <view>
          <text @click="handleClickClose">取消</text>
          <text @click="handleClickGoBuy">立即购买</text>
        </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", // 是否复读
    "type", // 页面类型
  ],
  data() {
    return {
      show: false,
    };
  },
  onLoad() {},
  onHide() {
    // this.showSearchList = false
    // this.searchList = []
  },
  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) {
            // console.log(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 "@/style/mixin.scss";

.goods_item {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // margin-bottom: 20rpx;
  padding: 10rpx 20rpx;
  border: 2rpx solid #fff;
  border-radius: 10rpx;
}

.title {
  box-sizing: border-box;
  // font-weight: bold;
  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%);
  // padding: 10rpx 20rpx;
  box-sizing: border-box;
  // height: 100rpx;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  float: left;

  .name {
    font-size: 26rpx;
    // font-weight: 600;
    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 {
  // border-bottom: none;
  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;
  // margin-top: 20rpx;
  // padding: 40rpx 30rpx;
  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;
      // line-height: 40rpx;
      //     display: flex;
      // align-items: center;
      margin-top: 80rpx;
      margin-bottom: 0rpx;
      // padding: 20rpx;
      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-bottom: none;

    border: none !important;
    box-shadow: none !important;
  }

  .product_image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
    background-color: #f5f5f5;
    // margin: 0 auto;
  }
}

/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;
  }
}

.title_list {
  margin-bottom: 20rpx;
}
</style>
