<template>
  <i
    v-if="innerValue"
    class="el-icon-circle-close pl-1 icon-hide"
    style="cursor: pointer; font-weight: 600; transition: 500ms"
    @click="onHide"
  ></i>
</template>

<script>
export default {
  name: "IconHide",
  components: {},
  props: {
    value: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    innerValue: {
      get() {
        return this.$props.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },
  watch: {},
  methods: {
    onHide() {
      this.innerValue = !this.innerValue;
      this.$emit("hide");
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<style scoped></style>
