<template>
  <view class="cell" @click.native="$emit('click')">
    <view class="cell-left">
      <text class="cell-left-title">{{ title }}</text>
      <view class="cell-left-content" :class="{ wrap: wrap }">
        <!-- #ifdef MP-ALIPAY	-->
        <slot />
        <!-- #endif -->
        <!-- #ifndef MP-ALIPAY -->
        <slot>{{ content }}</slot>
        <!-- #endif  -->
      </view>
    </view>
    <text v-if="!noArrows" class="cell-right iconfont icon-arrow" />
  </view>
</template>
<script>
export default {
  name: "GoodsCell",
  props: {
    title: {
      type: String,
      default: ""
    },
    content: {
      type: String,
      default: ""
    },
    wrap: {
      type: Boolean,
      default: false
    },
    noArrows: {
      type: Boolean,
      default: false
    }
  }
};
</script>
<style lang="scss" scoped>
.cell {
  display: flex;
  justify-content: space-between;

  align-items: center;
  // padding: 0 20rpx;
  height: 70rpx;
  background: #fff;
  &-left {
    display: flex;
    // align-items: center;
    font-size: 26rpx;
    &-title {
      // width: 70rpx;
      // margin-right: 20rpx;
      color: #999999;
      // line-height: 18rpx;
    }
    &-content {
      display: flex;
      flex-wrap: nowrap;
      // justify-content: center;
      // align-items: center;
      // align-items: flex-end;
      line-height: 36rpx;
      color: #333;
      margin-left: 20rpx;
      max-width: 550rpx;
      &.wrap {
        flex-wrap: wrap;
      }
    }
  }
  &-right {
    color: #d8d8d8;
  }
}
</style>
