<template>
  <div style="position: relative; width: 100%">
    <img :src="whiteBox" alt="" width="100%" style="display: block" />
    <div
      style="
        width: 48%;
        height: 46%;
        border-radius: 12px;
        margin: 2.5%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
        display: flex;
        justify-content: flex-end;
      "
      :style="{ backgroundImage }"
    >
      <div
        style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
      >
        <div class="type" :style="{ fontSize }">{{ type }}</div>
      </div>
    </div>
    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 4%">
      <div
        style="height: 100%; display: flex; flex-direction: column; justify-content: space-around"
      >
        <div class="contentTime">{{ date }}</div>
        <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
          <div class="contentText">Target: {{ target }}</div>
          <div class="contentText">Salary: ${{ salary }}</div>
        </div>
        <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
          <div class="contentText">Time(Days):{{ days }}</div>
          <div class="contentText" v-if="income">Total income:{{ income }}</div>
        </div>
      </div>
      <div
        v-if="more"
        class="moreBt"
        style="position: absolute; bottom: 8%; right: 4%; color: #bb92ff; font-weight: 500"
        @click="btMore"
      >
        More >
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
const whiteBox = new URL('../../assets/images/HostCenter/whitebox.png', import.meta.url).href

const props = defineProps({
  type: {
    type: String,
    default: '',
  },

  date: {
    type: String,
    default: '',
  },

  target: {
    type: String,
    default: '',
  },

  salary: {
    type: String,
    default: '',
  },

  income: {
    type: String,
    default: '',
  },

  days: {
    type: String,
    default: '',
  },

  more: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['showMore'])
const btMore = () => {
  emit('showMore')
}

const backgroundImage = ref('')
const fontSize = ref('')

watch(
  () => props.type,
  (newType) => {
    if (newType == 'In Progress') {
      backgroundImage.value = 'linear-gradient(112deg, #759CFF 5.66%, #3D73FF 42.49%)'
      fontSize.value = '0.9em'
    }
    if (newType == 'Pending') {
      backgroundImage.value = 'linear-gradient(112deg, #FF7578 5.66%, #FF3D40 42.49%)'
      fontSize.value = '1em'
    }
    if (newType == 'Completed') {
      backgroundImage.value = 'linear-gradient(112deg, #75FF98 5.66%, #3DFF54 42.49%)'
      fontSize.value = '1em'
    }
    if (newType == 'Out Of Account') {
      backgroundImage.value = 'linear-gradient(112deg, #BDBDBD 5.66%, #AEAEAE 42.49%)'
      fontSize.value = '0.7em'
    }
    return
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
* {
  color: rgba(0, 0, 0, 0.8);
  font-family: 'SF Pro Text';
  font-weight: 700;
}

.type {
  color: #fff;
  font-weight: 600;
}

.contentTime {
  font-size: 1.1em;
}

.contentText {
  font-size: 1em;
}

.moreBt {
  font-size: 1em;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}
</style>
