<template>
  <view class="service-grid">
    <view class="service-item-box">
      <view
        class="service-item"
        v-if="index % 2 == 0"
        v-for="(item, index) in services"
        :key="services.id"
        @click="onServiceClick(item)"
      >
        <view class="imageBox">
          <image
            :src="item.photo[0]"
            v-if="item.photo && item.photo.length != 0"
            mode="widthFix"
            class="service-image"
            lazy-load
          ></image>
          <view class="distance">
            <image
              class="position"
              src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/056d3548-9a6d-4ca7-8398-92078cfc47ab"
            />
            {{ item.distance.toFixed(2) }}km
          </view>
        </view>

        <text class="service-tag">{{
          item.server_kind == 1 ? "到家" : item.server_kind == 2 ? "到店" : item.server_kind == 3 ? "到店到家" : ""
        }}</text>
        <view class="service-info">
          <view class="service-title">
            <image
              class="service-title-type"
              mode="widthFix"
              src="@/static/images/shop/pintuan/group.png"
              v-if="item.team_buy && Object.keys(item.team_buy).length != 0"
            ></image>
            <text class="service-title-text">
              {{ item.title }}
            </text>
          </view>
          <view class="service-row">
            <view
              class="service-price"
              v-if="item.team_buy && Object.keys(item.team_buy).length != 0"
            >
              <text class="price-symbol">拼团价：¥</text>
              <text
                class="price-value"
                :style="{
                  'font-size': `${formatPriceSize(
                    item.team_buy.price,
                    28,
                    5
                  )}rpx`,
                }"
                >{{ item.team_buy.price }}</text
              >
            </view>
            <view class="service-price" v-else>
              <!-- 有券时显示券后价 -->
              <view v-if="item.hasCoupon" class="coupon-wrapper">
                <text class="coupon-label">券后</text>
                <text class="price-symbol num_regular_text">¥</text>
                <text class="price-value coupon-price">{{ item.coupon_price }}</text>
                <!-- 显示原价划线就取消注释 -->
                <!-- <text class="line-price original-price">¥{{ item.server_price }}</text> -->
              </view>
              <!-- 无券时显示原价 -->
              <view v-else class="price-wrapper">
                <text class="price-symbol num_regular_text">¥</text>
                <text class="price-value num_regular_text">{{
                  item.server_price
                }}</text>
              </view>
            </view>
            <text class="service-sales"
              >销量
              <text class="num_regular_text">{{ item.sales_num }}</text>
            </text>
          </view>
          <view class="service-shop" v-if="item.server_kind == 2">
            <text class="shop-text text-overflow-1">{{ item.shop_name }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="service-item-box">
      <view
        v-if="index % 2 == 1"
        class="service-item"
        v-for="(item, index) in services"
        :key="services.id"
        @click="onServiceClick(item)"
      >
        <view class="imageBox">
          <image
            :src="item.photo[0]"
            v-if="item.photo && item.photo.length != 0"
            mode="widthFix"
            class="service-image"
            lazy-load
          ></image>
          <view class="distance">
            <image
              class="position"
              src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/056d3548-9a6d-4ca7-8398-92078cfc47ab"
            />
            {{ item.distance.toFixed(2) }}km
          </view>
        </view>
        <text class="service-tag">{{
          item.server_kind == 1 ? "到家" : item.server_kind == 2 ? "到店" : item.server_kind == 3 ? "到店到家" : ""
        }}</text>
        <view class="service-info">
          <view class="service-title">
            <image
              class="service-title-type"
              mode="widthFix"
              src="@/static/images/shop/pintuan/group.png"
              v-if="item.team_buy && Object.keys(item.team_buy).length != 0"
            ></image>
            <text class="service-title-text">
              {{ item.title }}
            </text>
          </view>
          <view class="service-row">
            <view
              class="service-price"
              v-if="item.team_buy && Object.keys(item.team_buy).length != 0"
            >
              <text class="price-symbol">拼团价：¥</text>
              <text
                class="price-value num_regular_text"
                :style="{
                  'font-size': `${formatPriceSize(
                    item.team_buy.price,
                    28,
                    5
                  )}rpx`,
                }"
                >{{ item.team_buy.price }}</text
              >
            </view>
            <!-- 非拼团商品：展示券后价或原价 -->
            <view class="service-price" v-else>
              <!-- 有券时显示券后价 -->
              <view v-if="item.hasCoupon" class="coupon-wrapper">
                <text class="coupon-label">券后</text>
                <text class="price-symbol num_regular_text">¥</text>
                <text class="price-value coupon-price">{{ item.coupon_price }}</text>
                <!-- 显示原价划线就取消注释 -->
                <!-- <text class="line-price original-price">¥{{ item.server_price }}</text> -->
              </view>
              <!-- 无券时显示原价 -->
              <view v-else class="price-wrapper">
                <text class="price-symbol num_regular_text">¥</text>
                <text class="price-value num_regular_text">{{
                  item.server_price
                }}</text>
              </view>
            </view>
            <text class="service-sales"
              >销量
              <text class="num_regular_text">{{ item.sales_num }}</text></text
            >
          </view>
          <view class="service-shop" v-if="item.server_kind == 2">
            <text class="shop-text text-overflow-1">{{ item.shop_name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ServiceGrid",
  props: {
    // 服务列表数据
    services: {
      type: Array,
      default: () => [],
    },
    // 是否显示多图布局
    showMultiImages: {
      type: Boolean,
      default: false,
    },
    // 是否显示找相似按钮
    showSimilar: {
      type: Boolean,
      default: false,
    },
    // 上一页是nvue页面还是vue页面
    pageType: {
      type: String,
      default: "vue",
    },
    width: {
      type: String,
      default: "346rpx",
    },
  },
  methods: {
    onServiceClick(service) {
      if (this.pageType == "nvue") {
        console.log(this.pageType);
        this.$emit("serviceclick", service);
      } else {
        this.$emit("service-click", service);
      }
    },
    formatPriceNumber(num) {
      num = Number(num);
      let formatted;
      formatted = num.toFixed(2);
      // 根据数字大小确定保留的小数位数
      // if (num >= 100) {
      //   // 大于等于100时，不保留小数
      //   formatted = Math.floor(num).toString();
      // } else if (num >= 10) {
      //   // 大于等于10时，保留1位小数
      //   formatted = num.toFixed(1);
      // } else {
      //   // 其他情况，保留两位小数
      //   formatted = num.toFixed(2);
      // }

      // 处理小数最后一位是0的情况
      // 如果包含小数点，则检查并移除末尾的0和可能的小数点
      // if (formatted.includes(".")) {
      //   formatted = formatted.replace(/0+$/, "").replace(/\.$/, "");
      // }

      return formatted;
    },
    formatPriceSize(o_num, o_fontSize, type = 1) {
      let fontSize = o_fontSize;
	  
      const len = this.formatPriceNumber(o_num).length;
      //首页拼团立省价格
      if (len > 7 && type == 1) {
        fontSize -= 4;
      }
      //分享图立省价格
      if (len > 7 && type == 2) {
        fontSize -= 3;
      }
      //分享图拼团价格
      if (type === 3) {
        if (len > 4) {
          fontSize -= 10;
        }
        if (len > 5) {
          fontSize -= 4;
        }
        if (len > 6) {
          fontSize -= 6;
        }
        if (len > 7) {
          fontSize -= 6;
        }
      }
      //分享图原价
      if (type === 4) {
        if (len > 5) {
          fontSize -= 2;
        }
        if (len > 6) {
          fontSize -= 2;
        }
      }

      //首页商家
      if (type === 5) {
        if (len > 6) {
          fontSize -= 6;
        }
        if (len > 7) {
          fontSize -= 4;
        }
        if (len > 8) {
          fontSize -= 4;
        }
      }

      return fontSize;
    },
  },
};
</script>

<style lang="less" scoped>
.service-grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 18rpx;
}
.service-item-box {
  width: 346rpx;
}
.service-item {
  width: 346rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
  margin-bottom: 24rpx;
}

