import React, { useEffect, useState } from 'react';
import { StackedColumnBarProps } from '../../index.d';
import { Button, Divider, Form, Input, Modal, Table, Tabs } from 'antd'
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import './index.less'
import HttpPropsEditor from '../HttpPropsEditor';

export interface StackedColumnBarEditorProps extends StackedColumnBarProps {
  [key: string]: any;
  editFinish: (value: any) => void;
}
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const StackedColumnBarEditor: React.FC<StackedColumnBarEditorProps> = (props) => {
  const { editFinish, configs: { dataCfg, propsCfg } } = props
  const [form] = Form.useForm()
  const [colAddForm] = Form.useForm()
  const [source, setSource] = useState<any>([])
  const [colRowKeys, setColRowKeys] = useState<any>([])
  const [visible, setVisible] = useState(false)

  useEffect(() => { 
    if (propsCfg&&propsCfg.columnsDefine) { 
      setSource(propsCfg.columnsDefine)
    }
  },[])
  const onFormFinish = (val: any) => {
    if (editFinish) {
      val.propsCfg = {
        ...val.propsCfg,
        columnsDefine:source
      }
      editFinish(val);
    }
  }
  const addCol = () => {
    setVisible(true)
  }
  const deleteCol = () => {
    const dataList = [...source]
    const tempList = dataList.filter((x: any) => {
      return !colRowKeys.includes(x.key)
    })
    setSource([...tempList])
  }
  // 列定义表头
  const col = [
    {
      title: '坐标名',
      dataIndex: 'title',
      width: '200px',
    }
  ]
  const onColsAdd = (val: any) => {
    // console.log('onColsAdd', val)
    const dataList = [...source]
    const k = `${dataList.length}-${new Date().getTime().toString()}`
    dataList.push({
      title: val.columnsName,
      key: k
    })
    setSource([...dataList])
    setVisible(false)
  }
  return <div>
    <Form
      form={form}
      initialValues={{dataCfg,propsCfg}}
      {...layout}
      size="small"
      onFinish={(val) => {
        onFormFinish(val)
      }}
    >
      <Tabs defaultActiveKey="1">
        <Tabs.TabPane tab="DataConfig" key="1">
          <Form.Item
            label="获取方式"
            name={["dataCfg","getDataWay"]}
            rules={[{ required: true }]}
            initialValue="API"
            wrapperCol={{ span: 11 }}>
            <Input readOnly={true}></Input>
          </Form.Item>
          <HttpPropsEditor />
        </Tabs.TabPane>
        <Tabs.TabPane tab="PropsConfig" key="2">
          <Form.Item label="X轴坐标">
            <Table
              columns={col}
              dataSource={source}
              rowKey={row => row.key}
              size="small"
              scroll={{ y: 170 }}
              rowSelection={{
                columnWidth: 30,
                selectedRowKeys: colRowKeys,
                onChange: (srks: any) => {
                  setColRowKeys(srks)
                }
              }}
              pagination={false}
            />
          </Form.Item>
          <div style={{ textAlign: 'right' }}>
            <Button
              size="small"
              icon={<PlusOutlined />}
              onClick={() => { addCol() }}
            >新增</Button>&nbsp;
                            <Button
              size="small"
              icon={<MinusOutlined />}
              onClick={() => { deleteCol() }}
            >删除</Button>
          </div>
          <Modal
            title="新增"
            centered
            visible={visible}
            onOk={() => { colAddForm.submit() }}
            onCancel={() => setVisible(false)}
            width={500}
          >
            <Form
              size="small"
              form={colAddForm}
              labelCol={{ span: 4 }}
              onFinish={(val) => {
                onColsAdd(val)
              }}>
              <Form.Item label="坐标名" name="columnsName">
                <Input />
              </Form.Item>
            </Form>
          </Modal>
        </Tabs.TabPane>
      </Tabs>
      <Divider style={{ margin: 0 }} />
      <div style={{ textAlign: 'left', marginTop: '10px' }}>
        <Button type="primary" size="middle" onClick={() => { form.submit() }}>保存</Button>
      </div>
    </Form>
  </div>
}

export default StackedColumnBarEditor;