<template>
  <view class="shop-list">
    <!-- 店铺列表 -->
    <scroll-view >
      <view
        class="shop-item"
        v-for="(shop, index) in shopList"
        @click.stop="goToArtisan($event, shop.id)"
        :key="shop.id"
      >
        <!-- 店铺信息 -->
        <view class="shop-header">
          <view class="shop-title">
            <view class="shop-title__left" style="width: 100%">
              <image
                :src="shop.head_photo"
                class="head-photo"
                mode="aspectFill"
              ></image>
              <view class="title-info">
                <view class="name">
                  <view class="name_text text-overflow-1">{{ shop.name }}</view>
                  <view class="shop-distance" v-if="shop.distance >= 0">
                    <image
                      class="position"
                      src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e37b3bd7-841f-4d57-a11a-2365c81f740e"
                    />
                    <text class="shop-distance__right"
                      >{{ shop.distance.toFixed(2) }}km</text
                    >
                  </view>
                </view>
                <view class="time"
                  >营业时间：<text class="num_medium_text">{{
                    shop.business_time
                  }}</text></view
                >
				<scroll-view scroll-x="true" class="shop-info-left">
					<view class="shop-info-left-list">
					  <text class="shop-tags" v-for="(tag, i) in shop.servers_kill_arr">
					    {{ tag }}
					  </text>
					</view>
				</scroll-view>
              </view>
            </view>
          </view>
        </view>
        <!-- 服务列表 -->
        <view class="service-list">
          <view
            class="service-item"
            v-for="(item, index) in shop.servers_list"
            :key="index"
            @click.stop="onServiceClick($event, item)"
          >
            <view class="service-price">
              <view
                :class="{
                  discount: getPriceNum(item) !== '惠',
                  discounts: getPriceNum(item) == '惠',
                }"
                v-if="getPriceNum(item)"
                >{{ getPriceNum(item) }}</view
              >
              <!-- 价格区域：根据 hasCoupon 显示券后价或原价 -->
              <view v-if="item.hasCoupon" class="price coupon-wrapper">
                <text class="coupon-label">券后</text>
                <text class="price-symbol">¥</text>
                <text class="price-value coupon-price">{{ item.coupon_price }}</text>
              </view>
              <view v-else class="price">
                <text class="price-symbol">¥</text>
                <text class="price-value">{{ (item.team_buy && item.team_buy.price) || item.server_price }}</text>
              </view>
            </view>
            <view class="service-info">
              <view class="service-title">
                <image
                  v-if="item.team_buy && Object.keys(item.team_buy).length != 0"
                  class="service-title-type"
                  mode="widthFix"
                  src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/c0744cbd-6386-4391-89fc-09223377431b"
                ></image>
                <view class="title">
                  <text class="service-title-text">
                    {{ item.title }}
                  </text>
                  <view class="num"
                    >销量<text style="font-family: DINPro, DINPro">{{
                      item.sales_num
                    }}</text></view
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "shop-list",
  props: {
    // 服务列表数据
    shopList: {
      type: Array,
      default: () => [],
    },
    // 是否显示多图布局
    isRefreshing: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },

  methods: {
    getPriceNum(item) {
      if (item.team_buy && item.team_buy.price) {
        const discount =
          (item.team_buy.price* 10 / item.server_price).toFixed(1) ;
        if (discount < 0.1 || item.team_buy.price > 9999) {
          return "惠";
        } else {
          return `${discount}折`;
        }
      }
    },
    onServiceClick(e, service) {
      console.log("service", service);
      // #ifdef APP-PLUS
      e.preventDefault();
      e.stopPropagation();
      // #endif
      this.$emit("service-click", service);
    },
    goToArtisan(e, id) {
      // #ifdef APP-PLUS
      e.preventDefault();
      e.stopPropagation();
      // #endif
      this.$emit("go-artisan", id);
    },
  },
};
</script>

<style scoped lang="less">
.shop-list{
  padding: 0 20rpx;
}
.title-info {
  width: 100%;
  .name {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    line-height: 42rpx;
    font-size: 30rpx;
    color: #333333;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .name_text {
      flex: 1;
      width: 100%;
    }
    .position {
      width: 19rpx;
      height: 21rpx;
      margin-right: 6rpx;
    }
  }
  .time {
    font-weight: 500;
    font-size: 22rpx;
    color: #666666;
    margin-top: 13rpx;
    margin-bottom: 24rpx;
    line-height: 30rpx;
    .num_medium_text {
      font-size: 24rpx;
      line-height: 31rpx;
    }
  }
}

.shop-item {
  width: 710rpx;
  background-color: #ffffff;
  margin-bottom: 24rpx;
  padding: 16rpx 24rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
}

