<template>
  <view class="main">
    <div class="advertisement">
      <div class="advertisementContentBox">
        <div class="advertisementTop">
          <div class="title">
            商务活动策划
            <!-- {{ activityObj.UserdefinedType_Name || "" }} -->
          </div>
        </div>

        <scroll-view class="shopList" scroll-x>
          <div
            :style="{
              width: activityShopList.length * 160 + 'rpx',
              height: '100%',
              whiteSpace: 'noWrap',
            }"
          >
            <div
              class="shopItem"
              v-for="(item, index) in activityShopList"
              :key="index"
              @click.stop="handleGoShopDetail(item)"
            >
              <div class="shopItemImg">
                <div class="imgBox">
                  <image
                    class="shopImg"
                    :src="
                      item.IMAGE_PATH || '/static/images/home/defultImg.png'
                    "
                  />
                </div>
                <text class="discountedPrice"
                  >¥{{ item.bigNumber || "" }}.{{
                    item.smallNumber || "00"
                  }}</text
                >
              </div>
            </div>
          </div>
        </scroll-view>
      </div>

      <div class="advertisementContentBox">
        <div class="advertisementTop">
          <div class="title">
            团建
            <!-- {{ activityObj.UserdefinedType_Name || "" }} -->
          </div>
        </div>

        <scroll-view class="shopList" scroll-x>
          <div
            :style="{
              width: activityShopList.length * 160 + 'rpx',
              height: '100%',
              whiteSpace: 'noWrap',
            }"
          >
            <div
              class="shopItem"
              v-for="(item, index) in activityShopList"
              :key="index"
              @click.stop="handleGoShopDetail(item)"
            >
              <div class="shopItemImg">
                <div class="imgBox">
                  <image
                    class="shopImg"
                    :src="
                      item.IMAGE_PATH || '/static/images/home/defultImg.png'
                    "
                  />
                </div>
                <text class="discountedPrice"
                  >¥{{ item.bigNumber || "" }}.{{
                    item.smallNumber || "00"
                  }}</text
                >
              </div>
            </div>
          </div>
        </scroll-view>
      </div>

      <div class="advertisementContentBox">
        <div class="advertisementTop">
          <div class="title">
            茶歇
            <!-- {{ activityObj.UserdefinedType_Name || "" }} -->
          </div>
        </div>

        <scroll-view class="shopList" scroll-x>
          <div
            :style="{
              width: activityShopList.length * 160 + 'rpx',
              height: '100%',
              whiteSpace: 'noWrap',
            }"
          >
            <div
              class="shopItem"
              v-for="(item, index) in activityShopList"
              :key="index"
              @click.stop="handleGoShopDetail(item)"
            >
              <div class="shopItemImg">
                <div class="imgBox">
                  <image
                    class="shopImg"
                    :src="
                      item.IMAGE_PATH || '/static/images/home/defultImg.png'
                    "
                  />
                </div>
                <text class="discountedPrice"
                  >¥{{ item.bigNumber || "" }}.{{
                    item.smallNumber || "00"
                  }}</text
                >
              </div>
            </div>
          </div>
        </scroll-view>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activityShopList: [],
    };
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: #f2f4f5;
  padding: 32rpx;

  .advertisement {
    width: 100%;
    border-radius: 16rpx;
    margin-top: 24rpx;
    box-sizing: border-box;
    padding: 2rpx;

    .advertisementContentBox {
      width: 100%;
      height: 100%;
      background: #fff;
      // 真的有个空格！！！
      background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/Special Offers.png");
      background-repeat: no-repeat;
      border-radius: 16rpx;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 16rpx 22rpx;
      margin-bottom: 32rpx;

      .advertisementTop {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 28rpx;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
          color: #181716;
          .titleImg {
            width: 112rpx;
            height: 36rpx;
          }
        }

        .moreBox {
          display: flex;
          align-items: center;

          .moreText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #8b8280;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }

          .rightIcon {
            width: 24rpx;
            height: 24rpx;
            margin-left: 4rpx;
          }
        }
      }

      .advertisementTopUnionMall {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          font-size: 26rpx;
          font-weight: 600;
          color: #181716;
        }

        .moreBox {
          display: flex;
          align-items: center;

          .moreText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #8b8280;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }

          .rightIcon {
            width: 24rpx;
            height: 24rpx;
            margin-left: 4rpx;
          }
        }
      }

      .UnionMallShopList {
        width: 100%;
        margin-top: 24rpx;
        height: 80px;
        display: flex;
        align-items: center;

        .leftSortBox {
          width: 50%;
          background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
          border-radius: 16rpx;
          box-sizing: border-box;
          padding: 12rpx 24rpx;

          .titleTop {
            .title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 32rpx;
              color: #130f05;
              line-height: 44rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }

        .rowBox {
          width: 25%;
          height: 144rpx;

          // width: 96rpx;
          // height: 154rpx;
          // display: inline-block;
          // box-sizing: border-box;

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;

          .imgBox {
            width: 96rpx;
            display: flex;
            justify-content: center;

            .itemImgBox {
              width: 96rpx;
              height: 96rpx;
              border-radius: 50%;
              background: #fff;
              padding: 2rpx;
              box-sizing: border-box;
              overflow: hidden;
              margin-bottom: 16rpx;

              .img {
                width: 96rpx;
                height: 100%;
              }
            }
          }

          .itemName {
            width: 96rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #020e1a;
            line-height: 32rpx;
            text-align: center;
            font-style: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .shopList {
        width: 100%;
        margin-top: 24rpx;
        height: 80px;

        .shopItem {
          width: 136rpx;
          display: inline-block;
          margin-right: 40rpx;

          .shopItemImg {
            width: 100%;
            position: relative;

            .imgBox {
              width: 136rpx;
              height: 136rpx;
              border-radius: 50%;
              overflow: hidden;

              .shopImg {
                width: 100%;
                height: 100%;
              }
            }

            .discountedPrice {
              background: linear-gradient(90deg, #fd3404 0%, #fe7e1f 100%);
              padding: 4rpx 12rpx;
              font-family: DINAlternate, DINAlternate;
              font-weight: bold;
              font-size: 28rpx;
              color: #ffffff;
              line-height: 32rpx;
              font-style: normal;
              border-radius: 16rpx;
              position: absolute;
              bottom: -12rpx;
              left: 50%;
              transform: translateX(-50%);
            }
          }

          .price {
            width: 100%;
            display: inline-block;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #756c6a;
            line-height: 36rpx;
            text-align: center;
            font-style: normal;
            text-decoration-line: line-through;
            margin-top: 14rpx;
          }
        }
      }
    }

    .advertisementContentBox ::-webkit-scrollbar {
      display: none;
    }

    .sortBox {
      width: 100%;
      display: flex;
      align-items: flex-start;
      // align-items: center;
      justify-content: space-between;

      .leftSortBox {
        background: linear-gradient(180deg, #ffe8e8 0%, #ffffff 100%);
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 12rpx 24rpx;
        margin-right: 16rpx;
        min-width: 320rpx;

        .titleTopSort {
          width: 100%;

          .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: #130f05;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;

            .red {
              color: #ff3e3e;
            }
          }
        }

        .notice {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #716f69;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
        }

        .shopList {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 16rpx;

          .shopItem {
            width: 128rpx;
            height: 128rpx;

            .shopImg {
              width: 128rpx;
              height: 128rpx;
            }
          }
        }
      }

      .rightItem {
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 12rpx 24rpx;
        min-width: 160rpx;

        .titleTopSort {
          width: 100%;

          .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: #130f05;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;

            .red {
              color: #ff8000;
            }
          }
        }

        .notice {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #716f69;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
        }

        .shopItem {
          width: 128rpx;
          height: 128rpx;
          margin-top: 16rpx;

          .shopImg {
            width: 128rpx;
            height: 128rpx;
          }
        }
      }

      .bg2 {
        background: linear-gradient(180deg, #ffefe0 0%, #ffffff 100%);
      }

      .bg3 {
        background: linear-gradient(180deg, #d8f9de 0%, #ffffff 100%);
      }
    }
  }
}
</style>