WGShare.Client.Electron/src/components/FeedBackModel/index.tsx

import { PostFeedback } from '@/api/Home/Index';
import styles from '@/components/FeedBackModel/index.module.scss'
import { Button, message, Modal, Rate } from 'antd';
import TextArea from 'antd/es/input/TextArea';
import { useState, useImperativeHandle, forwardRef } from "react";
const FeedBackModel = forwardRef((_props: any, ref: any) => {
  useImperativeHandle(ref, () => ({
    changeModal: () => {
      setIsFeedBackModel(true)
    },
  }))
  const [isFeedBackModel, setIsFeedBackModel] = useState(false);
  const [feedBackForm, setFeedBackForm] = useState({
    rateValue: 0,
    otherContent: '',
  });
  const [feedBackList, setFeedBackList] = useState([
    {
      text: "软件卡顿",
      value: 2,
      active: false,
    },
    {
      text: "设计不合理",
      value: 3,
      active: false,
    },
    {
      text: "功能太少",
      value: 4,
      active: false,
    },
    {
      text: "通话不流畅",
      value: 5,
      active: false,
    },
    {
      text: "视频卡顿",
      value: 6,
      active: false,
    },
    {
      text: "操作麻烦",
      value: 7,
      active: false,
    },
    {
      text: "其他，需要手动填写",
      value: 1,
      active: false,
    },
  ]);
  return (
    <>
      <Modal
        title="反馈建议评分"
        open={isFeedBackModel}
        footer={null}
        destroyOnClose={true}
        onCancel={() => setIsFeedBackModel(false)}
        centered
        width={'500px'}
      >
        <div className={styles.feedBackModel}>
          <div className={styles.feedBackModelContent}>
            <div className={styles.feedBackModelContentRate}>
              <div style={{ color: 'white', fontSize: '14px', marginBottom: '4px' }}>评分:</div>
              <div style={{ display: 'flex', justifyContent: 'center' }}>
                <Rate value={feedBackForm.rateValue} allowHalf style={{ transform: 'scale(2)' }} allowClear onChange={(e) => {
                  setFeedBackForm({
                    ...feedBackForm,
                    rateValue: e
                  })
                }} />
              </div>
            </div>
            <div className={styles.feedBackModelContentList}>
              <div style={{ color: 'white', fontSize: '14px', marginBottom: '4px' }}>建议:</div>
              <div>
                {
                  feedBackList.map((item, index) => {
                    return (
                      <div key={index} className={item.active ? styles.active : ''} onClick={() => {
                        const feedBackListTemp = [...feedBackList]
                        feedBackListTemp[index].active = !feedBackListTemp[index].active
                        setFeedBackList(feedBackListTemp)
                      }}>
                        <span>{item.text}</span>
                      </div>
                    )
                  })
                }
              </div>
            </div>
            <div className={styles.feedBackModelContentList} style={{ visibility: feedBackList[feedBackList.length - 1].active ? 'visible' : 'hidden' }}>
              <TextArea
                placeholder="填写意见"
                value={feedBackForm.otherContent}
                autoSize={{ minRows: 3, maxRows: 6 }}
                onChange={(e) => {
                  setFeedBackForm({
                    ...feedBackForm,
                    otherContent: e.target.value
                  })
                }}
              />
            </div>
          </div>
          <div className={styles.feedBackModelFooter}>
            <Button type="primary" className='m-ant-btn'
              onClick={() => {
                let parmes = {
                  score: feedBackForm.rateValue,
                  otherContent: feedBackList[feedBackList.length - 1].active ? feedBackForm.otherContent : '',
                  types: feedBackList.filter(row => row.active).map((item: any) => item.value),
                }
                if (feedBackForm.rateValue === 0) {
                  message.error('请选择评分')
                  return
                }
                PostFeedback(parmes).then(res => {
                  if (res.code === 200) {
                    message.success('提交成功！')
                    setIsFeedBackModel(false)
                  }
                })
              }}>提交</Button>
            <Button type="primary" style={{ backgroundColor: 'rgb(16,20,24)', marginLeft: '20px' }}
              onClick={() => setIsFeedBackModel(false)}>关闭</Button>
          </div>
        </div>
      </Modal>
    </>
  )
})

export default FeedBackModel