<template>
  <uni-popup ref="popupLimit" type="center" :mask-click="false">
    <view class="limit-box">
      <view class="limit-box-title">以下商品已限制售卖数量，现需按照限购数量购买，请确认：</view>
      <scroll-view scroll-y="true" class="limit-box-list">
        <view v-for="(item, i) in list" :key="i" class="LBL-item">
          <image class="LBL-item-img" :src="item.skuImg" />
          <view class="LBL-item-proinfo">
            <view class="LBL-item-proinfo-name">
              {{ item.skuName }}
            </view>
            <view class="LBL-item-proinfo-nums">
              <text class="LBL-IPN-limit">限购{{ item.commonLimitCount }}件</text>
              <text class="LBL-IPN-count">x{{ item.count }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="limit-box-btns">
        <view class="limit-box-btns-btn" @click="onCancle">取消</view>
        <view class="limit-box-btns-btn" @click="onBuy">继续购买</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: "GoodLimitPopup",
  props: {
    list: {
      type: Array,
      default: () => []
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value(v) {
      if (v) {
        this.$refs.popupLimit.open();
      } else {
        this.$refs.popupLimit.close();
      }
    }
  },
  methods: {
    onCancle() {
      this.$emit("input", false);
    },
    onBuy() {
      this.$emit("continueBuy");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/var.scss";
.limit-box {
  position: fixed;
  z-index: 1112;
  left: 50%;
  top: 50%;
  width: 622rpx;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 32rpx;
  padding-top: 48rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  &-title {
    color: #000;
    text-align: center;
    line-height: 40rpx;
    padding: 0 48rpx;
  }
  &-list {
    margin-top: 20rpx;
    padding: 10rpx 48rpx 20rpx 48rpx;
    max-height: 476rpx;
    overflow-x: hidden;
    overflow-y: auto;
    .LBL-item {
      height: 112rpx;
      display: flex;
      justify-content: space-between;
      margin-bottom: 24rpx;
      &-img {
        display: block;
        width: 112rpx;
        height: 112rpx;
        border-radius: 10rpx;
        overflow: hidden;
      }
      &-proinfo {
        padding-left: 16rpx;
        width: 400rpx;
        &-name {
          font-size: 24rpx;
          color: #999;
          line-height: 32rpx;
          @include mx_multline_overwrite();
        }
        &-nums {
          padding-top: 20rpx;
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
          .LBL-IPN-limit {
            color: #ec1500;
          }
        }
      }
      &:last-child {
        margin: 0;
      }
    }
  }
  &-btns {
    display: flex;
    height: 96rpx;
    &-btn {
      flex: 1;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      &:nth-child(2) {
        color: #ec1500;
        border-left: 1rpx solid #ebedf0;
      }
    }
  }
}
</style>
