import { Modal } from 'antd';
import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

export type ListFormProps = {
  onClose: (flag?: boolean, formVals?: unknown) => void;
  open: boolean;
  values?: Partial<API.MobileUser.ListRow>;
  matching?: any;
};

const listEdit: React.FC<ListFormProps> = (props) => {
  const { open, values, matching } = props;

  const mapRef = useRef(null);

  useEffect(() => {
    console.log(matching);
    if (matching && open) {
      const myCharts = echarts.init(mapRef.current);
      const { educationMatch, maxSimilarity, salaryMatch, areaMatch } = matching;
      // educationMatch
      // maxSimilarity
      // salaryMatch
      // areaMatch
      myCharts.setOption({
        radar: {
          shape: 'circle',
          indicator: [
            { name: '学历', max: 1 },
            { name: '薪资', max: 1 },
            { name: '区域', max: 1 },
            { name: '内容', max: 1 },
          ],
        },
        series: [
          {
            name: '综合匹配度',
            type: 'radar',
            data: [
              {
                value: [educationMatch, salaryMatch, areaMatch, maxSimilarity],
                name: 'Allocated Budget',
              },
            ],
          },
        ],
      });
    }
  }, [matching]);

  return (
    <Modal
      title="匹配详情"
      width={400}
      open={props.open}
      footer={''}
      onCancel={() => props.onClose()}
      maskClosable={true}
    >
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <div style={{ width: '300px', height: '300px' }} ref={mapRef}></div>
      </div>
    </Modal>
  );
};

export default listEdit;