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 } 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';

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

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

  return (
    <Row>
      {availableViews.length === 0 ? (
        <Col span={24}>
          <Empty description="暂无已选择体位" />
        </Col>
      ) : (
        availableViews.map((view) => (
          <Col key={view.internal_id} xs={24} sm={12} md={8} lg={6}>
            {/* 若有自定义ProcedureViewCard组件可替换Card */}
            <Card title={view.view_name} onClick={() => handleCardClick(view)}>
              <Image
                alt="example"
                preview={false}
                src={getViewIconUrl(
                  productName === 'VETDROS'
                    ? view.view_coach_name
                    : view.view_icon_name
                )}
                style={{
                  width: '100%',
                  height: 'auto',
                  objectFit: 'cover',
                }}
              />
              <div>{view.view_description}</div>
              {/* 可根据需要展示更多字段 */}
            </Card>
          </Col>
        ))
      )}
    </Row>
  );
};

export default RegisterViewList;