<!--
 * @Author: ChenChanghua
 * @Date: 2021-06-10 14:17:17
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-07-11 18:20:58
 * @Description: file content
-->
<script setup>
import posterHolder from "../assets/holder_logo.png";
import couponLeft from "../assets/coupon_left.png";
import couponRight from "../assets/coupon_right.png";
import couponMid from "../assets/coupon_mid.png";
import borderLeft from "../assets/line_left.png";
import borderMid from "../assets/line_mid.png";
import borderRight from "../assets/line_right.png";
import { ref, computed } from "vue";

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

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

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

props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);

const focusTransform = computed(() => {
  return focused.value ? "scale3d(1.2, 1.2, 1)" : null;
});

const savePrizeWidth = computed(() => {
  return 10 * props.data.savePrize.length + 26;
});

const soldTotalWidth = computed(() => {
  let width = 44 + 22; //base width;
  if (props.data.soldTotal >= 10000) {
    let text = parseInt(props.data.soldTotal / 10000) + "";
    width += text.length * 12 + 22;
  } else {
    width += (props.data.soldTotal + "").length * 12;
  }
  return width;
});

const soldTotalText = computed(() => {
  let text = "";
  if (props.data.soldTotal >= 10000) {
    text = parseInt(props.data.soldTotal / 10000) + "万";
  } else {
    text = props.data.soldTotal;
  }
  return text;
});
</script>

<template>
  <div
    class="frame-background"
    :style="{
      transform: focusTransform,
    }"
  >
    <div class="poster-holder">
      <div
        :style="{
          width: 107,
          height: 23,
          left: 53,
          top: 95,
          backgroundImage: posterHolder,
        }"
      />
    </div>
    <div
      class="poster"
      :style="{
        backgroundImage: `url(${data.pictUrl})`,
      }"
    />
    <div class="title-font title-layout">
      {{ data.index + data.name }}
    </div>
    <div
      :style="{
        height: 24,
        left: 13,
        top: 256,
        width: savePrizeWidth,
      }"
    >
      <div
        :style="{ width: 5, height: 24, backgroundImage: couponLeft }"
      />
      <div
        :style="{
          left: 5,
          width: savePrizeWidth - 11,
          height: 24,
          backgroundImage: couponMid,
        }"
      />
      <div
        :style="{
          left: savePrizeWidth - 6,
          width: 5,
          height: 24,
          backgroundImage: couponRight,
        }"
      />
      <div
        class="ticket-text"
        :style="{
          width: savePrizeWidth,
        }"
      >
        {{ `${data.savePrize}元券` }}
      </div>
    </div>

    <div
      :style="{
        top: 256,
        left: 27 + savePrizeWidth,
      }"
    >
      <div
        :style="{ width: 7, height: 25, backgroundImage: borderLeft }"
      />
      <div
        :style="{
          left: 7,
          width: soldTotalWidth - 13,
          height: 25,
          backgroundImage: borderMid,
        }"
      />
      <div
        :style="{
          left: soldTotalWidth - 7,
          width: 7,
          height: 25,
          backgroundImage: borderRight,
        }"
      />
      <div
        class="sold-text"
        :style="{
          width: soldTotalWidth,
        }"
      >
        {{ `已售${soldTotalText}件` }}
      </div>
    </div>

    <div
      :style="{
        height: 24,
        left: 13,
        top: 270,
        width: savePrizeWidth,
      }"
    >
      <div
        :style="{ width: 5, height: 24, backgroundImage: couponLeft }"
      />
      <div
        :style="{
          left: 5,
          width: savePrizeWidth - 11,
          height: 24,
          backgroundImage: couponMid,
        }"
      />
      <div
        :style="{
          left: savePrizeWidth - 6,
          width: 5,
          height: 24,
          backgroundImage: couponRight,
        }"
      />
      <div
        class="ticket-text"
        :style="{
          width: savePrizeWidth,
        }"
      >
        {{ `${data.savePrize}元券` }}
      </div>
    </div>
    <div
      :style="{
        top: 270,
        left: 27 + savePrizeWidth,
      }"
    >
      <div
        :style="{ width: 7, height: 25, backgroundImage: borderLeft }"
      />
      <div
        :style="{
          left: 7,
          width: soldTotalWidth - 13,
          height: 25,
          backgroundImage: borderMid,
        }"
      />
      <div
        :style="{
          left: soldTotalWidth - 7,
          width: 7,
          height: 25,
          backgroundImage: borderRight,
        }"
      />
      <div
        class="sold-text"
        :style="{
          width: soldTotalWidth,
        }"
      >
        {{ `已售${soldTotalText}件` }}
      </div>
    </div>

    <div
      :style="{
        height: 24,
        left: 13,
        top: 280,
        width: savePrizeWidth,
      }"
    >
      <div
        :style="{ width: 5, height: 24, backgroundImage: couponLeft }"
      />
      <div
        :style="{
          left: 5,
          width: savePrizeWidth - 11,
          height: 24,
          backgroundImage: couponMid,
        }"
      />
      <div
        :style="{
          left: savePrizeWidth - 6,
          width: 5,
          height: 24,
          backgroundImage: couponRight,
        }"
      />
      <div
        class="ticket-text"
        :style="{
          width: savePrizeWidth,
        }"
      >
        {{ `${data.savePrize}元券` }}
      </div>
    </div>
    <div
      :style="{
        top: 280,
        left: 27 + savePrizeWidth,
      }"
    >
      <div
        :style="{ width: 7, height: 25, backgroundImage: borderLeft }"
      />
      <div
        :style="{
          left: 7,
          width: soldTotalWidth - 13,
          height: 25,
          backgroundImage: borderMid,
        }"
      />
      <div
        :style="{
          left: soldTotalWidth - 7,
          width: 7,
          height: 25,
          backgroundImage: borderRight,
        }"
      />
      <div
        class="sold-text"
        :style="{
          width: soldTotalWidth,
        }"
      >
        {{ `已售${soldTotalText}件` }}
      </div>
    </div>

    <div class="prize-title-font prize-title-layout">券后</div>
    <div class="prize-font">
      {{ `¥${data.prize - data.savePrize}` }}
    </div>
  </div>
</template>

<style scoped>
.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-font {
  font-size: 21;
  color: #73665c;
  line-height: 29;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
.title-layout {
  top: 221;
  left: 13;
  width: 193;
  height: 29;
}
.ticket-text {
  height: 24;
  color: #ffffff;
  font-size: 16;
  text-align: center;
  line-height: 24;
}
.sold-text {
  height: 25;
  color: #ff7a00;
  font-size: 20;
  text-align: center;
  line-height: 25;
}
.prize-title-layout {
  width: 35;
  height: 24;
  top: 296;
  left: 13;
}
.prize-title-font {
  color: #de2825;
  text-align: center;
  font-size: 17;
  line-height: 24;
}
.prize-font {
  top: 289;
  left: 53;
  width: 158; /*213 - 55*/
  height: 37;
  line-height: 37;
  font-size: 28;
  color: #de2825;
}
</style>