<template>
  <view class='container'>
    <view class='item-box' v-for="(itm, index) of item" :key="index" @click='handlerRouterSkip(itm)'>
      <image :src='itm.logo' mode="aspectFill" class='img'></image>
      <view class='item-right'>
        <view class='right-top'>{{ itm.name }}</view>
        <view class='right-bottom'>
          <view class='bottom-left'>{{ itm.address }}</view>
          <view class='bottom-right'>{{ (itm.distance / 1000).toFixed(2) }}KM</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    props: ['item'],
    methods: {
      handlerRouterSkip(itm) {
        uni.navigateTo({
          url: `/pagesHome/marketer/index?id=${itm.id}`,
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 32rpx;
    box-sizing: border-box;

    .item-box {
      margin-bottom: 16rpx;
      width: 100%;
      height: 172rpx;
      border-radius: 8rpx;
      background-color: #fff;
      padding: 16rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.12);
      .img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 8rpx;
      }

      .item-right {
        width: calc( 100% - 180rpx );
        height: 100%;
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .right-top {
          color: #0C1223;
        }

        .right-bottom {
          display: flex;
          justify-content: space-between;
           color:#999999;
          .bottom-left {
            width: 70%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 28rpx;
          }

          .bottom-right {
            font-size: 24rpx;
          }
        }
      }
    }
  }
</style>
