<template>
  <cr-popup round position="center" :value="value" class="footer-popup">
    <div class="footer-popup-content">
      <p class="footer-popup-title">商品已超过限购数量，请修改购买数量，给您带来不便敬请谅解！</p>
      <div class="footer-popup-list">
        <div v-for="(item, index) in list" :key="index" class="footer-popup-list-shop">
          <img :src="item.skuImg" />
          <div class="footer-popup-list-shop-right">
            <p class="footer-popup-list-shop-right-title">
              {{ item.skuName }}
            </p>
            <div>
              <p>限购{{ item.commonLimitCount }}件</p>
              <p>×{{ item.count }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-popup-btn">
      <button @click="onCancle">取消</button>
      <button @click="keepBuy">继续购买</button>
    </div>
  </cr-popup>
</template>
<script>
export default {
  name: 'GoodLimitPopup',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onCancle() {
      this.$emit('input', false);
    },
    keepBuy() {
      this.$emit('continueBuy');
    }
  }
};
</script>
<style lang="less" scoped>
.footer {
  &-popup {
    width: 311px;
    &-content {
      padding: 24px 24px 0 24px;
    }
    &-title {
      font-size: 16px;
      text-align: center;
      color: #323233;
      line-height: 22px;
    }
    &-list {
      padding-bottom: 8px;
      max-height: 231px;
      overflow: auto;
      &-shop {
        display: flex;
        width: 100%;
        padding-top: 12px;
        img {
          width: 56px;
          height: 56px;
          border-radius: 5px;
        }
        &-right {
          width: 100%;
          position: relative;
          margin-left: 8px;
          &-title {
            font-size: 12px;
            color: #999999;
            padding-top: 5px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden; //溢出内容隐藏
            text-overflow: ellipsis; //文本溢出部分用省略号表示
            display: -webkit-box; //特别显示模式
            -webkit-line-clamp: 2; //行数
            line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 17px;
          }
          div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            bottom: -2px;
            width: 100%;
            p {
              &:nth-child(1) {
                color: #ec1500;
                font-size: 12px;
              }
              &:nth-child(2) {
                font-size: 12px;
                color: #333333;
              }
            }
          }
        }
      }
    }
    &-btn {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 48px;
      border-top: 1px solid #ebedf0;
      button {
        width: 50%;
        font-size: 16px;
        height: 100%;
        background: #fff;
        &:nth-child(1) {
          color: #323233;
          border-right: 1px solid #ebedf0;
        }
        &:nth-child(2) {
          color: #ec1500;
        }
      }
    }
  }
}
</style>
