<template>
  <view class="list-item flex-row">
    <image :src="item.pictureUrl || '/static/imgs/factory/default-factory.png'" class="image_8" />
    <view class="center-group flex-col">
      <view class="flex-row">
        <text class="text_11 text-ellipsis">{{ item.name }}</text>
        <view class="right-text-wrapper_1 flex-col">
          <text class="text_18">{{ item.score }}分</text>
        </view>
      </view>
      <view class="center-group_1 flex-row">
        <image
          src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16508554099266202544.png"
          class="image_10"
        />
        <text class="text_13">{{ item.address }}</text>
        <text class="text_14">{{ item.mileage === -1 ? '未知' : '距您' + item.mileage + 'km' }}</text>
      </view>
      <view class="bottom-group flex-row" v-if="item.boxTags && item.boxTags.length > 0">
        <view v-for="(tag, index) in item.boxTags" :key="tag.id" class="text-wrapper flex-col items-center" :class="'text-wrapper_' + index">
          <text>{{ tag.name }}</text>
        </view>
      </view>
      <view class="flex-row group_10">
        <image v-for="pic in arrSlice(item.sampleBoxUrl, 3)" :key="pic" :src="pic" class="image_16" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    arrSlice(arr, length) {
      if (!arr) {
        return []
      }
      return arr.slice(0, length)
    }
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  &:first-of-type {
    border-top: solid 2rpx rgb(221, 221, 221);
  }
  padding: 25rpx 32rpx 21rpx;
  border-bottom: solid 2rpx rgb(216, 216, 216);
  .image_8 {
    border-radius: 8rpx;
    width: 180rpx;
    height: 180rpx;
  }
  .center-group {
    margin-left: 16rpx;
    flex: 1 1 auto;
    .text_11 {
      color: rgb(51, 51, 51);
      font-size: 34rpx;
      font-weight: 500;
      line-height: 48rpx;
      white-space: nowrap;
      max-width: 408rpx;
    }
    .center-group_1 {
      margin-top: 12rpx;
      padding: 0 2rpx;
      color: rgb(51, 51, 51);
      font-size: 26rpx;
      line-height: 37rpx;
      white-space: nowrap;

      .image_10 {
        margin: 8rpx 0 5rpx;
        width: 20rpx;
        height: 23rpx;
      }
      .text_13 {
        margin-left: 8rpx;
        white-space: pre-wrap;
        flex: 1 1 auto;
      }
      .text_14 {
        margin-left: 24rpx;
        font-size: 26rpx;
        color: #888888;
      }
    }
    .bottom-group {
      margin-top: 17rpx;
      flex-wrap: wrap;
      .text-wrapper {
        padding: 2rpx 4rpx;
        margin-right: 6rpx;
        font-size: 18rpx;
        font-weight: 500;
        line-height: 25rpx;
        white-space: nowrap;
        background-color: rgba(255, 77, 79, 0.08);
        border-radius: 2rpx;
        height: 29rpx;
      }
      .text-wrapper_0 {
        border: solid 2rpx rgb(255, 77, 79);
        color: rgb(255, 77, 79);
      }
      .text-wrapper_1 {
        color: rgb(254, 134, 0);
        border: solid 2rpx rgb(254, 136, 6);
      }
      .text-wrapper_2 {
        color: rgb(19, 194, 194);
        border: solid 2rpx rgb(19, 194, 194);
      }
    }
  }
  .right-text-wrapper_1 {
    margin: 11rpx 14rpx 0 12rpx;
    padding-top: 2rpx;
    color: rgb(255, 255, 255);
    font-size: 18rpx;
    font-weight: 600;
    line-height: 25rpx;
    white-space: nowrap;
    background-image: linear-gradient(90deg, rgb(255, 186, 101) 0%, rgb(255, 186, 101) 0%, rgb(255, 143, 53) 100%, rgb(255, 143, 53) 100%);
    border-radius: 14rpx 2rpx 14rpx 14rpx;
    height: 28rpx;
    .text_18 {
      margin-left: 6rpx;
      margin-right: 5rpx;
    }
  }
  .group_10 {
    margin-top: 16rpx;
    .image_16 {
      border-radius: 4rpx;
      margin-right: 16rpx;
      width: 120rpx;
      height: 120rpx;
    }
  }
}
</style>
