'use client';

// import { Avatar, Icon } from '@lobehub/ui';
import { Card, Button, List, Image, Flex, Input, Select, Slider, Carousel } from "antd";
import { createStyles } from 'antd-style';
import { memo, useState, useRef } from 'react';
// import { useTranslation } from 'react-i18next';
// import { Flexbox } from 'react-layout-kit';
const useStyles = createStyles(({ css }) => ({
  buttonDelete: css`
    background: url(/images/delete.png) center center no-repeat;
    background-size: 14px;
    &:before {
      content: "11";
      visibility: hidden;
    }
  `,
  buttonEdit: css`
    background: url(/images/edit.png) center center no-repeat;
    background-size: 14px;
    &:before {
      content: "11";
      visibility: hidden;
    }
  `,
  buttonManage: css`
    background: url(/images/manage.png) center center no-repeat;
    background-size: 14px;
    &:before {
      content: "11";
      visibility: hidden;
    }
  `,
  buttonStyle: css`
    font-size: 16px;
    color: #2E62FF;
    border-color: #678DFF;
    padding: 20px 30px !important;
    margin-right: 24px;
    box-shadow: 0px 2px 9px 0px rgba(95, 135, 255, 0.4);
    box-sizing: border-box;
    background-color: #fff;
    &:hover {
      border-color: #678DFF !important;
      color: #2E62FF !important;
      background-color: #fff !important;
    }
  `,
  buttonStyleActive: css`
    font-size: 16px;
    color: #fff;
    padding: 20px 30px !important;
    margin-right: 24px;
    box-shadow: 0px 2px 9px 0px rgba(95, 135, 255, 0.4);
    box-sizing: border-box;
    border-color: #0044FF;
    background-color: #0044FF;
    &:hover {
      border-color: #0044FF !important;
      background-color: #0044FF !important;
      color: #fff !important;
    }
  `,
  cardRobotStyle: css`
    box-shadow: 1px 0px 12px 0px rgba(42, 77, 255, 0.19);
    border: none;
    border-radius: 8px;
    padding: 10px 0;
    width: 100%;
    height: 100%;
    .ant-card-body {
      padding: 0 24px;
    }
  `,
  cardStyle: css`
    box-shadow: 1px 0px 12px 0px rgba(42, 77, 255, 0.19);
    border: none;
    border-radius: 8px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
  `,
  checkButtonStyle: css`
    font-size: 16px;
    color: #fff;
    padding: 15px 30px !important;
    box-shadow: 0px 2px 9px 0px rgba(95, 135, 255, 0.4);
    box-sizing: border-box;
    border-color: #0044FF;
    background-color: #0044FF;
    &:hover {
      border-color: #0044FF !important;
      background-color: #0044FF !important;
      color: #fff !important;
    }
  `,
  checkItem: css`
    margin-top: 15px;
  `,
  checkTitle: css`
    color: #0044FF;
    margin-right: 5px;
  `,
  dec: css`
    color: #666666;
  `,
  documentCard: css`
    width: 100%;
    padding: 30px 30px;
    border-radius: 16px;
    opacity: 1;
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #E5E5E5;
  `,
  documentCardActive: css`
    width: 100%;
    padding: 30px 30px;
    border-radius: 16px;
    opacity: 1;
    background: rgba(0, 68, 255, 0.05);
    box-sizing: border-box;
    border: 1px solid #0044FF;
  `,
  iconRobotImg: css`
    width: 48px;
    height: 195px !important;
  `,
  iconImg: css`
    width: 48px;
    height: 48px;
  `,
  importButtonStyle: css`
    font-size: 16px;
    color: #0044FF;
    border: none;
    padding: 18px 30px !important;
    box-sizing: border-box;
    background-color: rgba(0, 68, 255, 0.102);
    margin-left: 50px;
    &:hover {
      color: #0044FF !important;
      background-color: rgba(0, 68, 255, 0.102) !important;
    }
  `,
  importFileCard: css`
    .ant-card-body {
      height: 100%
    }
  `,
  listStyle: css`
    border: none !important;
  `,
  previewContainer: css`
    width: 100%;
    height: 100%;
    background: #F7F7F7;
    text-align: center;
    padding: 30% 0;
  `,
  robotAvatarLeft: css`
    margin-bottom: 5px;
    background: #DFE7FF;
    border-radius: 8px;
    padding: 5px 0;
  `,
  robotAvatarLeftContainer: css`
    margin-bottom: 10px;
  `,
  robotBg: css`
    width: 120px !important;
    height: 80px !important;
    margin-top: 10px;
    margin-botom: 5px;
    border-radius: 8px;
  `,
  robotImg: css`
    margin: 20px 0;
    width: 100%;
    .ant-image {
      width: 100%;
    }
  `,
  robotSetHead: css`
    height: 60px;
    line-height: 60px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: rgba(187, 204, 253, 0.24);
    font-size: 18px;
    margin-top: -20px;
  `,
  robotSetItem: css`
    height: 80px;
    line-height: 80px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: rgba(187, 204, 253, 0.24);
  `,
  robotSetItemTitle: css`
    font-size: 16px;
    width: 100px;
  `,
  searchStyle: css`
    .ant-input-affix-wrapper {
      border: none;
      background-color: #F3F6FF;
    }
    .ant-input-search-button {
      border: none;
      background-color: #F3F6FF;
      &:hover {
        background-color: #F3F6FF !important;
      }
      .ant-btn-icon {
        color: #0044FF !important;
      }
    }
  `,
  selectStyle: css`
    .ant-select-selector {
      border: none !important;
      background-color: #F0F3FD !important;
    }
    .ant-select-selection-item {
      color: #4A73FF
    }
    .ant-select-arrow {
      color: #2959FF
    }
    margin-bottom: 15px;
  `,
  sliderStyle: css`
    .ant-slider-handle {
      ::after {
        background-color: #006EFF;
        box-shadow: 0 0 0 2px #006EFF;
      }
      &:hover {
        background-color: #006EFF;
        box-shadow: 0 0 0 2px #006EFF;
      }
    }
    .ant-slider {
      &:hover {
        .ant-slider-track {
          background-color: #006EFF;
          &:hover {
            background-color: #006EFF !important;
          }
        }
        .ant-tooltip-open {
          ::after {
            background-color: #006EFF;
            box-shadow: 0 0 0 2px #006EFF;
          }
          background-color: #006EFF;
          box-shadow: 0 0 0 2px #006EFF;
          &:hover {
            background-color: #006EFF;
            box-shadow: 0 0 0 2px #006EFF;
          }
        }
      }
    }
    .ant-slider-track {
      background-color: #006EFF;
      &:hover {
        background-color: #006EFF !important;
      }
    }
    .ant-tooltip-open {
      ::after {
        background-color: #006EFF;
        box-shadow: 0 0 0 2px #006EFF;
      }
      background-color: #006EFF;
      box-shadow: 0 0 0 2px #006EFF;
      &:hover {
        background-color: #006EFF;
        box-shadow: 0 0 0 2px #006EFF;
      }
    }
  `,
  soundCard: css`
    position: relative
  `,
  soundCardAvatar: css`
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    opacity: 1;
    background: rgba(184, 200, 255, 0.25);
    color: #999999;
    cursor: pointer;
  `,
  soundCardText: css`
    position: absolute;
    left: 20px;
    top: 62px;
    width: 40px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 12px;
    opacity: 1;
    background: #C1CFFF;
    color: #3A61CB;
    cursor: pointer;
  `,
  switchLeftButton: css`
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    line-height: 100px;
    box-shadow: -1px 0px 6px 0px rgba(139, 162, 229, 0.2392);
  `,
  switchRightButton: css`
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    line-height: 100px;
    box-shadow: -1px 0px 6px 0px rgba(139, 162, 229, 0.2392);
  `,
  tabStyle: css`
    .ant-tabs-tab {
      margin-right: 40px !important;
    }
    .ant-tabs-tab-btn {
      color: #648EFF
    }
    .ant-tabs-tab.ant-tabs-tab-active {
      .ant-tabs-tab-btn {
        color: #0044FF
      }
    }
    .ant-pagination {
      .ant-pagination-item-active {
        border-color: #0056FF !important
        a {
            color: #0056FF !important
        }
      }
    }
  `,
  tableHead: css`
    .ant-table-thead {
      .ant-table-cell {
        background-color: #F1F8FF !important
      }
    }
  `,
  tagStyle: css`
    width: 70px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    opacity: 1;
    background: #F6F6F6;
    color: #999999;
    margin-right: 20px;
    cursor: pointer;
  `,
  tagStyleActive: css`
    width: 70px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    opacity: 1;
    background-color: #0044FF;
    color: #fff !important;
    margin-right: 20px;
    cursor: pointer;
    &:hover {
      border-color: #0044FF !important;
      background-color: #0044FF !important;
      color: #fff !important;
    }
  `,
  testContent: css`
    width: 100%;
    height: 500px;
    margin-top: 15px;
    padding: 10px;
    border-radius: 2px;
    border: 1px solid #D9D9D9;
  `,
  title: css`
    font-size: 18px;
    font-weight: 700;
  `,
  viewButtonStyle: css`
    font-size: 16px;
    color: #0044FF;
    border-color: #BECFFF;
    padding: 10px 15px !important;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0) !important;
    &:hover {
      border-color: #BECFFF !important;
      color: #0044FF !important;
      background-color: rgba(255, 255, 255, 0) !important;
    }
  `,
}));

