import React, { useState, useEffect } from 'react';
import { Modal, Button, Form, Descriptions, Space, Spin } from 'antd';

import { dispatch } from '../../../../model';
import SelectUsers from './SelectUsers';
import './ExchangeOwner.less';

const FC = ({ visible, id, onCancel }) => {
  const [service, setService] = useState(undefined);
  const [loading, setLoading] = useState(false);
  const [owners, setOwners] = useState(undefined);
  const [currentOwner, setCurrentOwner] = useState(undefined);

  useEffect(() => {
    if (visible) {
      getService();
      getOwners();
    }
  }, [visible, id])

  const getService = () => {
    setLoading(true);
    dispatch({
      type: 'pds.getDataService',
      payload: {
        id
      },
      callback: (data) => {
        setLoading(false);
        setService(data);
        setCurrentOwner(data?.editor);
      },
      error: () => {
        setLoading(false);
      }
    })
  }

  const getOwners = () => {
    dispatch({
      type: 'pds.getOwners',
      callback: (data) => {
        setOwners(data);
      },
      error: () => {
      }
    })
  } 

  const onOwnerChange = (value) => {
    setCurrentOwner(value);
    if (value) {
      dispatch({
        type: 'pds.saveOwner',
        payload: {
          jobNumber: value
        }
      })
    }
  }

  const cancel = () => {
    reset();
    onCancel?.();
  }

  const onOk = () => {
    setLoading(true);
    dispatch({
      type: 'pds.changeOwner',
      payload: {
        params: {
          id,
          ownerName: currentOwner
        }
      },
      callback: () => {
        setLoading(false);
        onCancel?.(true);
      },
      error: () => {
        setLoading(false);
      }
    })
  }

  const reset = () => {
    setService(undefined);
    setLoading(false);
  }

  const footer = [ 
    <Button
      key="0" 
      onClick={cancel}
    >
    取消
    </Button>,
    <Button
      key="1" 
      type="primary"
      onClick={onOk}
    >
    确定
    </Button>,
  ];

  return (
    <Modal 
      className='exchange-owner'
      forceRender
      visible={visible}
      title='更换管理人'
      width={800}
      onCancel={cancel}
      footer={footer}
    >
      <Spin spinning={loading}>
        <Descriptions title={<Space>
          <div style={{ height: 18, width: 3, background: 'rgb(2, 105, 172)' }}></div>
          <div>基本信息</div>
        </Space>}>
          <Descriptions.Item label="数据服务名称">{service?.name}</Descriptions.Item>
          <Descriptions.Item label="数据服务技术名称">{service?.cnName}</Descriptions.Item>
          <Descriptions.Item label="数据服务描述">{service?.remark}</Descriptions.Item>
        </Descriptions>
        <Descriptions title={<Space>
          <div style={{ height: 18, width: 3, background: 'rgb(2, 105, 172)' }}></div>
          <div>提供方信息</div>
        </Space>} />
        <Space>
          <div>管理人:</div>
          <div style={{ width: 200 }}>
            <SelectUsers type='edit' users={owners} value={currentOwner} onChange={onOwnerChange} />
          </div>
        </Space>
      </Spin>
    </Modal>
  )
}

export default FC;