<script setup>
import error from '../images/error.png'
import success from '../images/success.png'
import warning from '../images/warning.png'
import info from '../images/info.png'

const props = defineProps({
  type: {
    type: String,
    default: 'success'
  },
  message: {
    type: String,
    default: ''
  },
  title: {
    type: Object,
    default: () => ({
      text: '',
      color: '',
      align: 'left'
    })
  },
  subTitle: {
    type: Object,
    default: () => ({
      text: '',
      color: '',
      align: 'left'
    })
  },
  showIcon: {
    type: Boolean,
    default: true
  },
  style: {
    type: Object,
    default: () => ({})
  }
})

const typeConfig = {
  info: {
    imgSrc: info,
    borderColor: '#C6DFFB',
    bgColor: '#ECF5FE',
  },
  success: {
    imgSrc: success,
    borderColor: '#C5E7D5',
    bgColor: '#EDF7F2',
  },
  error: {
    imgSrc: error,
    borderColor: '#FFD4D4',
    bgColor: '#FFF0F0',
  },
  warning: {
    imgSrc: warning,
    borderColor: '#FFE2BA',
    bgColor: '#FFF7EC',
  }
}

// 修正计算属性，使用 props.style
const finalStyle = computed(() => {
  return {
    borderColor: props.style?.borderColor || typeConfig[props.type].borderColor,
    backgroundColor: props.style?.backgroundColor || typeConfig[props.type].bgColor,
    width: props.style?.width || '343px',
    height: props.style?.height || 'auto',
    minHeight: '46px',
    ...props.style
  }
})
</script>

<template>
  <div
    :class="`box-border flex items-center border rounded-[4px] px-[15px] shadow-sm py-8px ${!message?'justify-center':''}`"
    :style="finalStyle"
  >
    <div v-if="showIcon" class="mr-[12px]">
      <img
        :src="typeConfig[type].imgSrc"
        class="w-20px h-20px"
        style="object-fit: contain"
        alt=""
      >
    </div>
    <div class="flex flex-col justify-center">
      <!-- 如果是简单文本模式 -->
      <div v-if="message" class="text-[14px] line-height-none">
        {{ message }}
      </div>
      <!-- 如果是标题+副标题模式 -->
      <template v-else>
        <div 
          v-if="title.text"
          class="text-[14px] line-height-20px"
          :style="{ 
            color: title.color || 'inherit',
            textAlign: title.align || 'left'
          }"
        >
          {{ title.text }}
        </div>
        <div 
          v-if="subTitle.text"
          class="text-[12px] leading-normal mt-1 line-height-17px"
          :style="{ 
            color: subTitle.color || '#939393',
            textAlign: subTitle.align || 'left'
          }"
        >
          {{ subTitle.text }}
        </div>
      </template>
    </div>
  </div>
</template>