import React, { useState, useEffect } from 'react';
import { message, Form, Input, notification, Button, Select, Card } from 'antd';
import {
  getSevenParams,
  getSevenParamsByTransType,
  postSevenParams,
} from '../../../services/appConfig/api';
import styles from './otherConfig.less';

const SevenParams = props => {
  const { Option } = Select;
  // 根据转换类型 transType 渲染 输入框参数 params
  const [transType, setTransType] = useState('1');
  const [sevenForm] = Form.useForm();
  const transTypeChange = value => {
    // console.log(`selected ${value}`);
    setTransType(value);
    getSevenParamsByTransType(value)
      .then(res => {
        if (res) {
          sevenForm.setFieldsValue({
            // transType 1 2
            angle: res.angle,
            m: res.m,
            // transType 1 3 5 6
            x_off: res.x_off,
            y_off: res.y_off,
            // transType 2
            x0_gps: res.x0_gps,
            x0_local: res.x0_local,
            y0_gps: res.y0_gps,
            y0_local: res.y0_local,
            // transType 3 4 6
            seven_m: res.seven_m,
            seven_x_angle: res.seven_x_angle,
            seven_x_off: res.seven_x_off,
            seven_y_angle: res.seven_y_angle,
            seven_y_off: res.seven_y_off,
            seven_z_angle: res.seven_z_angle,
            seven_z_off: res.seven_z_off,
            // transType 4
            four_angle: res.four_angle,
            four_m: res.four_m,
            four_x_off: res.four_x_off,
            four_y_off: res.four_y_off,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };
  // 提交七参数，根据转换类型提交不同的参数
  const submitSevenParams = () => {
    const sevenFormData = {
      append(key, value) {
        // eslint-disable-next-line react/no-this-in-sfc
        this[key] = value;
      },
    };
    // const sevenFormData = {};
    sevenFormData.append('ellipseType', sevenForm.getFieldValue('ellipseType'));
    sevenFormData.append('transType', sevenForm.getFieldValue('transType'));
    sevenFormData.append('middleLine', sevenForm.getFieldValue('middleLine'));
    sevenFormData.append('rev', sevenForm.getFieldValue('rev'));
    if (transType === '1') {
      sevenFormData.append('x_off', sevenForm.getFieldValue('x_off'));
      sevenFormData.append('y_off', sevenForm.getFieldValue('y_off'));
      sevenFormData.append('angle', sevenForm.getFieldValue('angle'));
      sevenFormData.append('m', sevenForm.getFieldValue('m'));
    }
    if (transType === '2') {
      sevenFormData.append('angle', sevenForm.getFieldValue('angle'));
      sevenFormData.append('m', sevenForm.getFieldValue('m'));
      sevenFormData.append('x0_local', sevenForm.getFieldValue('x0_local'));
      sevenFormData.append('y0_local', sevenForm.getFieldValue('y0_local'));
      sevenFormData.append('x0_gps', sevenForm.getFieldValue('x0_gps'));
      sevenFormData.append('y0_gps', sevenForm.getFieldValue('y0_gps'));
    }
    if (transType === '3') {
      sevenFormData.append('x_off', sevenForm.getFieldValue('x_off'));
      sevenFormData.append('y_off', sevenForm.getFieldValue('y_off'));
      sevenFormData.append(
        'seven_x_off',
        sevenForm.getFieldValue('seven_x_off'),
      );
      sevenFormData.append(
        'seven_y_off',
        sevenForm.getFieldValue('seven_y_off'),
      );
      sevenFormData.append(
        'seven_z_off',
        sevenForm.getFieldValue('seven_z_off'),
      );
      sevenFormData.append(
        'seven_x_angle',
        sevenForm.getFieldValue('seven_x_angle'),
      );
      sevenFormData.append(
        'seven_y_angle',
        sevenForm.getFieldValue('seven_y_angle'),
      );
      sevenFormData.append(
        'seven_z_angle',
        sevenForm.getFieldValue('seven_z_angle'),
      );
      sevenFormData.append('seven_m', sevenForm.getFieldValue('seven_m'));
    }
    if (transType === '4') {
      sevenFormData.append('x_off', sevenForm.getFieldValue('x_off'));
      sevenFormData.append('y_off', sevenForm.getFieldValue('y_off'));
      sevenFormData.append(
        'seven_x_off',
        sevenForm.getFieldValue('seven_x_off'),
      );
      sevenFormData.append(
        'seven_y_off',
        sevenForm.getFieldValue('seven_y_off'),
      );
      sevenFormData.append(
        'seven_z_off',
        sevenForm.getFieldValue('seven_z_off'),
      );
      sevenFormData.append(
        'seven_x_angle',
        sevenForm.getFieldValue('seven_x_angle'),
      );
      sevenFormData.append(
        'seven_y_angle',
        sevenForm.getFieldValue('seven_y_angle'),
      );
      sevenFormData.append(
        'seven_z_angle',
        sevenForm.getFieldValue('seven_z_angle'),
      );
      sevenFormData.append('seven_m', sevenForm.getFieldValue('seven_m'));
      sevenFormData.append('four_x_off', sevenForm.getFieldValue('four_x_off'));
      sevenFormData.append('four_y_off', sevenForm.getFieldValue('four_y_off'));
      sevenFormData.append('four_angle', sevenForm.getFieldValue('four_angle'));
      sevenFormData.append('four_m', sevenForm.getFieldValue('four_m'));
    }
    if (transType === '5') {
      sevenFormData.append('x_off', sevenForm.getFieldValue('x_off'));
      sevenFormData.append('y_off', sevenForm.getFieldValue('y_off'));
    }
    if (transType === '6') {
      sevenFormData.append(
        'seven_x_off',
        sevenForm.getFieldValue('seven_x_off'),
      );
      sevenFormData.append(
        'seven_y_off',
        sevenForm.getFieldValue('seven_y_off'),
      );
      sevenFormData.append(
        'seven_z_off',
        sevenForm.getFieldValue('seven_z_off'),
      );
      sevenFormData.append(
        'seven_x_angle',
        sevenForm.getFieldValue('seven_x_angle'),
      );
      sevenFormData.append(
        'seven_y_angle',
        sevenForm.getFieldValue('seven_y_angle'),
      );
      sevenFormData.append(
        'seven_z_angle',
        sevenForm.getFieldValue('seven_z_angle'),
      );
      sevenFormData.append('seven_m', sevenForm.getFieldValue('seven_m'));
      sevenFormData.append('x_off', sevenForm.getFieldValue('x_off'));
      sevenFormData.append('y_off', sevenForm.getFieldValue('y_off'));
    }
    delete sevenFormData.append;

    postSevenParams(sevenFormData)
      .then(res => {
        if (res.success) {
          notification.success({
            message: '提交成功',
          });
        } else {
          notification.error({
            message: '提交失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };
  // 七参数初始化
  useEffect(() => {
    getSevenParams()
      .then(res => {
        if (res.success) {
          sevenForm.setFieldsValue({
            middleLine: res.transParams.middleLine,
            rev: res.transParams.rev,
            x_off: res.params.x_off,
            y_off: res.params.y_off,
            angle: res.params.angle,
            m: res.params.m,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  }, []);

  return (
    <Card className={styles.cardBox}>
      <p className={styles.title}>七参数配置：</p>
      <Form
        form={sevenForm}
        labelCol={{ span: 2, offset: 0 }}
        wrapperCol={{ span: 12, offset: 0 }}
        onFinish={submitSevenParams}
        initialValues={{ ellipseType: '1', transType: '1' }}
      >
        <Form.Item name="ellipseType" label="椭球类型">
          <Select>
            <Option value="1">54椭球</Option>
            <Option value="2">80椭球</Option>
            <Option value="3">84椭球</Option>
            <Option value="4">2000椭球</Option>
          </Select>
        </Form.Item>
        <Form.Item name="transType" label="转换类型">
          <Select onChange={transTypeChange}>
            <Option value="1">四参数</Option>
            <Option value="2">六参数</Option>
            <Option value="3">七参数</Option>
            <Option value="4">七参数+四参数</Option>
            <Option value="5">中央经线投影（二参数）</Option>
            <Option value="6">七参数+二参数反转</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="middleLine"
          label="中央经线"
          rules={[{ required: true, message: '不能为空' }]}
        >
          <Input placeholder="请输入中央经线" />
        </Form.Item>
        <Form.Item
          name="rev"
          label="rev"
          rules={[{ required: true, message: '不能为空' }]}
        >
          <Input placeholder="请输入rev" />
        </Form.Item>
        {(transType === '1' || transType === '2') && (
          <>
            <Form.Item name="angle" label="angle">
              <Input placeholder="请输入旋转角度" />
            </Form.Item>
            <Form.Item name="m" label="m">
              <Input placeholder="请输入尺度因子" />
            </Form.Item>
          </>
        )}
        {(transType === '1' ||
          transType === '3' ||
          transType === '5' ||
          transType === '6') && (
          <>
            <Form.Item name="x_off" label="x_off">
              <Input placeholder="请输入x坐标平移量" />
            </Form.Item>
            <Form.Item name="y_off" label="y_off">
              <Input placeholder="请输入y坐标平移量" />
            </Form.Item>
          </>
        )}
        {transType === '2' && (
          <>
            <Form.Item name="x0_gps" label="x0_gps">
              <Input placeholder="请输入gps-x坐标" />
            </Form.Item>
            <Form.Item name="y0_gps" label="y0_gps">
              <Input placeholder="请输入gps-y坐标" />
            </Form.Item>
            <Form.Item name="x0_local" label="x0_local">
              <Input placeholder="请输入local-x坐标" />
            </Form.Item>
            <Form.Item name="y0_local" label="y0_local">
              <Input placeholder="请输入local-y坐标" />
            </Form.Item>
          </>
        )}
        {(transType === '3' || transType === '4' || transType === '6') && (
          <>
            <Form.Item name="seven_m" label="seven_m">
              <Input placeholder="请输入尺度因子" />
            </Form.Item>
            <Form.Item name="seven_x_off" label="seven_x_off">
              <Input placeholder="请输入x方向偏移量" />
            </Form.Item>
            <Form.Item name="seven_y_off" label="seven_y_off">
              <Input placeholder="请输入y方向偏移量" />
            </Form.Item>
            <Form.Item name="seven_z_off" label="seven_z_off">
              <Input placeholder="请输入z方向偏移量" />
            </Form.Item>
            <Form.Item name="seven_x_angle" label="seven_x_angle">
              <Input placeholder="请输入x方向偏转角度" />
            </Form.Item>
            <Form.Item name="seven_y_angle" label="seven_y_angle">
              <Input placeholder="请输入y方向偏转角度" />
            </Form.Item>
            <Form.Item name="seven_z_angle" label="seven_z_angle">
              <Input placeholder="请输入z方向偏转角度" />
            </Form.Item>
          </>
        )}
        {transType === '4' && (
          <>
            <Form.Item name="four_x_off" label="four_x_off">
              <Input placeholder="请输入x方向偏移量" />
            </Form.Item>
            <Form.Item name="four_y_off" label="four_y_off">
              <Input placeholder="请输入y方向偏移量" />
            </Form.Item>
            <Form.Item name="four_angle" label="four_angle">
              <Input placeholder="请输入偏转角度" />
            </Form.Item>
            <Form.Item name="four_m" label="four_m">
              <Input placeholder="请输入尺度因子" />
            </Form.Item>
          </>
        )}
        <Form.Item wrapperCol={{ offset: 12 }}>
          <Button type="primary" htmlType="submit">
            更新七参数
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default SevenParams;
