import React, { useEffect, useState } from 'react';
import { Descriptions, Modal, Image } from 'antd';
import { queryAfterSalesSupportDetail } from '@/services/afterSales/afterSalesSupport';

interface checkProps {
  params: any;
  visible: boolean;
  callback: () => void;
}

/**
 * 售后支持详情页面
 * @param props
 * @constructor
 */
const Check: React.FC<checkProps> = (props) => {
  const { visible, callback, params } = props;
  const [data, setData] = useState<any>({});

  useEffect(() => {
    queryAfterSalesSupportDetail(params).then((res) => {
      if (res && res.code === 0) {
        const newData = res.data;
        const files = res.data.files;
        const newFiles = {};
        files.forEach((item: any) => {
          newFiles[item.type] = item;
        });
        newData.files = newFiles;
        setData(newData);
      }
    });
  }, []);

  // 确定
  const onOk = () => {
    callback();
  };

  // 取消
  const onCancel = () => {
    callback();
  };

  return (
    <Modal title="查看详情" open={visible} onOk={onOk} onCancel={onCancel} width={1000}>
      {data && data.record_id && (
        <Descriptions bordered>
          <Descriptions.Item label="用户姓名">{data?.name}</Descriptions.Item>
          <Descriptions.Item label="用户电话">{data?.phone}</Descriptions.Item>
          <Descriptions.Item label="用户地址">
            {data && data?.address && JSON.parse(data.address).join(' ')}
          </Descriptions.Item>
          <Descriptions.Item label="详细地址" span={2}>
            {data?.detailed_address}
          </Descriptions.Item>
          <Descriptions.Item label="经销商单位">{data?.dealer_name}</Descriptions.Item>
          <Descriptions.Item label="产品类型">{data?.product_type}</Descriptions.Item>
          <Descriptions.Item label="产品型号" span={2}>
            {data?.device_type}
          </Descriptions.Item>
          {data?.product_type === '分风箱' && (
            <Descriptions.Item label="主控器码">{data?.main_code}</Descriptions.Item>
          )}
          <Descriptions.Item label={`${data?.product_type}条码`}>
            {data?.machine_code}
          </Descriptions.Item>
          {data?.product_type === '分风箱' && (
            <Descriptions.Item label="分风箱电控盒二维码">
              {data?.electric_control_code}
            </Descriptions.Item>
          )}
          {data?.product_type === '分风箱' && (
            <Descriptions.Item label="定位图">
              <Image width={80} src={data && data.files && data?.files[1].url} />
            </Descriptions.Item>
          )}
          <Descriptions.Item label="风道或管理图">
            <Image width={80} src={data && data.files && data?.files[7].url} />
          </Descriptions.Item>
          <Descriptions.Item label="整体安装图片">
            <Image width={80} src={data && data.files && data?.files[8].url} />
          </Descriptions.Item>
          {data?.product_type === '分风箱' && (
            <Descriptions.Item label="电控安装箱">
              <Image width={80} src={data && data.files && data?.files[9].url} />
            </Descriptions.Item>
          )}
          <Descriptions.Item label="隐蔽工程验收单">
            <Image width={80} src={data && data.files && data?.files[10].url} />
          </Descriptions.Item>
          {data?.product_type === '分风箱' && (
            <Descriptions.Item label="电气部分">
              <Image width={80} src={data && data.files && data?.files[11].url} />
            </Descriptions.Item>
          )}
          {data?.product_type === '分风箱' && (
            <Descriptions.Item label="主控二维码">
              <Image width={80} src={data && data.files && data?.files[14].url} />
            </Descriptions.Item>
          )}
          {data?.product_type === '分风箱' && (
            <Descriptions.Item label="墙孔照片">
              <Image width={80} src={data && data.files && data?.files[15].url} />
            </Descriptions.Item>
          )}
          {(data?.product_type === '新风加湿一体机' || data?.product_type === '新风除湿一体机') && (
            <Descriptions.Item label="机器条码">
              <Image width={80} src={data && data.files && data?.files[17].url} />
            </Descriptions.Item>
          )}
          {data && data.files && data?.files[16] && data?.files[16].url && (
            <Descriptions.Item label="其他">
              <Image width={80} src={data && data.files && data?.files[16].url} />
            </Descriptions.Item>
          )}
          {data && data.files && data?.files[12] && data?.files[12].url && (
            <Descriptions.Item label="风口照片">
              <Image width={80} src={data && data.files && data?.files[12].url} />
            </Descriptions.Item>
          )}
          {data && data.files && data?.files[13] && data?.files[13].url && (
            <Descriptions.Item label="调试验收单">
              <Image width={80} src={data && data.files && data?.files[13].url} />
            </Descriptions.Item>
          )}
        </Descriptions>
      )}
    </Modal>
  );
};
export default Check;
