<template>
  <!-- cc_rela -->
  <div
    class="bg-wrap"
    :class="classNames"
    :style="`width:${config.width}rem;height:${
      config.height
    }rem;background-size: ${config.width}rem ${config.height}rem; background-image: url('${config.bg}'); ${
      isHidden ? 'overflow:hidden;' : ''
    }${styleStrs}`"
    @click="$emit('onTap')"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "bg-wrap",
  props: {
    isCover: Boolean,
    anmio: Boolean,
    config: Object,
    isHove: Boolean,
    isHidden: {
      type: Boolean,
      default: true,
    },
    imgClass: {
      type: String,
      default: "",
    },
    styleStr: {
      type: String,
      default: "",
    },
    classCom: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      show: false,
    };
  },
  components: {},
  watch: {
    isHove: {
      handler(val) {
        if (val) {
          this.show = val;
        } else {
          setTimeout(() => {
            this.show = false;
          }, 300);
        }
      },
      immediate: true,
    },
  },
  computed: {
    styleStrs() {
      const { styleStr, isCover } = this;
      return (
        styleStr);
    },
    classNames() {
      const { classCom, anmio, show } = this;
      let str = classCom + (anmio ? " __bg_anmio" : "");
      return str + (show ? " cc_hove" : "");
    },
  },
  created() {},
  mounted() {},

  methods: {},
};
</script>

<style scoped>
.bg-wrap {
  background-repeat: no-repeat;
  
}
.__bg_anmio {
  transition: all 0.3s ease-in-out;
}
.slot_c {
  top: 0;
  left: 0;
}
</style>
