<template>
  <span
    class="icon-freeze"
    :style="{
      color: innerValue ? '#1890ff' : '',
      display: innerValue ? 'inline-block' : '',
    }"
  >
    <i
      v-if="innerValue"
      class="el-icon-lock pl-1"
      style="
        color: #1890ff;
        cursor: pointer;
        font-weight: 600;
        transition: 500ms;
      "
      @click="onFreeze"
    ></i>
    <i
      v-else
      class="el-icon-unlock pl-1"
      style="cursor: pointer; font-weight: 600; transition: 500ms"
      @click="onFreeze"
    ></i>
  </span>
</template>

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