import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification, Button } from 'antd';
import {
  AddSchema,
  AddSchemaBaseMap,
  bindSchemeBaseMap,
  GetBaseMapList,
  GetVectorDataList
} from '@/services/webConfig/api';
import MapScope from '@/components/ThreeMapScope'
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
  const { callBackSubmit = () => { }, type, formObj, visible, serviceList } = props;
  const [loading, setLoading] = useState(false);
  const [baseMap, setBaseMap] = useState([]);
  const [pipeArr, setPipeArr] = useState([]);
  const [data, setData] = useState([]);
  const [mapSettings, setMapSettings] = useState({ areaName: '选择视角' });
  const [mapScopeVisible, setMapScopeVisible] = useState(false)
  const [baseMapData, setBaseMapData] = useState([])
  const [form] = Form.useForm();
  const baseMapList = {
    'amap-v': "高德街道",
    'amap-i': "高德影像",
    'tianditu-v': "天地图街道",
    'tianditu-i': "天地图影像",
    'bmap-v': "百度街道",
    'bmap-i': "百度影像"
  }
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        if (type === 'add') {
          AddSchemaBaseMap({
            schemename: formObj.schemename,
            type: obj.serverName
          }).then(res => {
            setLoading(false);
            if (res.msg === '') {
              form.resetFields();
              callBackSubmit();
              prompt('success', '瓦片新增成功')
            }
            else {
              prompt('fail', '瓦片新增失败')
            }
          })
        } else {
          handleEdit();
        }
      }
    });
  };
  const prompt = (type, content) => {
    if (type == 'success') {
      notification.success({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
    else {
      notification.error({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
  }
  const handleEdit = () => {
    let obj = form.getFieldsValue();
    AddSchema({
      schemename: obj.schemename,
      data,
      mapSettings: mapSettings.areaName === '选择视角' ? {} : mapSettings,
      baseMap: baseMapData
    })
      .then(res => {
        setLoading(false);
        if (res.msg === "") {
          form.resetFields();
          callBackSubmit();
          prompt('success', '方案新增成功')
        } else {
          prompt('fail', res.msg)
        }
      })
      .catch(err => {
        setLoading(false);
      });
  };

  const onFinish = value => {

  };
  useEffect(() => {
    switch (type) {
      case 'add':
        console.log('serviceList', serviceList);
        addTile()
        break;
      case 'schemeAdd':
        pipeNetwork()
        break;
      default:
        break;
    }
  }, [visible]);

  //添加瓦片
  const addTile = () => {
    form.setFieldsValue({
      serverName: serviceList[0]
    })
  }
  //获取管网及默认底图
  const pipeNetwork = () => {
    form.resetFields();
    setMapSettings({ areaName: '选择视角' })
    let req1 = GetBaseMapList()
    let req2 = GetVectorDataList()
    let pipeArr = [], baseMap = [];
    Promise.all([req1, req2]).then(res => {
      if (res[0].msg === 'Ok') {
        setBaseMap(res[0].data)
      }
      if (res[1].msg === 'Ok') {
        (res[1].data || []).map(item => {
          pipeArr.push(item.id)
        })
      }
      setPipeArr(pipeArr)
      form.setFieldsValue({
        baseMap: res[0].data[0].name
      })
    })
  }
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 16,
    },
  };

  //选择服务名
  const handleChange = (value) => {


  }
  //选择管网
  const handleService = (value) => {
    setData(value)
  }

  //选择底图
  const handleBaseMap = (value, option) => {
    let baseMapDataArr = []
    value.map((item, index) => {
      baseMapDataArr.push({ type: item, status: index == 0 ? 'active' : 'notActive' })
    })
    setBaseMapData(baseMapDataArr)
  }
  const submitExtent = (mapSettings) => {
    setMapScopeVisible(false)
    if (JSON.stringify(mapSettings) != '{}') {
      setMapSettings(mapSettings)
      form.setFieldsValue({
        camera: mapSettings.areaName
      })
    }
  }
  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}>
          {type === 'add' ? <Item
            label="服务名"
            name="serverName"
          >
            <Select onChange={handleChange}>
              {serviceList.length ? serviceList.map((item, index) => { return <Option key={index} value={item}>{baseMapList[item]}</Option>; }) : ''}
            </Select>
          </Item> :
            <>
              <Item
                label="方案名"
                name="schemename"
                rules={[{ required: true, message: '请输入方案名' }]}
              >
                <Input placeholder="请输入方案名" allowClear />
              </Item>
              <Item
                label="数据源"
              >
                <Select onChange={handleService} mode="multiple" >
                  {pipeArr.length ? pipeArr.map((item, index) => { return <Option key={index} value={item}>{item}</Option>; }) : ''}
                </Select>
              </Item>
              <Item
                label="瓦片"
                name=''
                rules={[{ required: true, message: '请选择瓦片' }]}
              >
                <Select onChange={handleBaseMap} mode="multiple">
                  {baseMap.length ? baseMap.map((item, index) => { return <Option key={index} value={item.type}>{item.name}</Option>; }) : ''}
                </Select>
              </Item>
              <Item
                label="视角"
                name="camera"
              >
                <Button style={{ width: '100%' }} onClick={() => setMapScopeVisible(true)}>{mapSettings.areaName}</Button>
              </Item>
            </>}


        </Form>
      )}
    </Modal>
      <MapScope
        visible={mapScopeVisible}
        onCancel={() => setMapScopeVisible(false)}
        confirmModal={submitExtent} /></>
  );
};
export default AddModal;