<template>
  <div
    class="vw-switch-bgc"
    @click="handleSwitch"
    :class="[value ? 'active' : '', bgcDisabled ? 'disabled' : '']"
  ></div>
</template>
<script>
export default {
  name: "VwSwitchBgc",
  inject: {
    vwForm: {
      default: "",
    },
  },
  props: {
    value: Number,
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {}
  },
  computed: {
    bgcDisabled() {
      return this.disabled || (this.vwForm || {}).disabled
    },
  },
  methods: {
    handleSwitch() {
      if (this.bgcDisabled) return
      let value = this.value ? 0 : 1
      this.$emit("input", value)
    },
  },
}
</script>
<style lang="scss" scoped>
.vw-switch-bgc {
  border: 1px solid #dcdfe6;
  cursor: pointer;
  height: 32px;
  width: 100%;
  &.active {
    background-color: #f56c6c;
  }
  &.disabled {
    cursor: not-allowed;
  }
}
</style>