<template>
  <div class="icon-item-box" v-show="!isGroup">
    <a-space>
      <component :is="status.lock ? LockOutlined : UnlockOutlined" @click="lockHandle" class="icon-item" />
      <component :is="status.hide ? EyeInvisibleOutlined : EyeOutlined" @click="showHandle" class="icon-item" />
    </a-space>
  </div>
</template>

<script setup name="LayersStatus">
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import { LockOutlined, UnlockOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';

const props = defineProps({
  isGroup: {
    type: Boolean,
    default: false
  },
  hover: {
    type: Boolean,
    default: false
  },
  status: {
    type: Object,
    default: () => ({
      lock: false,
      hide: false
    })
  }
});

const chartEditStore = useChartEditStore();

// 隐藏 / 展示
const showHandle = e => {
  e.stopPropagation();
  props.status.hide ? chartEditStore.setShow() : chartEditStore.setHide();
};

// 锁定 / 解锁
const lockHandle = e => {
  e.stopPropagation();
  props.status.lock ? chartEditStore.setUnLock() : chartEditStore.setLock();
};
</script>

<style lang="less" scoped>
.icon-item-box {
  white-space: nowrap;

  .icon-item {
    opacity: 0;

    &.active,
    &:hover {
      color: var(--primary-color);
    }
    &.active {
      opacity: 1 !important;
    }
  }
}
</style>
