import React from 'react';
import { Modal, Descriptions } from 'antd';
import { GzhPlanDataType } from '../../hooks/useGzhPlanList';
import dayjs from 'dayjs';
interface PunlishPlanDetailModalProps {
  visible: boolean;
  onCancel: () => void;
  planData: GzhPlanDataType;
}

const PunlishPlanDetailModal: React.FC<PunlishPlanDetailModalProps> = ({
  visible,
  onCancel,
  planData,
}) => {

  return (
    planData && visible && <Modal
      title="发布计划详情"
			open={true}
			destroyOnClose
      onCancel={onCancel}
      footer={null}
      width={800}
    >
      <Descriptions column={1} bordered>
				<Descriptions.Item label="场景">{planData?.scene === 0 ? '关注回复' : '自动回复'}</Descriptions.Item>
        <Descriptions.Item label="公众号名称">{planData.accountName}</Descriptions.Item>
        <Descriptions.Item label="视频列表">
          {planData.videoList?.map((video, index) => (
            <div key={video.videoId} style={{ marginBottom: '16px' }}>
              <p>视频 {index + 1}: {video.customTitle || video.title}</p>
              <img 
                src={video.customCover || video.cover} 
                alt={`视频${index + 1}封面`} 
                style={{ maxWidth: '150px' }} 
              />
            </div>
          ))}
        </Descriptions.Item>
        <Descriptions.Item label="发布时间">{dayjs(planData.createTimestamp).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
        <Descriptions.Item label="发布方">{planData.publishStage === 0 ? '平台发布' : '用户发布'}</Descriptions.Item>
			</Descriptions>
    </Modal>
  );
};

export default PunlishPlanDetailModal;