<template>
  <div class="compass">
    <!-- 罗盘位置 左上右下  1是左  2是上 3是右  4是下 -->
    <img :src="clickApp !== 1 ? a1 : a2" class="img-style img1" @click="showLeft(1)" />
    <img :src="clickApp !== 2 ? b1 : b2" class="img-style img2" @click="showLeft(2)" />
    <img :src="clickApp !== 3 ? c1 : c2" class="img-style img3" @click="showLeft(3)" />
    <img :src="clickApp !== 4 ? d1 : d2" class="img-style img4" @click="showLeft(4)" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useStore } from 'vuex';
import { SET_LAYOUT, SET_FIXED_HEADER } from '@/store/modules/app/mutations';
import bus from '@/utils/bus';
import a1 from '@/assets/a1.png';
import b1 from '@/assets/b1.png';
import c1 from '@/assets/c1.png';
import d1 from '@/assets/d1.png';

import a2 from '@/assets/a2.png';
import b2 from '@/assets/b2.png';
import c2 from '@/assets/c2.png';
import d2 from '@/assets/d2.png';
export default defineComponent({
  setup() {
    const store = useStore();
    const clickApp = ref(1);
    const showLeft = (num): void => {
      clickApp.value = num;
      store.commit(`app/${SET_FIXED_HEADER}`, false);
      store.commit(`app/${SET_LAYOUT}`, 'mix');
      bus.emit('homePanel:refreshApplications', num);
    };
    return { showLeft, clickApp, a1, b1, c1, d1, a2, b2, c2, d2 };
  },
});
</script>
<style lang="less" scoped>
.compass {
  top: 0;
  left: 0;
  z-index: 999;
  width: 100px;
  height: 100px;
  // position: relative;
  // 使用relative会影响高度，先设为fixed
  position: fixed;
  margin: 10px 0 0 10px;
}
.img-style {
  width: 50px;
  height: 50px;
  position: absolute;
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}
.img1 {
  top: 20%;
  z-index: 1;
  left: -5%;
}
.img2 {
  left: 25%;
}
.img3 {
  top: 36%;
  left: 25%;
  z-index: 2;
}
.img4 {
  top: 20%;
  left: 55%;
}
.img-style:hover,
.img-style:focus,
.img-style:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>
