import { MyBetaModalFormProps, renderTextHelper } from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import { HouseWorkOrdersStatusEnum } from '@/gen/Enums';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Space, Spin, Tag } from 'antd';
import { useState } from 'react';

export default function Show(props: MyBetaModalFormProps) {
  const [show, setShow] = useState<any>({});
  const [loading, setLoading] = useState(false);
  const [hasLoaded, setHasLoaded] = useState(false);

  const getShow = () => {
    if (props?.item?.id && !loading && !hasLoaded) {
      setLoading(true);
      setHasLoaded(true);
      Apis.QualityCheck.QualityChecks.Show({
        id: props?.item?.id,
      })
        .then((res: any) => {
          setShow(res?.data);
        })
        .catch(() => {
          setHasLoaded(false); // 如果请求失败，允许重试
        })
        .finally(() => {
          setLoading(false);
        });
    }
  };

  return (
    <MyModal
      title={props.title || '查看'}
      width={680}
      onOpen={() => getShow()}
      node={
        <ProCard>
          <Spin spinning={loading}>
            <ProDescriptions
              // bordered
              column={2}
              size="middle"
            >
              <ProDescriptions.Item label=" 关联项目">
                {show?.asset_project?.name || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="核查对象">
                {show?.check_object || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="核查日期">
                {show?.check_date || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="核查分数">
                {show?.check_score || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="核查说明" span={2}>
                {show?.check_description || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="核查文件" span={2}>
                <Space direction="vertical">
                  {show?.check_images?.map((item: any, index: number) => {
                    return (
                      <div key={`item_a_${index}`}>
                        <a href={item.url}>{item.name}</a>
                      </div>
                    );
                  })}
                </Space>
              </ProDescriptions.Item>
              <ProDescriptions.Item label="核查人" span={2}>
                {show?.employee_name || '-'}-{show?.employee_phone || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="创建时间">
                {show?.created_at || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="最近修改">
                {show?.updated_at || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="后续整改" span={2}>
                <Tag color={show?.is_rectification ? 'red' : 'green'}>
                  {show?.is_rectification ? '是' : '否'}
                </Tag>
              </ProDescriptions.Item>
              <ProDescriptions.Item label="关联工单">
                <Space>
                  {show?.house_work_orders_id || '-'}
                  <renderTextHelper.Tag
                    Enums={HouseWorkOrdersStatusEnum}
                    value={show?.house_work_order?.status || '-'}
                    key="status"
                  />
                </Space>
              </ProDescriptions.Item>
              <ProDescriptions.Item label="整改时限">
                {show?.rectification_date || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="整改要求" span={2}>
                {show?.rectification_description || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="关联图片">
                {show?.rectification_images?.[0]?.url ? (
                  <img
                    src={show?.rectification_images?.[0]?.url}
                    alt={show?.title || '-'}
                    style={{
                      width: 160,
                      height: 90,
                      objectFit: 'cover',
                    }}
                  />
                ) : (
                  '-'
                )}
              </ProDescriptions.Item>
            </ProDescriptions>
          </Spin>
        </ProCard>
      }
    />
  );
}