.service-image {
  width: 346rpx;
  height: 346rpx;
  background-color: #000000;
}
  .imageBox {
    width: 346rpx;
    position: relative;
    .distance {
      position: absolute;
      font-family: DINPro, DINPro;
      font-weight: 500;
      font-size: 20rpx;
      color: #ffffff;
      bottom: 20rpx;
      left: 14rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6rpx;
      background-color: rgba(102, 102, 102,0.6);
      padding: 4rpx 10rpx;
      border-radius: 100rpx;
      overflow: hidden;
      .position {
        width: 12rpx;
        height: 15rpx;
      }
    }
  }

.service-tag {
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  padding: 0 8rpx;
  height: 49rpx;
  background: linear-gradient(124deg, #f52540 0%, #e8101e 100%);
  border-radius: 20rpx 2rpx 20rpx 2rpx;
}

.service-info {
  padding: 16rpx;
}

.service-title {
  //   margin-bottom: 8rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.service-title-type {
  width: 64rpx;
  /* 图片与文字之间的间距 */
  margin-right: 13rpx;
}

.service-title-text {
  font-weight: 500;
  font-size: 28rpx;
  color: #333;
  text-align: left;
  font-style: normal;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /* 显示的行数 */
  lines: 1;
  /* NVUE下要用这个属性，来让文字超出隐藏变省略号 */
}

.service-row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.service-sales {
  font-size: 24rpx;
  color: #808080;
}

.service-price {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.coupon-wrapper {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

/* 券后标签 */
.coupon-label {
  font-weight: 400;
  font-size: 24rpx;
  color: #e8101e;
  line-height: 33rpx;
}

.price-symbol {
  font-weight: 500;
  font-size: 24rpx;
  color: #e8101e;
  text-align: left;
  font-style: normal;
  margin-right: 4rpx;
}

.price-value {
  font-weight: 500;
  font-size: 28rpx;
  color: #e8101e;
  text-align: left;
  font-style: normal;
}

.shop-text {
  font-size: 24rpx;
  color: #3d3d3d;
  font-weight: 400;
}

/* APP适配 */
/* #ifdef APP-PLUS */
.service-item {
  transform: translateZ(0);
}

/* #endif */
</style>
