import { Descriptions, Modal } from 'antd';
import React from 'react';
import moment from 'moment';

interface checkProps {
  visible: boolean;
  data: any;
  checkCallback: () => void;
}

/**
 * 报备查看弹框
 * @param props
 * @constructor
 */
const Check: React.FC<checkProps> = (props) => {
  const { visible, data, checkCallback } = props;

  const onOk = () => {
    checkCallback();
  };

  const onCancel = () => {
    checkCallback();
  };

  // 城市拼接
  const handleCity = () => {
    return `${data.province} ${data.city} ${data.district}`;
  };

  const handleImg = () => {
    if (data?.files && data?.files.length) {
      return data?.files.map((res: any) => (
        <img
          style={{ width: '100px', height: '100px', margin: '5px 10px' }}
          src={res.url}
          key={res.record_id}
          alt="图片"
        />
      ));
    } else {
      return '暂无图片';
    }
  };

  return (
    <Modal title="查看" open={visible} onOk={onOk} onCancel={onCancel} width={1000}>
      <Descriptions bordered>
        <Descriptions.Item label="工程名称">{data?.project_name}</Descriptions.Item>
        <Descriptions.Item label="城市">{handleCity()}</Descriptions.Item>
        <Descriptions.Item label="街道">{data?.street}</Descriptions.Item>
        <Descriptions.Item label="路">{data?.rode}</Descriptions.Item>
        <Descriptions.Item label="小区">{data?.residence}</Descriptions.Item>
        <Descriptions.Item label="门牌">{data?.doorplate}</Descriptions.Item>
        <Descriptions.Item label="详细地址" span={2}>
          {data?.address}
        </Descriptions.Item>
        <Descriptions.Item label="建筑面积">{data?.area}</Descriptions.Item>
        <Descriptions.Item label="招标形式">
          {{ 1: '内部仪标', 2: '公开招标', 3: '提供方案书' }[data?.bidding_form]}
        </Descriptions.Item>
        <Descriptions.Item label="项目用途">
          {
            {
              1: '酒店餐饮',
              2: '商务办公',
              3: '政府项目',
              4: '工矿企业',
              5: '文教卫生',
              6: '商业建筑',
              7: '房产配套',
              8: '其他',
            }[data?.project_effect]
          }
        </Descriptions.Item>
        <Descriptions.Item label="工程进展">
          {
            {
              1: '了解信息',
              2: '确认经销商',
              3: '方案报价',
              4: '邀请招标',
              5: '投标询价',
              6: '价格竞争',
              7: '商务谈判',
              8: '合同准备',
              9: '收到定金',
            }[data?.project_progress]
          }
        </Descriptions.Item>
        <Descriptions.Item label="空调类型">{data?.air_conditioner_type}</Descriptions.Item>
        <Descriptions.Item label="甲方联系人">{data?.contact_person}</Descriptions.Item>
        <Descriptions.Item label="联系方式">{data?.phone}</Descriptions.Item>
        <Descriptions.Item label="计划成交日期">
          {data?.planned_fixture_date
            ? moment(data?.planned_fixture_date).format('YYYY-MM-DD')
            : ''}
        </Descriptions.Item>
        <Descriptions.Item label="跟进人">{data?.follow_people}</Descriptions.Item>
        <Descriptions.Item label="报备人">{data?.created_name}</Descriptions.Item>
        <Descriptions.Item label="所属公司">{data?.company}</Descriptions.Item>
        <Descriptions.Item label="成功几率">{data?.success_probability}</Descriptions.Item>
        <Descriptions.Item label="成功几率分析" span={3}>
          {data?.success_probability_analysis}
        </Descriptions.Item>
        <Descriptions.Item label="图片" span={3}>
          {handleImg()}
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};
export default Check;
