<template>
  <div class="footer">
    <div class="footer-wrapper">
      <cr-checkbox v-model="checked" shape="round" @change="checkboxAllChange">全选</cr-checkbox>
      <cr-button type="primary" plain hairline shape="circle" @click="deleteCheckboxEvent">
        删除
      </cr-button>
    </div>
  </div>
</template>

<script>
const UPDATE_ALL = 'update:checkbox-all';
const CHECK_ALL_EVENT = 'change';
const DELETE_EVENT = 'delete';
export default {
  props: {
    checkboxAll: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked: false
    };
  },
  watch: {
    checkboxAll(val) {
      this.checked = val;
    }
  },
  methods: {
    checkboxAllChange(value) {
      console.log('=============>checkboxAllChange', value);
      this.$emit(UPDATE_ALL, value);
      this.$emit(CHECK_ALL_EVENT, value);
      // if (value) {
      //   this.$parent.selectAll();
      // } else {
      //   this.$parent.selectInverse();
      // }
    },
    deleteCheckboxEvent() {
      this.$emit(DELETE_EVENT);
    }
  }
};
</script>

<style lang="less" scoped>
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: @white;
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(11px);
  z-index: 2;

  /deep/ .cr-checkbox__label {
    color: @gray-4;
  }

  &-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    .cr-button {
      width: 130px;
      /deep/ .cr-button__text {
        font-weight: bold;
      }
    }
  }
}
</style>
