import { MyBetaModalFormProps } from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
// import {
//   AssetItemMaintenanceStatusEnum,
//   AssetItemMaintenanceTypeEnum,
// } from '@/gen/Enums';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Flex, Space, Steps } from 'antd';
import { useState } from 'react';

export default function Index(props: MyBetaModalFormProps) {
  const [showData, setShow] = useState<any>({});

  const getShow = () => {
    if (props?.item?.id) {
      Apis.Asset.AssetItemMaintenances.Show({
        id: props?.item?.id,
      }).then((res: any) => {
        setShow(res?.data);
      });
    }
  };

  return (
    <MyModal
      title={props.title}
      width={800}
      onOpen={() => getShow()}
      node={
        <ProCard>
          <ProDescriptions bordered column={2} size="middle">
            <ProDescriptions.Item label="状态">
              {/* <renderTextHelper.Tag
                Enums={AssetItemMaintenanceStatusEnum}
                value={showData?.status || '-'}
                key="status"
              /> */}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="类型">
              {/* <renderTextHelper.Tag
                Enums={AssetItemMaintenanceTypeEnum}
                value={showData?.type || '-'}
                key="type"
              /> */}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="维保资产">
              {showData?.name || '-'}-{showData?.specification}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="维保人">
              {showData?.assigned_employee?.name || '-'}-
              {showData?.assigned_employee?.phone || '-'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="分类">
              {showData?.asset_item_category_level1_name || '-'}/
              {showData?.asset_item_category_level2_name || '-'}/
              {showData?.asset_item_category_level3_name || '-'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="完成时间">
              {showData?.deadline || '-'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="维保内容" span={2}>
              {showData?.description || '-'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="进度" span={2}>
              <Flex vertical gap="middle">
                <Steps
                  direction="vertical"
                  progressDot
                  current={showData?.asset_item_maintenance_logs?.length || 0}
                  items={showData?.asset_item_maintenance_logs?.map(
                    (res: any) => {
                      return {
                        title: res?.content,
                        description: (
                          <Space>
                            {/*                  
                            <renderTextHelper.Tag
                              Enums={AssetItemMaintenanceStatusEnum}
                              value={res?.status}
                              key="TagStatus"
                            /> */}
                            {res?.created_at}
                          </Space>
                        ),
                      };
                    },
                  )}
                />
              </Flex>
            </ProDescriptions.Item>
            <ProDescriptions.Item span={2} label="附件">
              <Space direction="vertical">
                {showData?.attachments?.map((res: any, index: number) => {
                  return (
                    <div
                      key={`item_${index}`}
                      style={{
                        overflow: 'hidden',
                        height: '20px',
                        width: '300px',
                        lineHeight: '20px',
                      }}
                    >
                      <a href={res?.url}>{res?.name}</a>
                    </div>
                  );
                })}
              </Space>
            </ProDescriptions.Item>
          </ProDescriptions>
        </ProCard>
      }
    />
  );
}
