<template>
  <div
    class="flex order-item u-m-b-14 relative"
    :class="[isActive]"
    @click="itemClick"
  >
    <span class="absolute pack" v-if="item.isPack === 'true'"> 包 </span>
    <span class="absolute tui" v-if="item.status === 'return'"> 退 </span>
    <div class="flex u-col-top">
      <div class="img">
        <div
          class="isSeatFee img u-line-1 u-flex u-col-center u-row-center"
          v-if="isSeatFee"
        >
          <span>{{ item.name }}</span>
        </div>
        <img v-else :src="item.coverImg" class="" alt="" />
      </div>
      <div class="good-info u-p-t-6">
        <div class="flex lh-16">
          <div class="name" :class="{ 'free-price': item.status === 'return' }">
            {{ item.name }}
          </div>
          <span class="good_info_discount" v-if="item.isGift === 'true'"
            >赠</span
          >
        </div>
        <div v-if="item.specSnap" class="specSnap">
          {{ item.specSnap }}
        </div>

        <div class="" v-if="placeNum == 0">
          <div class="note" v-if="item.note">备注:{{ item.note || "" }}</div>
          <div class="note flex" v-else>
            <span>备注:</span>
            <span class="el-icon-edit u-font-12" @click="editNote"></span>
          </div>
        </div>
        <div class="note" v-if="placeNum != 0 && item.note">
          备注:{{ item.note || "" }}
        </div>
      </div>
    </div>
    <div class="flex u-p-t-6">
      <div class="order-number-box u-font-12">
        <div class="" v-if="isSeatFee">X{{ item.totalNumber }}</div>
        <div class="" v-else>X{{ item.number }}</div>
        <div class="absolute" v-if="canChangeNumber">
          <div class="order-input-number">
            <i class="icon-remove" @click="changeOrderNumber(true)"></i>
            <div style="width: 40px" class="number-box">
              <el-input
                :min="0"
                type="number"
                @input="cartGoodsNumberInput"
                @change="cartGoodsNumberChange"
                v-model="number"
                placeholder="0"
              ></el-input>
            </div>
            <i
              class="el-icon-circle-plus icon-add"
              @click="changeOrderNumber(false)"
            ></i>
          </div>
        </div>
      </div>

      <div class="color-333 total-price">
        <template v-if="item.isGift === 'true' || item.status == 'return'">
          <div>￥0</div>
          <div class="free-price">
            <span v-if="isSeatFee"> ￥{{ item.totalAmount }}</span>
            <span v-else> ￥{{ isShowVipPrice ? vipAllPrice : allPrice }}</span>
          </div>
        </template>
        <template v-else>
          <div v-if="isSeatFee">￥{{ item.totalAmount }}</div>
          <div v-else>
            <div v-if="isShowVipPrice&&vipAllPrice!=allPrice">￥{{ vipAllPrice }}</div>
            <div :class="{ 'free-price': isShowVipPrice&&vipAllPrice!=allPrice }">
              <span> ￥{{ allPrice }}</span>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShowVipPrice: {
      type: Boolean,
      default: false,
    },
    //是否是餐位费
    isSeatFee: {
      type: Boolean,
      default: false,
    },
    //是否是历史订单商品
    isOld: {
      type: Boolean,
      default: false,
    },
    //第几次下单 1以及以上为历史订单  0为当前购物车
    placeNum: {
      type: [String, Number],
      default: 0,
    },
    selPlaceNum: {
      type: [String, Number],
      default: -1,
    },
    //是否允许改变数量
    canChangeNumber: {
      type: Boolean,
      default: true,
    },
    item: {
      type: Object,
      default: () => {
        return {
          number: 0,
        };
      },
    },
    selIndex: {
      type: Number,
      default: 0,
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      number: 0,
    };
  },
  computed: {
    vipAllPrice() {
      const item = this.item;
      const price =
        this.isShowVipPrice &&
        item.memberPrice != null &&
        item.memberPrice != undefined
          ? (item.memberPrice<=0?item.salePrice:item.memberPrice)
          : item.salePrice;
      return (price * item.number + (item.packAmount || 0)).toFixed(2);
    },

    allPrice() {
      const item = this.item;

      const price = item.salePrice;
      return (price * item.number + (item.packAmount || 0)).toFixed(2);
    },
    isActive() {
      const isSel =
        this.selIndex === this.index && this.placeNum === this.selPlaceNum;
      console.log(isSel);
      return isSel ? "active" : "";
    },
  },
  watch: {
    "item.number": function (val) {
      this.number = val;
      // this.$emit('changeOrderNumber',this.index)
    },
  },
  mounted() {
    this.number = this.item.number;
  },
  methods: {
    editNote() {
      if (this.placeNum === 0) {
        this.$emit("editNote", this.index);
      }
    },
    //购物车商品输入框数量改变
    cartGoodsNumberChange(newval) {
      if (newval <= 0) {
        item.number = 1;
      }
      newval = `${newval}`.split(".")[0] * 1;
      this.number = newval;
      this.$emit("cartGoodsNumberChange", newval, this.index);
    },
    //购物车商品输入框数量输入
    cartGoodsNumberInput(newval) {
      if (newval <= 0) {
        return (this.number = 1);
      }
      newval = `${newval}`.split(".")[0] * 1;
      this.number = newval;
      this.$emit("cartGoodsNumberInput", newval, this.index);
    },
    changeOrderNumber(isReduce) {
      this.$emit("changeOrderNumber", this.index, isReduce);
    },
    itemClick() {
      // if(this.isSeatFee){
      //   return
      // }
      this.$emit("itemClick", this.index, this.canChangeNumber, this.placeNum);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .number-box .el-input__inner {
  border: none;
}
::v-deep .el-button--text {
  color: #000;
}
::v-deep .number-box .el-input__inner {
  border: none;
  padding: 0 4px;
  text-align: center;
}
.isSeatFee {
  background: #3f9eff;
  color: #fff;
  font-size: 12px;
}
.icon-remove {
  border: 1px solid #d8d8d8;
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;

  &::after {
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background: #999;
  }
}
.icon-add {
  color: rgb(34, 191, 100);
  font-size: 22px;
  cursor: pointer;
}
.flex.order-item {
  padding: 4px;
  border-radius: 2px;
  display: flex;
  overflow: visible;
  cursor: pointer;
  align-items: flex-start;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0);
  transition: all 0.3s;
  .pack {
    right: 100%;
    width: 18px;
    height: 18px;
    background: #35ac6a;
    border-radius: 4px 0 4px 0;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 17px;
  }
  .tui {
    right: 100%;
    width: 18px;
    height: 18px;
    background: #ac4735;
    border-radius: 4px 0 4px 0;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 17px;
  }
  &.active {
    background-color: rgba(0, 0, 0, 0.04);
  }

  .total-price {
    width: 94px;
    font-size: 16px;
    text-align: right;
  }

  .good-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 70px;

    .specSnap {
      color: #999;
      font-size: 12px;
      margin-top: 3px;
    }
  }

  .name {
    font-size: 13px;
    text-align: left;
    color: #212121;
    overflow: hidden;
  }

  .img {
    width: 59px;
    height: 59px;
    position: relative;
    margin-right: 10px;

    img {
      width: 59px;
      height: 59px;
    }
  }
}
.note {
  max-width: 70%;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  color: #999;
  margin-top: 5px;
  word-break: break-all;
}
.order-number-box {
  position: relative;

  .absolute {
    width: 60px;
    height: 40px;
    right: -38px;
    top: -14px;
    position: absolute;

    .order-input-number {
      position: absolute;
      right: -6px;
      top: 0;
      justify-content: center;
      align-items: center;
      display: none;
      background-color: #fff;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
      padding: 9px 6px;
      background-color: #fff;
      height: 40px;
    }

    &:hover .order-input-number {
      display: flex;
    }
  }
}
.good_info_discount {
  height: 16px;
  padding: 0 3px;
  color: #ff3f3f;
  background-color: rgba(255, 63, 63, 0.1);
  border-radius: 2px;
  margin-left: 6px;
  font-size: 12px;
  white-space: nowrap;
}
</style>