import React from 'react';
import { Descriptions, Divider, Card, Tag } from 'antd';
import { useIntl, FormattedMessage } from 'umi';
import styles from './userQuestionManage.less';
import {
  PublishStatus,
  PublishStatusText,
  PublishStatusColor,
  TopStatus,
  TopStatusText,
  TopStatusColor
} from '@/dicts/userQuestionDict';

interface QuestionDetailProps {
  question: any; // 可以改为具体的类型
}

/**
 * 问题详情查看组件
 */
const QuestionViewDetail: React.FC<QuestionDetailProps> = ({ question }) => {
  const intl = useIntl();

  if (!question) return null;

  // 获取发布状态标签
  const getPublishTag = (isPublished: number) => {
    return isPublished === 1 ?
      <Tag color="green">{PublishStatusText[PublishStatus.YES]()}</Tag> :
      <Tag color="orange">{PublishStatusText[PublishStatus.NO]()}</Tag>;
  };

  // 获取置顶状态标签
  const getTopTag = (isTop: number) => {
    return isTop === 1 ?
      <Tag color="red">{TopStatusText[TopStatus.YES]()}</Tag> :
      <Tag color="default">{TopStatusText[TopStatus.NO]()}</Tag>;
  };

  return (
    <div className={styles.questionDetailView}>
      <Descriptions bordered column={2} size="small">
        <Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.title' })} span={2}>
          {question.title}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.category' })}>
          {question.type}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.askTime' })}>
          {question.askTime}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.asker' })}>
          {question.userName}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.company' })}>
          {question.companyName}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.account' })}>
          {question.fullName}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.contact' })}>
          {question.contactDetails}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.email' })}>
          {question.email}
        </Descriptions.Item>

        {/* 只有已回答的问题才会显示以下字段 */}
        {question.isAnswer === '1' && (
          <>
            <Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.publishStatus' })}>
              {getPublishTag(question.isPublished)}
            </Descriptions.Item>
            <Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.topStatus' })}>
              {getTopTag(question.isTop)}
            </Descriptions.Item>
            <Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.answerTime' })}>
              {question.answerTime}
            </Descriptions.Item>
            <Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.respondent' })}>
              {question.answerBy || '-'}
            </Descriptions.Item>
          </>
        )}
      </Descriptions>

      <Divider orientation="left">{intl.formatMessage({ id: 'questionDetail.questionContent' })}</Divider>
      <Card size="small" bordered={false} className={styles.contentCard}>
        <div className={styles.questionContent}>
          {question.content}
        </div>
      </Card>

      {question.answerContent && (
        <>
          <Divider orientation="left">{intl.formatMessage({ id: 'questionDetail.answerContent' })}</Divider>
          <Card size="small" bordered={false} className={styles.contentCard}>
            <div className={styles.answerContent}>
              {question.answerContent}
            </div>
          </Card>
        </>
      )}
    </div>
  );
};

export default QuestionViewDetail;
