dros/src/pages/patient/components/register.available.view.list.tsx

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Card, Row, Col, Empty, Image, Tooltip } from 'antd';
import { getViewIconUrl } from '@/API/bodyPosition';

import type { RootState } from '@/states/store'; // 假设RootState已定义
import { View } from '@/states/patient/viewSelection';
import { addSelectedView } from '@/states/patient/viewSelection';
import { useIntl } from 'react-intl';

const RegisterViewList: React.FC = () => {
  // 监听selectedViews
  const availableViews = useSelector(
    (state: RootState) => state.viewSelection.availableViews
  );
  const intl = useIntl();
  const dispatch = useDispatch();

  const handleCardClick = (view: View) => {
    dispatch(addSelectedView(view));
  };

  return (
    <Row>
      {availableViews.length === 0 ? (
        <Col span={24}>
          <Empty description={intl.formatMessage({
              id: 'register.no.views',
              defaultMessage: 'register.no.views',
            })} />
        </Col>
      ) : (
        availableViews.map((view) => (
          <Col key={view.internal_id} xs={24} sm={12} md={8} lg={6}>
            {/* 若有自定义ProcedureViewCard组件可替换Card */}
            <Card title={view.view_name_local} onClick={() => handleCardClick(view)}>
              <Image
                alt="example"
                preview={false}
                src={getViewIconUrl(
                  view.view_icon_name || view.view_coach_name
                )}
                style={{
                  width: '100px',
                  height: '100px',
                  //objectFit: 'cover',
                }}
              />
              <Tooltip title={view.view_name_local}>
                <div style={{
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>{view.view_name_local}</div>
              </Tooltip>
              {/* 可根据需要展示更多字段 */}
            </Card>
          </Col>
        ))
      )}
    </Row>
  );
};

export default RegisterViewList;