<template>
  <div class="shopping-cart-footer flex-default">
    <div class="radio flex-default">
      <div
        class="m-icon shop-radio"
        :class="{ checked: allChecked }"
        @click="changeRadio"
      />
      <span class="label">全选</span>
    </div>
    <div class="total flex-default">
      <span class="label" v-show="mode === 'settlement'">总计：</span>
      <m-price :amt="getFooterData.price" v-show="mode === 'settlement'" />
    </div>
    <van-button
      class="submit-btn"
      v-if="mode === 'settlement'"
      @click="confirmBuy"
      round
    >
      去结算({{ getFooterData.num }})
    </van-button>
    <van-button
      class="submit-btn delete"
      :disable="getFooterData.num === 0"
      v-else
      @click="deleteSubmit"
      round
    >
      删除
    </van-button>
  </div>
</template>

<script>
export default {
  props: ["getFooterData", "allChecked", "mode"],
  data() {
    return {};
  },
  methods: {
    changeRadio() {
      this.$emit("changeRadio");
    },
    deleteSubmit() {
      this.$emit("deleteSubmit");
    },
    confirmBuy() {
      if (!this.checkLogin()) return;
      if (this.getFooterData.num < 1) return;
      this.$emit("buy");
    },
  },
};
</script>

<style lang="less">
.shopping-cart-footer {
  //   position: absolute;
  //   bottom: 0;
  width: 100%;
  height: 50px;
  background: #ffffff;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0px -3px 5px 0px rgba(243, 243, 243, 1);
  color: #2b2b3a;
  z-index: 10;
  > .radio {
    align-items: center;
    margin-right: 10px;

    .label {
      margin-left: 4px;
      font-size: 12px;
    }
  }
  .shop-radio {
    width: 16px;
    height: 16px;
    border: 1px solid #aeaeae;
    flex-shrink: 0;
    margin-right: 6px;
    align-items: center;
    border-radius: 50%;
    &.checked {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAAOdQTFRFAAAAJG3/K2r/K2r0K2PxLWb5LGf2LWb2K2b1LGb1LGf1K2b1LGb2LGb1LGb2LGb2LGb2LGb1LWf1Lmf1MGn1Mmr1NGz1PHL1PXL1PnP1P3P1QHX1RXj2TH32UID2VoT2Xor3bJT3b5b3cZj4eJ34ep74e5/4faH4fqH4gKP4gaT4gqX4haf4iKj4n7n6oLr6orz6pr76p7/6qcH6qsH6q8L6tcn7vc/7xNT7ytj809/81+L92eP82uT83OX83OX94ur96O797fL+7vL+8PT+9vn+9/n++Pr++vv+/f3+/f7+/v7+////oZMYlwAAABF0Uk5TAAcMGCQtV4mZm8fI4ur0+Pkx9AHAAAABJElEQVQ4y42T1XbDQAxEFccx07RNUkq5KTOknDJ5/v97+mCm486TfO54V9JKIqkUzbBd33dtQ1OkKtX0kMoz1RLu6AEKCvROnnctVGR1M95zUCOnl/5fywEnPqNjoUFWlIeORukiImpQhxYn6wACVUTMOr7xxhsAMEUUr4oHV+R1HwA8RbQqX5mS5zNRrIlR4duf5HHyYYidhMtDAMDcGcnT1G2LG0drrw/zAIa3JC+z41zxo2D3m3xcwOiZ5GQ2M/ix4YQk+bT5TvJugLwhumLrh4lelvIZu0mS48TxtVooyU7L3PmNDONizUbWqL2QJC9KTdFyrT4Iyft+kXtK/rEOw49R6QCz+NxH+yUeqP8ZmPaRax3a9rFvX5z21Wtf3ub1/wMg+EjsMx+V6AAAAABJRU5ErkJggg==");
      background-size: 100%;
      border: 0;
    }
  }
  > .total {
    flex: 1;
    align-items: flex-end;

    .label {
      font-size: 14px;
    }
  }

  > .submit-btn {
    font-size: 14px !important;
    width: fit-content !important;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 20px;
    background: linear-gradient(295deg, #488FF7 0%, #2C66F5 100%);
    color: #ffffff;
  }
  > .delete {
    background: #ffffff !important;
    color: #140603 !important;
    border: 1px solid #aeaeae;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 14px !important;
  }
}
</style>