const RobotList = memo<{ mobile?: boolean }>(() => {
  const { cx, styles } = useStyles();
  const [value, setValue] = useState(1);
  const [inputValue, setInputValue] = useState(1);
  const [selectedTags, setSelectedTags] = useState(new Set());
  const carouselRef = useRef(null);
  const carouselBgRef = useRef(null);
  // const { t } = useTranslation('common');
  const tags = ['默认', '新闻', '小说', '知识'];
  const data = [
    {
      title: '',
    },
    {
      title: '',
    },
    {
      title: '',
    },
    {
      title: '',
    },
    {
      title: '',
    },
    {
      title: '',
    },
    {
      title: '',
    },
    {
      title: '',
    },
    {
      title: '',
    },
    {
      title: '',
    },
  ];

  const handleSwitch = (val) => {
    setValue(val)
  }

  const onChange = (newValue) => {
    setInputValue(newValue);
  }

  const handleTagClick = (tagId) => {
     const newSelectedTags = new Set(selectedTags);
     if (newSelectedTags.has(tagId)) {
       newSelectedTags.delete(tagId);
     } else {
       newSelectedTags.add(tagId);
     }
     setSelectedTags(newSelectedTags);
  };

 // const handleChange = () => {

 // }

 const handleSwitchNext = () => {
    carouselRef.current.next();
 }

 const handleSwitchPrev = () => {
    carouselRef.current.prev();
 }

 const handleSwitchBgNext = () => {
    carouselBgRef.current.next();
 }

 const handleSwitchBgPrev = () => {
    carouselBgRef.current.prev();
 }

 // const afterChange = (index) => {
 //   // 当Carousel的activeIndex改变时，如果是第一次，则获取索引并存储
 //   if (index === 0) {

 //   }
 // };

  return (
    <>
      <div style={{display: value === 1 ? 'block': 'none',height: '100%'}}>
        <div style={{ fontSize: '20px', height: '70px', lineHeight: '70px', marginLeft: '60px' }}>
            我的数字形象
        <Button className={styles.buttonStyle}  onClick={()=>handleSwitch(2)} shape="round" size="small" style={{marginLeft: '24px'}} type="link" variant="solid">
            制作数字形象
        </Button>
        </div>
        <div style={{height: '100%'}}>
          <List
              dataSource={data}
             grid={{
                gutter: 80,
                lg: 5,
                md: 4,
                sm: 2,
                xl: 5,
                xs: 1,
                xxl: 5,
                }}
            renderItem={() => (
              <List.Item className={styles.listStyle}>
                <Card className={styles.cardStyle} style={{padding: '0 !important'}}>
                    <div style={{background: '#EFEFEF', padding: '20px 0', textAlign: 'center'}}>
                        <Image className={cx(styles.iconRobotImg)} preview={false} src="/images/robot.png" />
                    </div>
                    <div style={{marginTop: '30px'}}>
                      <Flex justify='space-between' style={{height: '100%'}}>
                        <div style={{fontWeight: '700', lineHeight: '36px'}}>
                          Oliva
                        </div>
                        <div>
                          <Button onClick={()=>handleSwitch(2)} style={{color: '#005EFF',paddingRight: '0'}} type="link">
                              <span className={styles.buttonEdit}></span>
                          </Button>
                          <Button style={{color: '#FF0C0C', paddingRight: '0'}} type="link">
                              <span className={styles.buttonDelete}></span>
                          </Button>
                        </div>
                      </Flex>
                    </div>
                </Card>
              </List.Item>
            )}
            style={{marginTop: '10px', padding: '0 50px', height: 'calc(100vh - 150px)', overflowY: 'scroll'}}
          />
        </div>
      </div>
      <div style={{display: value === 2 ? 'block': 'none',height: '100%'}}>
        <Flex justify='space-between' style={{margin: '15px 0'}} >
          <div style={{ fontSize: '20px',lineHeight: '42px',marginLeft: '60px' }}>
            我的数字形象
          </div>
          <Button className={styles.buttonStyle} onClick={()=>handleSwitch(1)} shape="round" size="small" style={{marginRight: '150px'}} type="text" variant="solid">
              返回形象列表
          </Button>
        </Flex>
        <div style={{padding: '0 150px 0 50px', height: 'calc(100vh - 160px)', overflowY: 'scroll'}} >
            <Flex gap={30} justify='space-between' style={{height: '100%'}}>
              <div style={{height: 'calc(100vh - 160px)', width: '6%'}}>
                <Card className={styles.cardStyle} style={{padding: '0', textAlign: 'center'}}>
                  <div className={styles.robotAvatarLeftContainer}>
                      <div className={styles.robotAvatarLeft}>
                        <Image className={cx(styles.iconImg)} preview={false} src="/images/robot1.png" />
                      </div>
                      <div>z站姿</div>
                  </div>
                  <div className={styles.robotAvatarLeftContainer}>
                      <div className={styles.robotAvatarLeft}>
                        <Image className={cx(styles.iconImg)} preview={false} src="/images/robot1.png" />
                      </div>
                      <div>z站姿</div>
                  </div>
                  <div className={styles.robotAvatarLeftContainer}>
                      <div className={styles.robotAvatarLeft}>
                        <Image className={cx(styles.iconImg)} preview={false} src="/images/robot1.png" />
                      </div>
                      <div>z站姿</div>
                  </div>
                  <div className={styles.robotAvatarLeftContainer}>
                      <div className={styles.robotAvatarLeft}>
                        <Image className={cx(styles.iconImg)} preview={false} src="/images/robot1.png" />
                      </div>
                      <div>z站姿</div>
                  </div>
                  <div className={styles.robotAvatarLeftContainer}>
                      <div className={styles.robotAvatarLeft}>
                        <Image className={cx(styles.iconImg)} preview={false} src="/images/robot1.png" />
                      </div>
                      <div>z站姿</div>
                  </div>
                  <div className={styles.robotAvatarLeftContainer}>
                      <div className={styles.robotAvatarLeft}>
                        <Image className={cx(styles.iconImg)} preview={false} src="/images/robot1.png" />
                      </div>
                      <div>z站姿</div>
                  </div>
                  <div className={styles.robotAvatarLeftContainer}>
                      <div className={styles.robotAvatarLeft}>
                        <Image className={cx(styles.iconImg)} preview={false} src="/images/robot1.png" />
                      </div>
                      <div>z站姿</div>
                  </div>
                  <div className={styles.robotAvatarLeftContainer}>
                      <div className={styles.robotAvatarLeft}>
                        <Image className={cx(styles.iconImg)} preview={false} src="/images/robot1.png" />
                      </div>
                      <div>z站姿</div>
                  </div>
                </Card>
              </div>
              <div style={{height: 'calc(100vh - 160px)', width: '52%'}}>
                <Card className={styles.cardRobotStyle} style={{height: '120px', padding: '0 !important'}}>
                      <Carousel infinite={false}
                      // afterChange={afterChange}
                      ref={carouselRef}>
                        <div>
                            <Flex gap={25}>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                            </Flex>
                        </div>
<div>
                            <Flex gap={25}>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                                <div>
                                    <div className={styles.soundCardAvatar}>
                                       <Image className={cx(styles.iconImg)} preview={false} src="/images/robot2.png"  style={{marginBotom: '5px', marginTop: '12px'}} />
                                    </div>
                                    <div style={{textAlign: 'center'}}>Ellen</div>
                                </div>
                            </Flex>
                        </div>
                      </Carousel>
                      <div className={styles.switchLeftButton} onClick={handleSwitchPrev}>
                        <Image className={cx(styles.iconImg)} preview={false} src="/images/next.png" style={{transform: 'rotate(-180deg)'}} />
                      </div>
                      <div className={styles.switchRightButton} onClick={handleSwitchNext}>
                        <Image className={cx(styles.iconImg)} preview={false} src="/images/next.png" />
                      </div>
                </Card>
                <div className={styles.robotImg}>
                  <Image preview={false} src="/images/robot_img.png"  style={{height: 'calc(100vh - 440px)', width: '100%'}}/>
                </div>
                <Card className={styles.cardRobotStyle} style={{height: '120px', padding: '0 !important'}}>
                      <Carousel infinite={false}
                      // afterChange={afterChange}
                      ref={carouselBgRef}>
                        <div>
                            <Flex gap={25}>
                                <div>
                                    <Image className={styles.robotBg} preview={false} src="/images/robot_bg.png" />
                                </div>
                                <div>
                                    <Image className={styles.robotBg} preview={false} src="/images/robot_bg.png" />
                                </div>
                                <div>
                                    <Image className={styles.robotBg} preview={false} src="/images/robot_bg.png" />
                                </div>
                                <div>
                                    <Image className={styles.robotBg} preview={false} src="/images/robot_bg.png" />
                                </div>
                                <div>
                                    <Image className={styles.robotBg} preview={false} src="/images/robot_bg.png" />
                                </div>
                                <div>
                                    <Image className={styles.robotBg} preview={false} src="/images/robot_bg.png" />
                                </div>
                            </Flex>
                        </div>
                        <div>
                            <Flex gap={25}>
                                <div>
                                    <Image className={styles.robotBg} preview={false} src="/images/robot_bg.png" />
                                </div>
                                <div>
                                    <Image className={styles.robotBg} preview={false} src="/images/robot_bg.png" />
                                </div>
                                <div>
                                    <Image className={styles.robotBg} preview={false} src="/images/robot_bg.png" />
                                </div>
                                <div>
                                    <Image className={styles.robotBg} preview={false} src="/images/robot_bg.png" />
                                </div>
                                <div>
                                    <Image className={styles.robotBg} preview={false} src="/images/robot_bg.png" />
                                </div>
                                <div>
                                    <Image className={styles.robotBg} preview={false} src="/images/robot_bg.png" />
                                </div>
                            </Flex>
                        </div>
                      </Carousel>
                      <div className={styles.switchLeftButton} onClick={handleSwitchBgPrev}>
                        <Image className={cx(styles.iconImg)} preview={false} src="/images/next.png"  style={{transform: 'rotate(-180deg)'}}/>
                      </div>
                      <div className={styles.switchRightButton} onClick={handleSwitchBgNext}>
                        <Image className={cx(styles.iconImg)} preview={false} src="/images/next.png" />
                      </div>
                </Card>
              </div>
              <div style={{height: 'calc(100vh - 160px)',width: '42%'}}>
                <Card className={styles.cardStyle} style={{ padding: '0' }}>
                  <div className={styles.robotSetHead}>
                    声音设置
                  </div>
                  <div className={styles.robotSetItem}>
                    <Flex justify='space-between'>
                      <div className={styles.robotSetItemTitle}>
                        语言
                      </div>
                      <div>
                        <Select
                            className={styles.selectStyle}
                            defaultValue="普通话"
                            // onChange={handleChange}
                            options={[
                              {
                                label: '普通话',
                                value: '普通话',
                              },
                            ]}
                            style={{
                              width: 200,
                            }}
                          />
                      </div>
                    </Flex>
                  </div>
                  <div className={styles.robotSetItem}>
                    <Flex justify='space-between'>
                      <div className={styles.robotSetItemTitle}>
                        风格
                      </div>
                      <div style={{marginTop: '25px'}}>
                          <Flex justify='space-between'>
                            {tags.map((tagText) => (
                              <div className={`${selectedTags.has(tagText) ?  styles.tagStyleActive : styles.tagStyle}`} key={tagText} onClick={() => handleTagClick(tagText)}>
                                {tagText}
                              </div>
                            ))}
                          </Flex>
                      </div>
                    </Flex>
                  </div>
                  <div className={styles.robotSetItem}>
                    <Flex justify='space-between'>
                      <div className={styles.robotSetItemTitle}>
                        语速
                      </div>
                      <div style={{marginTop: '25px'}}>
                        <Flex>
                            <Slider
                              className={styles.sliderStyle}
                              defaultValue={1}
                              max={2}
                              min={0}
                              onChange={onChange}
                              style={{width: '300px'}}
                              value={typeof inputValue === 'number' ? inputValue : 0}
                            />
                            <Input
                              max={2}
                              min={0}
                              onChange={onChange}
                              style={{
                                marginLeft: '20px',
                                textAlign: 'center',
                                width: '40px'
                              }}
                              value={inputValue}
                            />
                        </Flex>
                      </div>
                    </Flex>
                  </div>
                  <div className={styles.robotSetItem}>
                    <Flex justify='space-between'>
                      <div className={styles.robotSetItemTitle}>
                        语调
                      </div>
                      <div style={{marginTop: '25px'}}>
                        <Flex>
                            <Slider
                              className={styles.sliderStyle}
                              defaultValue={1}
                              max={2}
                              min={0}
                              onChange={onChange}
                              style={{width: '300px'}}
                              value={typeof inputValue === 'number' ? inputValue : 0}
                            />
                            <Input
                              max={2}
                              min={0}
                              onChange={onChange}
                              style={{
                                marginLeft: '20px',
                                textAlign: 'center',
                                width: '40px'
                              }}
                              value={inputValue}
                            />
                        </Flex>
                      </div>
                    </Flex>
                  </div>
                  <div className={styles.robotSetItem}>
                    <Flex justify='space-between'>
                      <div className={styles.robotSetItemTitle}>
                        音量
                      </div>
                      <div style={{marginTop: '25px'}}>
                        <Flex>
                            <Slider
                              className={styles.sliderStyle}
                              defaultValue={1}
                              max={2}
                              min={0}
                              onChange={onChange}
                              style={{width: '300px'}}
                              value={typeof inputValue === 'number' ? inputValue : 0}
                            />
                            <Input
                              max={2}
                              min={0}
                              onChange={onChange}
                              style={{
                                marginLeft: '20px',
                                textAlign: 'center',
                                width: '40px'
                              }}
                              value={inputValue}
                            />
                        </Flex>
                      </div>
                    </Flex>
                  </div>
                  <div className={styles.robotSetItem} style={{border: 'none'}}>
                    <Flex justify='space-between'>
                      <div className={styles.robotSetItemTitle}>
                        音色
                      </div>
                      <div style={{marginTop: '25px'}}>
                        <List
                          dataSource={data}
                          grid={{
                             gutter: 80,
                             lg: 5,
                             md: 4,
                             sm: 2,
                             xl: 5,
                             xs: 1,
                             xxl: 5,
                             }}
                          renderItem={() => (
                            <List.Item className={styles.listStyle}>
                              <div className={styles.soundCard}>
                                <div className={styles.soundCardAvatar}>
                                    <Image className={cx(styles.iconImg)} preview={false} src="/images/timbre.png" />
                                </div>
                                <div className={styles.soundCardText}>
                                    男声
                                </div>
                              </div>
                            </List.Item>
                          )}
                          style={{marginTop: '10px', padding: '0 50px'}}
                        />
                      </div>
                    </Flex>
                  </div>
                </Card>
              </div>
            </Flex>
        </div>
      </div>
    </>
  );
});

export default RobotList;
