<script setup>
import { ref, inject, shallowRef, onMounted, computed } from "vue";
const modeIsKey = inject("modeIsKey");
const tabFocus = inject("tabFocus");
const globalInfo = inject("globalInfo");
const colorList = ["#FFD700", "#FF1493", "#1E90FF"];
const props = defineProps({
  data: Object,
  query: Object,
  onAction: Object,
});

const focused = ref(false);
const divRef = shallowRef();

const onFocus = () => {
  focused.value = true;
};

const onBlur = () => {
  focused.value = false;
};

const onClicked = () => {
  console.log("item clicked", props.data);
};

const onGaze = () => {};

const onIgnore = () => {};

const isSlect = computed(() => {
  if (modeIsKey()) {
    return (
      !tabFocus.value &&
      !focused.value &&
      globalInfo.updateTabId == props.data.indexId
    );
  } else {
    return globalInfo.updateTabId == props.data.indexId;
  }
});

props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);
props.onAction.register("onClick", onClicked);
props.onAction.register("onGaze", onGaze);
props.onAction.register("onIgnore", onIgnore);

// indexId为4时，是有子tab的电影tab
const fontSize = computed(() => {
  return props.data.isSubTab && props.data.indexId != 4 ? 26 : 30;
});
const fontWeight = computed(() => {
  return props.data.isSubTab && props.data.indexId != 4 ? "bold" : null;
});
const textColor = computed(() => {
  return props.data.isSubTab && props.data.indexId != 4
    ? colorList[props.data.indexId % 3]
    : "#ffffff";
});

onMounted(() => {});
</script>

<template>
  <div
    :style="{
      fontSize: fontSize,
      width: data.width,
      height: data.height,
      color: textColor,
      backgroundColor: isSlect ? 'rgba(211,115,78,0.4)' : 'rgba(0,0,0,0)',
      borderRadius: 15,
      textAlign: 'center',
      lineHeight: data.height,
      transform: focused ? 'scale3d(1.1,1.1,1)' : 'scale3d(1,1,1)',
      fontWeight: fontWeight,
    }"
  >
    {{ data.content }}
  </div>
</template>

<style scoped></style>
