<template>
  <div class="card" :class="classObject" @click="handleClick">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    checked: {
      type: Boolean,
      default: false
    },
    showSelectIcon: {
      type: Boolean,
      default: true
    },
    borderColor: {
      type: String,
      default: ''
    },
    border: {
      type: Boolean,
      default: true
    },
    alwaysShowIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isChecked: false
    }
  },
  computed: {
    classObject() {
      return {
        'active': this.isChecked,
        'has-border': this.border,
        'hide-icon': !this.alwaysShowIcon,
        'check-icon': true
      }
    }
  },
  watch: {
    checked(nVal) {
      this.isChecked = nVal
    }
  },
  created() {
    this.isChecked = this.checked
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped lang="scss">
$active-color: #ff6d6d;

.card {
  display: inline-block;
  margin-right: 16px;
  position: relative;
  border-radius: 4px;
  cursor: pointer;

  &.has-border{
    border-width: 1px;
    border-style: solid;
    border-color: #d8d8d8;
  }

  &.check-icon{
    &::after{
      position: absolute;
      display: block;
      content: '';
      bottom: 0;
      right: 0;
      width: 26px;
      height: 26px;
      background: url(~@/assets/img/icon-select.png) no-repeat center;
    }
  }

  &.hide-icon{
    &::after{
      display: none;
    }
  }

  &.active {
    border-color: $active-color;
    &::after {
      display: block;
      background: url(~@/assets/img/icon-select-active.png);
    }
  }
}
</style>
