<template>
  <div style="position: relative; width: 100%">
    <img :src="bgUrl" alt="" width="100%" style="display: block" class="flipImg" />
    <div class="status">
      <div
        style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
      >
        <div style="color: #fff; font-weight: 600" :style="{ fontSize }">
          {{ getTypeText(type) }}
        </div>
      </div>
    </div>
    <div style="position: absolute; inset: 0; padding: 3% 4%">
      <div
        style="height: 100%; display: flex; flex-direction: column; justify-content: space-around"
      >
        <slot name="content"></slot>
      </div>
      <div class="moreBt" @click="btMore">{{ t('more') }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { setDocumentDirection } from '@/locales/i18n'

const { t, locale } = useI18n()

// 监听语言变化并设置文档方向
locale.value && setDocumentDirection(locale.value)

const progress = new URL('@/assets/images/Azizi/BDCenter/progress.png', import.meta.url).href
const completed = new URL('@/assets/images/Azizi/BDCenter/completed.png', import.meta.url).href
const progressLong = new URL('@/assets/images/Azizi/BDCenter/progressLong.png', import.meta.url)
  .href

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

  long: {
    type: Boolean,
    default: false,
  },

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

const bgUrl = computed(() => {
  if (props.type == 'In Progress' && props.long) {
    return progressLong
  } else if (props.type == 'In Progress') {
    return progress
  } else if (props.type == 'Completed') {
    return completed
  }
})

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

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

watch(
  () => props.type,
  (newType) => {
    if (newType == 'In Progress') {
      fontSize.value = '0.9em'
    }
    if (newType == 'Completed') {
      fontSize.value = '1em'
    }
    return
  },
  { immediate: true },
)

// 根据状态文本返回翻译后的文本
const getTypeText = (type) => {
  console.log('type:', type)

  switch (type) {
    case 'In Progress':
      return t('in_progress')
    case 'Completed':
      return t('completed')
    case 'Out of account':
      return t('out_of_account')
    case 'Pending':
      return t('pending')
    default:
      return type
  }
}
</script>

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

.contentTime {
  font-size: 1.1em;
}

.contentText {
  font-size: 1em;
}

.moreBt {
  font-size: 0.8em;
  position: absolute;
  bottom: 4%;
  right: 4%;
  color: #bb92ff;
  font-weight: 500;
}

.status {
  width: 48%;
  height: 40%;
  position: absolute;
  top: 0;
  right: 3%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

[dir='rtl'] .status {
  right: auto;
  left: 3%;
}

[dir='rtl'] .flipImg {
  transform: scaleX(-1);
}

[dir='rtl'] .moreBt {
  right: auto;
  left: 4%;
}

@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>
