<!--
 * @Author: ChenChanghua
 * @Date: 2023-03-09 15:33:54
 * @Description: file content
-->
<script setup>
import { ref, onMounted } from "vue";
import borderLeft from "../PerformanceTest/assets/line_left.png";
import borderMid from "../PerformanceTest/assets/line_mid.png";
import borderRight from "../PerformanceTest/assets/line_right.png";

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

console.log("Massive-MetroItem item created ", props.pre, props.data.content);

const focused = ref(false);

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

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


onMounted(()=>{
  console.log("Massive-MetroItem item mounted ", props.pre, props.data.content);
})

</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"
      :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 class="box1">
      <div class="border-left" :style="{ backgroundImage: borderLeft }"></div>
      <div
        class="border-mid"
        :style="{
          backgroundImage: borderMid,
        }"
      ></div>
      <div
        class="border-right"
        :style="{
          backgroundImage: borderRight,
        }"
      ></div>
      <div class="prize-title-font prize-title-layout">券后</div>
    </div>

    <div class="box2">
      <div class="border-left" :style="{ backgroundImage: borderLeft }"></div>
      <div
        class="border-mid"
        :style="{
          backgroundImage: borderMid,
        }"
      ></div>
      <div
        class="border-right"
        :style="{
          backgroundImage: borderRight,
        }"
      ></div>
      <div class="prize-title-font prize-title-layout">券后</div>
    </div>

    <div class="sold-text">
      {{ `已售12件` }}
    </div>
    <div class="prize-font">
      {{ `¥40` }}
    </div>
  </div>
</template>

<style scoped>
.box1 {
  left: 5;
  top: 40;
}

.box2 {
  left: 45;
  top: 40;
}

.border-left {
  width: 7;
  height: 25;
}
.border-mid {
  left: 7;
  width: 37;
  height: 25;
}
.border-right {
  left: 43;
  width: 7;
  height: 25;
}
.frame-background {
  width: 213;
  height: 337;
  border-radius: 10;
  background-color: #f7f7f4;
  transition: transform 0.2s linear;
}

.poster-holder {
  width: 213;
  height: 213;
  border-radius: 10 10 0 0;
  background-color: #cfcac6;
}
.poster {
  width: 213;
  height: 213;
  border-radius: 7 7 0 0;
}

.title-layout {
  width: 193;
  height: 29;
}
.ticket-text {
  height: 24;
  color: #ffffff;
  font-size: 16;
  text-align: center;
  line-height: 24;
}
.sold-text {
  top: 60;
  width: 100;
  height: 25;
  color: #ff7a00;
  font-size: 20;
  text-align: center;
  line-height: 25;
}
.prize-title-layout {
  width: 35;
  height: 24;
  left: 13;
}
.prize-title-font {
  color: #de2825;
  text-align: center;
  font-size: 17;
  line-height: 24;
}
.prize-font {
  left: 50;
  width: 158; /*213 - 55*/
  height: 37;
  line-height: 37;
  font-size: 28;
  color: #de2825;
}
</style>
