<template>
  <view
    class="shop-item"
    @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="headPhoto"
            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>
    <!-- 服务列表 -->
    <scroll-view scroll-x="true">
      <view class="shop-list">
        <view
          class="shop-list-item"
          v-for="(item, index) in shop.servers_list"
          :key="index"
          @click.stop="goToService($event, item)"
        >
          <image
            :src="item.photo[0]"
            class="shop-list-item__photo"
            mode="aspectFill"
          ></image>
          <view class="shop-list-item__title text-overflow-1">
            <text
              class="shop-list-item__title__tip"
              v-if="item.team_buy.length > 0"
              >拼团</text
            >
            {{ item.title }}
          </view>
          <view class="shop-list-item__price"
            ><text style="font-size: 20rpx">¥</text
            >{{
              item.team_buy.length > 0 ? item.team_buy.price : item.server_price
            }}</view
          >
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    // 服务列表数据
    shop: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },
  computed:{
	  headPhoto(){
		  if(this.shop.head_photo == "-" || !this.shop.head_photo){
			  return `https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40`
		  }else{
			  return this.shop.head_photo
		  }
	  }
  },
  methods: {
    // 跳转到手艺人详情
    goToArtisan(e, id) {
      // #ifdef APP-PLUS
      e.preventDefault();
      e.stopPropagation();
      // #endif
      // this.$emit("go-artisan", id);
	   uni.navigateTo({
	            url: `/pages/user/store-detail?id=${id}`,
	          });
    },
    // 跳转到服务详情
    goToService(e, item) {
      console.log(item);
      // #ifdef APP-PLUS
      e.preventDefault();
      e.stopPropagation();
      // #endif
      if (item.team_buy && Object.keys(item.team_buy).length != 0) {
        uni.navigateTo({
          url: `/pages/groupBuy/detail?id=${item.id}`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/service/detail?id=${item.id}`,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.shop-item {
  width: 710rpx;
  background: #ffffff;
  border-radius: 20rpx;

  margin-bottom: 20rpx;
  padding: 16rpx 24rpx;
  box-sizing: border-box;
  .shop-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 12rpx;
    height: 260rpx;
    .shop-list-item {
      height: auto;
      &__photo {
        width: 166rpx;
        height: 166rpx;
        background: #d8d8d8;
        border-radius: 20rpx;
      }
      &__title {
        flex: 1;
        max-width: 166rpx;
        margin-top: 8rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #333333;
        line-height: 30rpx;
        text-align: left;
        font-style: normal;
        &__tip {
          padding: 0 8rpx;
          background: linear-gradient(160deg, #fc5e72 0%, #e8101e 100%);
          border-radius: 6rpx;
          font-weight: 500;
          font-size: 20rpx;
          color: #ffffff;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
          margin-right: 12rpx;
        }
      }
      &__price {
        font-family: DINPro, DINPro;
        font-weight: 500;
        font-size: 26rpx;
        color: #e8101e;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
.title-info {
  width: 100%;
  .name {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .name_text {
      flex: 1;
      width: 100%;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
    }
    .shop-distance {
		margin-left: 30rpx;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      font-size: 22rpx;
      color: #666666;
      font-family: DINPro, DINPro;
      font-weight: 500;
      &__right {
        font-family: DINPro, DINPro;
        font-weight: 500;
        font-size: 24rpx;
        color: #666666;
        line-height: 31rpx;
        text-align: left;
        font-style: normal;
      }
    }
    .position {
      width: 19rpx;
      height: 21rpx;
      margin-right: 6rpx;
    }
  }
  .time {
    font-family: DINPro, DINPro;
    font-weight: 500;
    font-size: 24rpx;
    color: #666666;
    line-height: 31rpx;
    text-align: left;
    font-style: normal;
    margin-top: 8rpx;
    margin-bottom: 10rpx;
  }
}

.shop-header {
  margin-bottom: 20rpx;
  width: 100%;
  .shop-title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12rpx;
    width: 100%;

    &__left {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      margin-bottom: 12rpx;
    }
  }
}

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

.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: 502rpx;
  .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;
}
</style>
