<template>
  <div class="item-content">
    <div class="tip" v-if="value.tips">{{value.tips}}</div>
    <i class="pre-sale" v-if="isPreSale"></i>
    <div class="info">
      <div class="left">
        <div class="size-price-container">
          <span>{{value.goodsInfo.sizeName}}码, X{{value.goodsInfo.storageNum}}</span>
          <span class="price">¥{{value.goodsInfo.price}}</span>
        </div>
        <div class="min-price-container">
          <span>{{lastPriceText}} ¥{{value.goodsInfo.leastPrice ? value.goodsInfo.leastPrice : '-'}}</span>
        </div>
      </div>
      <div class="right">
        <div class="button-container">
          <button class="btn-no-sale" @click="onNoSale">不卖了</button>
          <button class="btn-change-price" @click="onChgPrice">调 价</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'productItem',
  props: {
    value: Object,
  },
  computed: {
    lastPriceText() {
      return this.isPreSale ? '预售最低售价' : '现货最低售价';
    },
    isPreSale() {
      return this.value.isAdvance === 'Y';
    }
  },
  mounted() {

  },
  methods: {
    onNoSale() {
      this.$emit('on-no-sale', Object.assign({
        isAdvance: this.value.isAdvance,
        attributes: this.value.attributes
      }, this.value.goodsInfo));

      /* this.$root.reportApp('', 'BUSINESS_UFO_SELL_CHANGE', {
        locfun: 'click:nosell'
      }); */
    },
    onChgPrice() {
      this.$emit('on-change-price', Object.assign({
        isAdvance: this.value.isAdvance,
        attributes: this.value.attributes
      }, this.value.goodsInfo));

      /*this.$root.reportApp('', 'BUSINESS_UFO_SELL_CHANGE', {
        locfun: 'click:changePrice'
      });*/
    }
  }
};
</script>

<style lang="scss" scoped>
  .item-content {
    width: 100%;
    height: 158px;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;

    .info {
      width: 100%;
      height: 100%;
      box-sizing: border-box;

      .left {
        width: 340px;
        height: 100%;
        float: left;
        box-sizing: border-box;

        .size-price-container {
          position: relative;
          margin: 32px 20px 20px 20px;
          font-size: 28px;
          line-height: 32px;

          span {
            font-weight: 500;
            line-height: 32px;
          }

          .price {
            position: absolute;
            right: 0;
            top: 0;
          }
        }

        .min-price-container {
          position: relative;
          margin: 0 20px;
          color: #b0b0b0;
          font-size: 24px;
        }
      }

      .right {
        width: 348px;
        height: 100%;
        float: left;
        box-sizing: border-box;

        .button-container {
          margin: 48px 0 0 52px;

          button {
            width: 130px;
            height: 58px;
            font-size: 28px;
            font-weight: 500;
          }

          .btn-no-sale {
            border: 1px solid #b0b0b0;
            color: #b0b0b0;
            background-color: #fff;
            border-radius: 30px;
          }

          .btn-change-price {
            background-color: #0c2b4a;
            color: #fff;
            border-radius: 30px;
            border: none;
            margin-left: 10px;
          }
        }
      }
    }
  }
</style>