<template>
  <view class="list-card"  @click="$emit('goDetail', info)">
    <image
      :mode="`aspectFill`"
      :src="info.photo[0]"
      class="list-card-img"
    ></image>
    <view class="list-card-right">
      <view class="list-card-right-top">
        <view style="display: flex; align-items: center">
          <text class="list-card-right-top__num"
            >{{ info.person_num }}人团</text
          >
          <view class="list-card-right-top__title white-space-nowrap">{{
            info.title
          }}</view>
        </view>

        <text class="list-card-right-top__distance">
          <image
            class="list-card-right-top_image"
            src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e37b3bd7-841f-4d57-a11a-2365c81f740e"
          />
          <text style="color: #333">{{ this.getDistance }}</text></text
        >
      </view>
      <view class="list-card-right-bottom">
        <view class="list-card-right-bottom__box"
          >立省{{
            formatPriceNumber(this.info.server_price - this.info.price)
          }}元</view
        >
        <view class="list-card-right-bottom__left">
          <view class="list-card-right-bottom__left__price"
            >拼团价 ¥
            <text style="font-size: 34rpx">{{ `${info.price}` }}</text>
          </view>
          <view class="list-card-right-bottom__left__price2"
            >原价 ¥{{ ` ${info.server_price}` }}
          </view>
        </view>
        <view
          class="list-card-right-bottom__right"
         
        >
          速抢
          <image
            :mode="`aspectFill`"
            src="@/static/images/shop/pintuan/whiteRight.png"
            class="list-card-right-bottom__right__icon"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "listCard",
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
  computed: {
    getDistance() {
      if (this.info.distance) {
        if (this.info.distance <= 1) {
          return ` ${(this.info.distance * 1000).toFixed(2)}m`;
        } else {
          return ` ${this.info.distance.toFixed(0)}km`;
        }
      } else {
        return ` 0m`;
      }
    },
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.list-card {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 20rpx 25rpx 20rpx 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;

  .list-card-img {
    width: 172rpx;
    height: 172rpx;
    border-radius: 12rpx;
  }

  .list-card-right {
    flex: 1;
    margin-left: 30rpx;
    height: 172rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .list-card-right-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &__num {
        padding: 0 6rpx;
        background: linear-gradient(166deg, #FC5E72 0%, #E8101E 100%);
        border-radius: 6rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        margin-right: 10rpx;
        white-space: nowrap;
      }

      &__title {
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
        line-height: 34rpx;
        text-align: left;
        font-style: normal;
        width: 205rpx;
      }

      &__distance {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        white-space: nowrap;
      }
    }

    .list-card-right-bottom {
      background-image: url("@/static/images/shop/pintuan/bj2.png");
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;

      width: 443rpx;
      height: 83rpx;
      border-radius: 10rpx;
      position: relative;

      &__box {
        position: absolute;
        left: 0rpx;
        top: -6rpx;
        transform: translateY(-100%);
        padding: 0 10rpx;
        height: 28rpx;
        background: rgba(249, 67, 96, 0.1);
        border: 2rpx solid #e8101e;

        font-weight: 400;
        font-size: 20rpx;
        color: #e8101e;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* 外层伪元素：生成「边框三角」（比内层大，颜色为边框色） */
      &__box::before {
        content: "";
        position: absolute;
        bottom: -8rpx;
        /* 比内层低1rpx（与边框粗细对应） */
        left: 50%;
        transform: translateX(-50%);
        /* 水平居中 */
        pointer-events: none;
        /* 避免遮挡点击 */

        /* 边框三角尺寸：比内层三角大1rpx（左右各宽1rpx，高度高1rpx） */
        border-width: 8rpx 6rpx 0;
        /* 上边框=三角高度（比内层多1rpx），左右边框=三角宽度（比内层多1rpx） */
        border-style: solid;
        border-top-color: #e8101e;
        /* 三角的边框色（自己改想要的颜色） */
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
      }

      /* 内层伪元素：原填充色三角（覆盖在外层上，露出边框） */
      &__box::after {
        content: "";
        position: absolute;
        bottom: -4rpx;
        /* 比外层高1rpx，确保覆盖 */
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;

        /* 原三角样式不变，仅定位与外层错开 */
        border-width: 6rpx 4rpx 0;
        /* 原尺寸：高度10rpx，宽度8rpx（左右） */
        border-style: solid;
        border-top-color: #ffe6eb;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
      }

      &__left {
        position: absolute;
        left: 30rpx;
        top: 13rpx;

        &__price {
          font-weight: 500;
          font-size: 24rpx;
          color: #e8101e;
          line-height: 33rpx;
          text-align: left;
          font-style: normal;
        }

        &__price2 {
          margin-top: 3rpx;
          font-weight: 400;
          font-size: 20rpx;
          color: rgba(252, 67, 124, 0.57);
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
        }
      }

      &__right {
        position: absolute;
        right: 30rpx;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 30rpx;
        color: #ffffff;
        line-height: 42rpx;
        text-align: left;
        font-style: normal;

        &__icon {
          width: 8rpx;
          height: 16rpx;
          margin-left: 9rpx;
        }
      }
    }
  }
}
.list-card-right-top_image{
	width: 20rpx;
	height: 22rpx;
}
</style>
