<template>
  <el-dialog
    v-model="dialogVisible"
    :width="isMobile ? '90%' : '500px'"
    :close-on-click-modal="true"
    destroy-on-close
    class="customer-background-dialog"
    :fullscreen="isMobile"
  >
    <div class="background-info-content" v-if="currentMode">
      <div v-html="formattedBackground"></div>
    </div>
    <div v-else class="no-mode">
      暂无背景信息
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { useChatStore } from '@/store/chat'
import { marked } from 'marked'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

const chatStore = useChatStore()
const isMobile = ref(false)

const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const currentMode = computed(() => {
  return chatStore.chatModes[chatStore.currentMode]
})

const hasBackground = computed(() => {
  return currentMode.value?.background?.trim() !== ''
})

const formattedBackground = computed(() => {
  if (!currentMode.value?.background) return ''
  marked.setOptions({
    headerIds: false,
    mangle: false
  })
  return marked.parse(currentMode.value.background)
})

defineExpose({
  hasBackground
})

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.customer-background-dialog {
  :deep(.el-dialog) {
    @media screen and (max-width: 768px) {
      margin: 0 !important;
      max-width: 100% !important;
      border-radius: 0;
      
      .el-dialog__header {
        margin: 0;
        padding: 16px;
        border-bottom: 1px solid #eee;
      }

      .el-dialog__body {
        padding: 16px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
      }

      .el-dialog__footer {
        padding: 12px 16px;
        border-top: 1px solid #eee;
      }
    }
  }
}

.dialog-header {
  .dialog-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin: 0;
  }
}

.background-info-content {
  padding: 0;

  :deep(h1) {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #333;
  }

  :deep(h2) {
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 12px 0;
    color: #333;
  }

  :deep(h3) {
    font-size: 16px;
    font-weight: 600;
    margin: 16px 0 8px 0;
    color: #333;
  }

  :deep(p) {
    margin: 0 0 12px 0;
    line-height: 1.6;
    color: #666;

    &:last-child {
      margin-bottom: 0;
    }
  }

  :deep(ul), :deep(ol) {
    margin: 0 0 12px 0;
    padding-left: 20px;
    
    li {
      margin-bottom: 8px;
      line-height: 1.6;
      color: #666;

      &:last-child {
        margin-bottom: 0;
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  :deep(strong) {
    font-weight: 600;
    color: #333;
  }
}

.no-mode {
  text-align: center;
  color: #999;
  padding: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .background-info-content {
    :deep(h1) {
      font-size: 18px;
    }

    :deep(h2) {
      font-size: 16px;
    }

    :deep(h3) {
      font-size: 15px;
    }

    :deep(p), :deep(ul), :deep(ol) {
      font-size: 14px;
    }
  }
}
</style> 