import React, { useState, useEffect } from 'react';
import {
  Form,
  Modal,
  Input,
  Select,
  notification,
  Slider,
  InputNumber,
  Row,
  Col,
  Image,
  Radio,
  Button,
} from 'antd';
import styles from '../dimensionsConfig.less';
import thumbnail_1 from '@/assets/images/thumbnail/thumbnail_1.jpg';
import thumbnail_2 from '@/assets/images/thumbnail/thumbnail_2.jpg';
import thumbnail_3 from '@/assets/images/thumbnail/thumbnail_3.jpg';
import thumbnail_4 from '@/assets/images/thumbnail/thumbnail_4.jpg';
import { AddBaseMap, EditBaseMap } from '@/services/webConfig/api';
import { number } from 'prop-types';
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
  const { callBackSubmit = () => {}, type, formObj, visible, baseMap } = props;
  const [loading, setLoading] = useState(false);
  const [radio, setRadio] = useState();
  const [alpha, setAlpha] = useState(1);
  const [mapType, setMapType] = useState(0);
  const [form] = Form.useForm();
  const arr = [
    'assets/images/thumbnail/thumbnail_1.jpg',
    'assets/images/thumbnail/thumbnail_2.jpg',
    'assets/images/thumbnail/thumbnail_3.jpg',
    'assets/images/thumbnail/thumbnail_4.jpg',
  ];

  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let str = type === 'add' ? AddBaseMap : EditBaseMap;
        let obj = form.getFieldsValue();
        let arr = {
          name: obj.name,
          type: obj.type,
          opacity: Number(alpha),
          icon: obj.icon,
          url: obj.url,
        };
        str(arr)
          .then(res => {
            setLoading(false);
            if (res.msg === 'Ok' || res.msg === '') {
              form.resetFields();
              callBackSubmit();
              notification.success({
                message: '提示',
                duration: 3,
                description: res.message || type == 'add' ? '新增成功' : '编辑成功',
              });
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.message || type == 'add' ? '新增失败' : '编辑失败',
              });
            }
          })
          .catch(err => {
            setLoading(false);
          });
      }
    });
  };

  const onFinish = value => {};
  useEffect(() => {
    switch (type) {
      case 'add':
        setRadio('');
        setAlpha(1);
        form.resetFields();
        form.setFieldsValue({
          name: baseMap[0],
          type: servicenameToType(baseMap[0]),
        });

        break;
      case 'edit':
        form.setFieldsValue({ ...formObj });
        setAlpha(formObj.opacity);
        let index = formObj.icon.lastIndexOf('/');
        let str = formObj.icon.substring(index + 1, formObj.icon.length);
        let flag = '';
        let defaultIndex = arr.filter((item, index1) => {
          if (item.indexOf(str) !== -1) {
            flag = index1;
          }
        });
        setRadio(arr[flag]);
        break;
      default:
        break;
    }
    // if (form.getFieldsValue('').servicename && baseMap.indexOf(form.getFieldsValue('').servicename) == 2 || baseMap.indexOf(form.getFieldsValue('').servicename) == 3) {
    //   setMapType(1)
    // }
    // else {
    //   setMapType(0)
    // }
  }, [visible]);

  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 18,
    },
  };
  const onChange = value => {
    let silderData = value == 100 ? 1 : (value / 100).toFixed(1);
    setAlpha(silderData);
  };
  const tipFormatter = value => {
    return (value / 100).toFixed(1);
  };

  const imgURL = [
    {
      url: thumbnail_1,
    },
    {
      url: thumbnail_2,
    },
    {
      url: thumbnail_3,
    },
    {
      url: thumbnail_4,
    },
  ];

  const radioChange = e => {
    setRadio(e.target.value);
  };
  const handleChange = value => {
    form.setFieldsValue({
      type: servicenameToType(value),
    });
    // if (baseMap.indexOf(value) == 2 || baseMap.indexOf(value) == 3) {
    //   setMapType(1)
    // }
    // else {
    //   setMapType(0)
    // }
  };
  //添加地图类型
  const servicenameToType = servicename => {
    // if (servicename.indexOf('地形图') > -1)
    //   servicename = '地形图'
    // if (servicename.indexOf('自定义底图') > -1)
    //   servicename = '自定义底图'
    switch (servicename) {
      case '高德街道':
        return 'amap-v';
      case '高德影像':
        return 'amap-i';
      case '天地图街道':
        return 'tianditu-v';
      case '天地图影像':
        return 'tianditu-i';
      case '百度街道':
        return 'baiduMapStreet';
      case '百度影像':
        return 'baiduMapImage';
      case 'mapBox地图':
        return 'mapBoxImage';
      case 'arcgis地图':
        return 'arcgisImage';
      default:
        return 'amap-v';
    }
  };
  //选择坐标系
  const handleCoordinate = () => {};
  //选择图层
  const handleLayer = () => {};
  //选择工作空间
  const handleWorkSpance = () => {};

  return (
    <Modal
      title={`${type === 'add' ? '添加' : '编辑'}底图`}
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: '150px' }}
      width="700px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
      forceRender={true}
      getContainer={false}
    >
      {visible && (
        <Form form={form} {...layout} onFinish={onFinish}>
          <Item label="名称" name="name" rules={[{ required: true, message: '请选择服务名' }]}>
            <Select onChange={handleChange}>
              {type === 'add'
                ? baseMap.map((item, index) => {
                    return (
                      <Option value={item} key={index}>
                        {item}
                      </Option>
                    );
                  })
                : ''}
            </Select>
          </Item>
          <Item label="类型" name="type">
            <Input placeholder="请输入类型" allowClear disabled />
          </Item>
          <Item label="URL" name="url">
            <Input placeholder="请输入URL" allowClear />
          </Item>
          <Item label="透明度">
            <Row>
              <Col span={12}>
                <Slider
                  min={0}
                  max={100}
                  onChange={onChange}
                  step={0.1}
                  tipFormatter={tipFormatter}
                  defaultValue={type === 'add' ? 100 : formObj.opacity * 100}
                />
              </Col>
              <Col span={4}>
                <InputNumber
                  min={0}
                  max={1}
                  disabled
                  style={{ margin: '0 16px' }}
                  defaultValue={type === 'add' ? 1 : formObj.opacity}
                  value={alpha}
                  onChange={onChange}
                />
              </Col>
            </Row>
          </Item>
          <Item label="选择缩略图" name="icon">
            <div className={styles.imgList}>
              {imgURL.map((item, index) => {
                return (
                  <div key={index} className={styles.imgItem}>
                    <Image width={100} height={63} src={item.url} />
                    <Radio.Group options={item} onChange={radioChange} value={radio}>
                      <Radio value={arr[index]} />
                    </Radio.Group>
                  </div>
                );
              })}
            </div>
          </Item>
          <Item label="缩略图" name="icon" rules={[{ required: true, message: '请选择缩略图' }]}>
            <Input placeholder="请输入URL" allowClear />
          </Item>
          {mapType === 1 ? (
            <>
              <Item label="ip地址" name="IP" rules={[{ required: true, message: '请输入ip地址' }]}>
                <Input placeholder="请输入ip地址" allowClear />
              </Item>
              <Item
                label="geoserver名"
                name="gis"
                rules={[{ required: true, message: '请选择缩略图' }]}
              >
                <div className={styles.imgList}>
                  <Input placeholder="请输入gis服务器名" allowClear />
                  <Button style={{ marginLeft: '0.5rem' }}>选择工作空间</Button>
                </div>
              </Item>

              <Item
                label="工作空间"
                name="workSpance"
                rules={[{ required: true, message: '请选择工作空间' }]}
              >
                <Select onChange={handleWorkSpance} />
              </Item>
              <Item
                label="图层名"
                name="layer"
                rules={[{ required: true, message: '请选择图层名' }]}
              >
                <Select onChange={handleLayer} />
              </Item>
              <Item
                label="坐标系名"
                name="coordinate"
                rules={[{ required: true, message: '请选择坐标系名' }]}
              >
                <Select onChange={handleCoordinate} />
              </Item>

              <Item
                label="底图范围"
                name="range"
                rules={[{ required: true, message: '请选择底图范围' }]}
              >
                <Input placeholder="xmin,ymin,xmax,ymax" allowClear />
              </Item>
              <Item
                label="起始级别"
                name="initLevel"
                rules={[{ required: true, message: '请选择起始级别' }]}
              >
                <Input placeholder="最初显示级别" allowClear />
              </Item>
              <Item
                label="最大级别"
                name="maxLevel"
                rules={[{ required: true, message: '请选择最大级别' }]}
              >
                <Input placeholder="最大显示级别" allowClear />
              </Item>
              <Item
                label="代理url"
                name="proxy"
                rules={[{ required: true, message: '请选择缩略图' }]}
              >
                <Input placeholder="请输入URL" allowClear />
              </Item>
            </>
          ) : (
            ''
          )}
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;