<!--
 * @Author: ChenChanghua
 * @Date: 2022-07-12 14:52:53
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-05-04 
 * @Description: file content
-->
<script setup>
import { ref, inject } from "vue";

const props = defineProps({
  data: Object,
  query: Object,
  onAction: Object,
});

const globalInfo = inject("globalInfo");

const focused = ref(false);
const active = ref(false);

// 自身的焦点状态自己记录, 通过回调来改变
const onFocus = () => {
  globalInfo.tabId = props.query.id;
  focused.value = true;
  active.value = false;
};
const onBlur = () => {
  focused.value = false;
  active.value =
    props.query.getCurrentFocusId().id === props.query.id ? true : false;
};
const onClick = () => {
  console.log("tab item onclick ", props.data);
};

// 一般在create的时候进行回调的注册, 使用 option api的可以在created时进行注册
props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);
props.onAction.register("onClick", onClick);
</script>

<template>
  <div
    :style="{
      width: data.width,
      height: data.height,
      transform: focused ? 'scale3d(1.2, 1.2, 1.2)' : '',
      transition: 'transform 0.2s linear',
    }"
  >
    <div
      v-if="!focused && active"
      :style="{
        left: -2,
        top: -2,
        width: data.width + 4,
        height: data.height + 4,
        backgroundColor: '#00FF00',
      }"
    ></div>
    <div
      v-if="focused"
      :style="{
        left: -2,
        top: -2,
        width: data.width + 4,
        height: data.height + 4,
        backgroundColor: '#FF0000',
      }"
    ></div>
    <div
      :style="{
        width: data.width,
        height: data.height,
        fontSize: 30,
        color: '#FFFFFF',
        backgroundColor: data.color,
      }"
    >
      {{ data.content }}
    </div>
  </div>
</template>