<template>
  <view @tap="toShop(item.shopId)" class="card" v-for="item in cardData" :key="item.shopId">
    <image class="img" :src="item.shopLogo" mode="aspectFill" />
    <view class="right">
      <text class="text">{{ item.shopName }}</text>
      <view class="twoBxo">
        <text class="one-text">{{ item.grade }}推荐</text>
        <!-- <text class="two-text">￥30/人</text> -->
        <text class="three-text">销量{{ item.monthSoldNum }}</text>
        <text class="four-text">
          {{ getDistance(item.shopLat, item.shopLng, latF, lonF) }}
        </text>
      </view>
      <view class="threeBox" v-if="item.evaluationVos.length === 0">
        <image class="img2" :src="item.evaluationVos[0].avatar" mode="aspectFill" />
        <text class="one-text">“{{ item.evaluationVos[0].evaluation }}”</text>
      </view>
      <view class="labelBox" v-if="item.labels">
        <view v-for="(item, index) in item.labels" :key="index">{{ item }}</view>
      </view>
      <view class="groupPurchasePrice" v-for="(item, index) in item.simpleProds" :key="index">
        <image class="img" src="../../static/index/groupBuying.png" mode="widthFix" />
        <text class="one-text">￥{{ item.price }}</text>
        <!-- <view class="two-text">7.8折</view> -->
        <text class="three-text">￥{{ item.oriPrice }}</text>
        <text class="four-text">{{ item.prodName }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from 'vue';
import { getLocation } from '../../utils/tool';
import { getDistance } from '../../utils/common';
const lonF = ref(0);
const latF = ref(0);
onMounted(async () => {
  const { lon, lat } = await getLocation();
  lonF.value = lon;
  latF.value = lat;
});
const props = defineProps({
  cardData: {
    type: Array,
  },
});
const toShop = (id) => {
  uni.navigateTo({
    url: `/pages/shop/shop?shopId=${id}`,
  });
};
</script>

<style lang="scss" scoped>
.card {
  width: 710rpx;
  // height: 316rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  background: #fdfdfd;
  margin: 0 auto;
  margin-bottom: 2rpx;
  display: flex;
  padding: 22rpx 0;
  padding-left: 20rpx;
  box-sizing: border-box;
  .img {
    width: 144rpx;
    height: 144rpx;
    border-radius: 16rpx;
  }
  .right {
    width: calc(100% - 164rpx);
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .text {
      font-size: 28rpx;
      font-weight: bold;
      color: #3d3d3d;
    }
    .twoBxo {
      display: flex;
      align-items: center;
      margin: 8rpx 0;
      width: 100%;
      position: relative;
      .one-text {
        font-size: 22rpx;
        font-weight: bold;
        color: #ff5353;
      }
      .two-text {
        font-size: 20rpx;
        color: #abaaaa;
        font-weight: 500;
        margin-left: 20rpx;
      }
      .three-text {
        font-size: 20rpx;
        color: #abaaaa;
        font-weight: 500;
        margin-left: 8rpx;
      }
      .four-text {
        font-size: 20rpx;
        color: #908f8f;
        font-weight: 500;
        margin-left: 182rpx;
        position: absolute;
        right: 20rpx;
      }
    }
    .threeBox {
      display: flex;
      align-items: center;
      .img2 {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
      }
      .one-text {
        font-size: 22rpx;
        color: #3d3d3d;
        font-weight: 500;
        margin-left: 8rpx;
      }
    }
    .labelBox {
      display: flex;
      align-items: center;
      margin: 20rpx 0;
      view {
        margin-right: 8rpx;
        display: inline-block;
        height: 36rpx;
        padding: 0 8rpx;
        line-height: 36rpx;
        font-size: 18rpx;
        color: #abaaaa;
        background-color: rgba(243, 243, 243, 1);
      }
    }
    .groupPurchasePrice {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      .img {
        width: 32rpx;
        height: 32rpx;
        flex-shrink: 0;
      }
      .one-text {
        font-size: 28rpx;
        font-weight: 500;
        color: #fa5151;
      }
      .two-text {
        margin-left: 4rpx;
        display: inline-block;
        height: 24rpx;
        padding: 0 8rpx;
        line-height: 24rpx;
        font-size: 18rpx;
        color: #fa5151;
        background: #fcdbdb;
      }
      .three-text {
        margin-left: 4rpx;
        font-size: 20rpx;
        color: #abaaaa;
        font-weight: 300;
        text-decoration: line-through;
      }
      .four-text {
        margin-left: 4rpx;
        font-size: 22rpx;
        color: #3d3d3d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
