import React from 'react';
import { Descriptions, Divider, Card, Tag } from 'antd';
import { NoticeStatus, NoticeStatusText, NoticeStatusColor } from '@/dicts/noticeManageDict';
import styles from './noticeManage.less';

interface NoticeManageInfoProps {
  data: API.NoticeRecord | null;
}

// 获取状态标签
const getStatusTag = (status: string) => {
  const statusKey = status as keyof typeof NoticeStatusText;
  const color = NoticeStatusColor[statusKey] || 'default';
  const text = NoticeStatusText[statusKey] || '未知';
  return <Tag color={color}>{text}</Tag>;
};

const NoticeManageInfo: React.FC<NoticeManageInfoProps> = ({ data }) => {
  if (!data) return null;

  return (
    <div className={styles.noticeDetailView}>
      <Descriptions bordered column={2} size="small">
        <Descriptions.Item label="标题" span={2}>
          {data.title}
        </Descriptions.Item>
        {data.titleEn && (
          <Descriptions.Item label="英文标题" span={2}>
            {data.titleEn}
          </Descriptions.Item>
        )}
        <Descriptions.Item label="是否置顶">{data.isTop === '1' ? '是' : '否'}</Descriptions.Item>
        <Descriptions.Item label="状态">{getStatusTag(data.status)}</Descriptions.Item>
        <Descriptions.Item label="创建人">{data.createBy}</Descriptions.Item>
        <Descriptions.Item label="创建时间">{data.createTime}</Descriptions.Item>
      </Descriptions>

      <Divider orientation="left">中文内容</Divider>
      <Card size="small" bordered={false} className={styles.contentCard}>
        <div className={styles.noticeContent} dangerouslySetInnerHTML={{ __html: data.content }} />
      </Card>

      {data.contentEn && (
        <>
          <Divider orientation="left">英文内容</Divider>
          <Card size="small" bordered={false} className={styles.contentCard}>
            <div className={styles.noticeContent} dangerouslySetInnerHTML={{ __html: data.contentEn }} />
          </Card>
        </>
      )}
    </div>
  );
};

export default NoticeManageInfo;
