import { MyBetaModalFormProps, renderTextHelper } from '@/common';
import { Apis } from '@/gen/Apis';
import {
  HouseMetersMeterTypeEnum,
  HouseMetersUsageTypeEnum,
} from '@/gen/Enums';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Image, Space } from 'antd';
import { useEffect, useState } from 'react';

export default function info(props: MyBetaModalFormProps) {
  const { item, reload } = props;
  const [data, setData] = useState<any>(item || {});

  // 从API获取数据
  const loadData = () => {
    if (item?.id) {
      let paramsId = { id: item?.id };
      Apis.Meter.HouseMeters.Show(paramsId).then((res) => {
        if (res?.data) {
          setData(res.data);
        }
      });
    }
  };

  // 当id变化或reload时重新加载数据
  useEffect(() => {
    if (item?.id) {
      loadData();
    }
  }, [item?.id, reload]);

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <ProCard title="基本信息">
        <ProDescriptions bordered>
          <ProDescriptions.Item label="仪表编号">
            <div style={{ fontWeight: 'bold' }}>
              【{data?.id}】{data?.name}
            </div>
          </ProDescriptions.Item>
          <ProDescriptions.Item label="类型">
            <renderTextHelper.Tag
              Enums={HouseMetersMeterTypeEnum}
              value={data?.meter_type}
              key="meter_type"
            />
          </ProDescriptions.Item>
          <ProDescriptions.Item label="使用类型">
            <renderTextHelper.Tag
              Enums={HouseMetersUsageTypeEnum}
              value={data?.usage_type}
              key="usage_type"
            />
          </ProDescriptions.Item>

          <ProDescriptions.Item label="收费标准">
            {data?.charge_standard?.name || '-'}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="初始抄表读数">
            {data?.initial_value}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="初始抄表时间">
            {data?.initial_time}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="最新抄表读数">
            {data?.latest_value}
          </ProDescriptions.Item>

          <ProDescriptions.Item label="最新抄表时间">
            {data?.latest_time}
          </ProDescriptions.Item>

          <ProDescriptions.Item label="备注">
            {data?.remark || '-'}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="图片">
            <Image
              // key={index}
              width={40}
              height={30}
              src={data.images?.[0]?.url || '-'}
              style={{
                marginRight: 8,
                marginBottom: 8,
                objectFit: 'cover',
              }}
            />
            {/* {data?.images || '-'} */}
          </ProDescriptions.Item>
        </ProDescriptions>
      </ProCard>
    </Space>
  );
}
