import React from 'react';
import { PlusOutlined, MinusOutlined, CloseOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import { notification } from 'antd';
import { controlSlim } from '../apis/index';
import styles from './CloudPlate.less';

const CloudPlate = (props) => {
  const { onClose, videoInfo } = props;
  const dotCount = 8; // 点的数量
  const radius = 55; // 圆的半径

  //   计算每个点的大致样式
  const getDotStyle = (index) => {
    const angle = (index * 360) / dotCount; // 计算点所在的角度
    const radians = (angle * Math.PI) / 180; // 角度转换为弧度
    const top = Math.sin(radians) * radius + radius - 8; // 计算点的垂直位置
    const left = Math.cos(radians) * radius + radius - 8; // 计算点的水平位置

    return { top, left };
  };

  // 0-上,1-下,2-左,3-右,4-左上,5-左下,6-右上,7-右下,8-变倍+,9-变倍-,10-焦距+,11-焦距-,12-光圈+,13-光圈-
  // 3-右,7-右下,1-下,5-左下,2-左,4-左上,0-上,6-右上
  const directionList = [3, 7, 1, 5, 2, 4, 0, 6];

  // 触发控制接口
  const handleControl = async (num) => {
    var formData = new FormData();
    const data = {
      id: videoInfo.id,
      direction: num,
      'site-code': window?.globalConfig?.userInfo?.LocalSite || '',
    };
    for (const key in data) {
      formData.append(key, data[key]);
    }
    const res = await controlSlim(formData);
    if (res.code !== 200) {
      notification.error({
        message: '操作失败',
        description: res?.msg ?? '',
      });
    }
  };
  return (
    <div className={styles['cloud-plate']}>
      <div className={styles['cloud-right']}>
        <div className={styles['circle-container']}>
          <div className={styles['block-container']}>
            <div className={styles['block-icon-container']}></div>
          </div>
          <div className={styles.circleWrap}>
            <div className={styles.lineWrap}>
              <div className={classNames(styles['vertical-line'], styles['line'])} />
              <div className={classNames(styles['horizontal-line'], styles['line'])} />
              <div className={classNames(styles['diagonal-line-1'], styles['line'])} />
              <div className={classNames(styles['diagonal-line-2'], styles['line'])} />
            </div>
          </div>
          <div className={styles['circle']}>
            {Array.from({ length: dotCount }).map((_, index) => (
              <div
                key={index}
                className={classNames(styles['dot'], styles[`dot${index + 1}`])}
                style={getDotStyle(index)}
                onClick={() => {
                  handleControl(directionList[index]);
                }}
              />
            ))}
          </div>
        </div>
        <div className={styles['info-contianer']}>
          <div className={styles['close-wrapper']} onClick={onClose}>
            <CloseOutlined />
          </div>
          <div className={classNames(styles['operation-wrap'])}>
            <div>变倍</div>
            <div
              className={styles['opera-btn']}
              onClick={() => {
                handleControl(8);
              }}
            >
              <PlusOutlined />
            </div>
            <div
              className={styles['opera-btn']}
              onClick={() => {
                handleControl(9);
              }}
            >
              <MinusOutlined />
            </div>
          </div>
          <div className={classNames(styles['operation-wrap'])}>
            <div>聚焦</div>
            <div
              className={styles['opera-btn']}
              onClick={() => {
                handleControl(10);
              }}
            >
              <PlusOutlined />
            </div>
            <div
              className={styles['opera-btn']}
              onClick={() => {
                handleControl(11);
              }}
            >
              <MinusOutlined />
            </div>
          </div>
          <div className={classNames(styles['operation-wrap'])}>
            <div>光圈</div>
            <div
              className={styles['opera-btn']}
              onClick={() => {
                handleControl(12);
              }}
            >
              <PlusOutlined />
            </div>
            <div
              className={styles['opera-btn']}
              onClick={() => {
                handleControl(13);
              }}
            >
              <MinusOutlined />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CloudPlate;