<template>
  <view
      class="card-wrapper"
      :style="{
          backgroundImage: 'url(' + ossurl.box.lotteryBg + ')'
      }"
  >
      <view class="level">
        <image
          :src="LEVEL_MAP[data.level].titleText"
          mode="aspectFit"

      /></view>
      <view class="title">{{ data.name }}</view>
      <image
          class="super-image"
          :src="data.cover"
          mode="aspectFit"
          :style="{
              top: coverSize.top + 'rpx',
              width: coverSize.width + 'rpx',
              height: coverSize.height + 'rpx'
          }"
      />
  </view>
</template>

<script>
  import { LEVEL_MAP } from '@/utils/config'
  import resource from '@/utils/resource'
  import ossurl from '@/utils/ossurl'
  export default {
      props: {
          data: Object,
          size: {
              default: { width: 287, height: 436 },
              type: Object
          },
          coverSize: {
              default: { width: 234, height: 296, top: 26 },
              type: Object
          },
          textSize: {
              default: { width: 184, height: 81, bottom: 32 },
              type: Object
          },
          addSize: {
              default: { width: 186, height: 42 },
              type: Object
          },
          showAdd: Boolean
      },
      data() {
          return {
              resource,
              ossurl,
              LEVEL_MAP
          }
      }
  }
</script>

<style lang="scss" scoped>
  .card-wrapper {
      position: relative;
      width: 210rpx;
      height: 300rpx;
      background-size: 100% 100%;
      padding: 24rpx;
      text-align: center;
      .level {
          font-size: 24rpx;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 700;
          color: #000000;
          image{
            width: 90rpx;
            height: 32rpx;
          }
      }
      .title {
          font-size: 20rpx;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 350;
          color: #b58100;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
      }
      .super {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
      }
      .super-image {
          width: 100%;
          height: 450rpx;
      }
      .super-text {
          width: 182rpx;
          height: 56rpx;
          position: absolute;
          bottom: 40rpx;
      }
      .add-1 {
          position: absolute;
          opacity: 0;
          bottom: 0;
          &.add-animal {
              animation: add-bottom-top 2s forwards;
          }
      }
      @keyframes add-bottom-top {
          0% {
              bottom: 30%;
              opacity: 0.3;
          }
          60% {
              bottom: 50%;
              opacity: 1;
          }
          100% {
              bottom: 65%;
              opacity: 0;
          }
      }
  }
</style>
