<template>
  <div class="flex-row space-x-12">
    <img
      class="shrink-0 self-start image_9"
      :src="obj.IMAGE_PATH || obj.DEFAULT_IMG || '/static/images/home/defultImg.png'"
    />
    <div class="flex-col info">
      <div class="flex-row justify-between">
        <div class="font_3 titleName">{{ obj.COMMODITY_NAME }}</div>
        <div class="font_3" style="width: 100px; text-align: right">
          x{{ obj.count }}{{ obj.COMMODITY_UNIT }}
        </div>
      </div>
      <div class="flex-row justify-between">
        <span class="font_2"
          >单价: {{ obj.COMMODITY_MEMBERPRICE }}元/{{
            obj.COMMODITY_UNIT
          }}</span
        >
        <span class="font_2">¥{{ obj.cartItemAoumt }}</span>
      </div>
      <div class="remark" v-if="isSubmit && obj.SALEDETAIL_DESC">
        <input
          :disabled="isSubmit"
          class="input"
          v-model="obj.SALEDETAIL_DESC"
        />
      </div>
      <div class="remark" v-if="!isSubmit">
        <input
          class="input"
          @blur="handleChangeValue($event, obj)"
          :value="obj.SALEDETAIL_DESC"
          placeholder="这里是备注的内容"
        />
      </div>
      <!--    <div class="flex-col justify-start items-start text-wrapper_2" v-if="obj.SALEDETAIL_DESC">-->
      <!--      <span class="font_5 text_6">{{obj.SALEDETAIL_DESC}}</span>-->
      <!--    </div>-->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    obj: {},
    isSubmit: false,
  },
  data() {
    return {};
  },
  methods: {
    handleChangeValue(e, obj) {
      obj.SALEDETAIL_DESC = e.mp.detail.value;
    },
  },
};
</script>

<style lang="less" scoped>
.flex-row {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.space-x-12 {
  justify-content: space-between;
  margin-bottom: 24rpx;

  & > *:not(:first-child) {
    margin-left: 24rpx;
  }

  .info {
    width: 494rpx;

    .remark {
      .input {
        width: 100%;
        background: #f2f4f5;
        font-size: 12px;
        border-radius: 4rpx;
        box-sizing: border-box;
        padding-left: 8px;
        margin-top: 8px;
      }
    }
  }

  .image_9 {
    border-radius: 8rpx;
    width: 120rpx;
    height: 120rpx;
  }

  .font_3 {
    font-size: 28rpx;
    font-family: "PingFang SC";
    line-height: 40rpx;
    color: #020e1a;
  }

  .titleName {
    width: calc(100% - 100px);
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 设置显示的行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .font_2 {
    font-size: 24rpx;
    font-family: "PingFang SC";
    line-height: 34rpx;
    color: #9fa3a8;
  }

  .text-wrapper_2 {
    margin-top: 16rpx;
    padding: 12rpx 0;
    background-color: #f2f4f599;
    border-radius: 4rpx;

    .font_5 {
      font-size: 24rpx;
      font-family: "PingFang SC";
      line-height: 34rpx;
      color: #6c737a;
    }

    .text_6 {
      margin-left: 24rpx;
    }
  }
}
</style>