.shop-header {
  width: 100%;
  margin-bottom: 20rpx;
}

.shop-title {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  &__left {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
}

.head-photo {
  flex-shrink: 0;
  width: 176rpx;
  height: 174rpx;
  background: #d8d8d8;
  border-radius: 20rpx;
  margin-right: 20rpx;
}

.title-text {
  font-size: 32rpx;
  color: #333;
  max-width: 400rpx;
  font-weight: 500;
  margin-right: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /* 显示的行数 */
  lines: 1;
}

.verified-icon {
  width: 32rpx;
  height: 32rpx;
}

.shop-info {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
}

.shop-info-left {
   width: 480rpx;
  .shop-info-left-list{
	  display: flex;
	  align-items: center;
	      flex-wrap: nowrap;
	  gap: 14rpx;
	  padding-right: 20rpx;
	  .shop-tags {
	  	  white-space: nowrap;
	    border-radius: 16rpx;
	    padding: 2rpx 14rpx;
	    background-color: #f3f3f3;
	    font-family: PingFangSC, PingFang SC;
	    font-weight: 400;
	    font-size: 20rpx;
	    color: #666666;
	    line-height: 28rpx;
	    text-align: left;
	    font-style: normal;
	  }
  }
  
}

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

.rating-score {
  color: #ff94b4;
  margin-right: 8rpx;
}

.rating-stars {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-right: 8rpx;
}

.star-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 4rpx;
}

.divider {
  color: #eeeeee;
  margin: 0 16rpx;
}

.shop-distance {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 22rpx;
  color: #666666;
  font-family: DINPro, DINPro;
  font-weight: 500;

  &__left {
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    line-height: 33rpx;
    text-align: left;
    font-style: normal;
    margin-right: 8rpx;
  }

  &__right {
    font-weight: 500;
    font-size: 26rpx;
    color: #666666;
    line-height: 37rpx;
    text-align: left;
    font-style: normal;
  }
}

.service-list {
  display: flex;
  flex-direction: column;
}

/* 券后价包装器 */
.coupon-wrapper {
  display: flex;
  align-items: center;
  gap: 4rpx;
}

/* 券后标签 */
.coupon-label {
  font-weight: 400;
  font-size: 26rpx;
  color: #e8101e;
  // background: #ffe9e9;
  // padding: 2rpx 8rpx;
  // border-radius: 20rpx;
  // margin-right: 4rpx;
  line-height: 37rpx;
}

/* 券后价格 */
.coupon-price {
  
}

.service-item {
  position: relative;
  display: flex;
  gap: 20rpx;
  .service-price {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 176rpx;
    .price {
      display: flex;
      align-items: baseline;
      color: #e8101e;
      .price-symbol {
        font-family: DINPro, DINPro;
        font-weight: 500;
        font-size: 20rpx;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
      }

      .price-value {
        font-family: DINPro, DINPro;
        font-weight: 500;
        font-size: 32rpx;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
      }
    }

  }
}

.service-info {
  flex: 1;
  padding-top: 12rpx;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.service-title {
  margin-bottom: 16rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #000000;
  line-height: 28rpx;
  text-align: left;
  font-style: normal;

  /* 关键：使用flex布局让子元素同行显示 */
  display: flex;
  align-items: center;

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

  .service-title-text {
    /* 关键：移除固定宽度，使用flex自动分配剩余空间 */
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    font-size: 26rpx;
    color: #333333;
  }
}
.discount {
  font-family: DINPro, DINPro;
  font-weight: 400;
  font-size: 22rpx;
  height: 28rpx;
  color: #e8101e;
  padding: 0 4rpx;
  border-radius: 4rpx;
  border: 1rpx solid rgba(216, 185, 191, 0.6);
  margin-right: 8rpx;
  white-space: nowrap;
}
.discounts {
  font-size: 22rpx;
  color: #e8101e;
  width: 30rpx;
  height: 30rpx;
  background: #ffecf0;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}
.title {
  display: flex;
  width: 100%;
  justify-content: space-between;
  .num {
    margin-left: 21rpx;
    font-size: 22rpx;
    color: #999999;
  }
}

.price-text {
  font-weight: 500;
  font-size: 24rpx;
  color: #E8101E;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
}

/* H5适配 */
/* #ifdef H5 */
.nearby-page {
  /* padding-top: 88rpx; */
}

/* #endif */

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

/* #endif */

/* 小程序适配 */
/* #ifdef MP-WEIXIN */
/* .nearby-page {
  padding-top: calc(88rpx + constant(safe-area-inset-top));
  padding-top: calc(88rpx + env(safe-area-inset-top));
} */
/* #endif */
</style>
