import React, { useState } from "react";
import { Modal } from "antd";

import { dispatch } from '../../../../model';
import ModelTree from './ModelTree';
import { showMessage, showNotifaction } from '../../../../util';

const RecatalogModal = (props) => {
  
  const { onCancel, visible, ids } = props;
  const [ catalogId, setCatalogId ] = useState('');
  const [ confirmLoading, setConfirmLoading ] = useState(false);

  const onSelect = (value) => {
    setCatalogId(value);
  }

  const onOk = () => {
    if ((catalogId||'') === '') {
      showMessage('warn', '请先选择服务目录');
      return;
    }
    
    setConfirmLoading(true);
    dispatch({
      type: 'pds.recatalogService',
      payload: {
        params: {
          pdsDataServiceCatalogId: catalogId,
          pdsDataServiceIds: ids.join(',')
        },
      },
      callback: message => {
        setConfirmLoading(false);

        if ((message||'')!=='' && (message||'')!=='ok') {
          showNotifaction('提示', message, 5);
        }

        reset();
        onCancel && onCancel(true);
      },
      error: () => {
        setConfirmLoading(false);
      }
    })
  }

  const reset = () => {
    setConfirmLoading(false);
    setCatalogId('');
  }

  return(
    <div>
    {
      visible && <Modal
        title='变更目录详情'
        visible={ visible }
        width={ 400 }
        confirmLoading={ confirmLoading }
        onCancel={()=>{ 
          reset();
          onCancel && onCancel()
        }}
        onOk={ onOk }
      >
        <ModelTree
          refrence='recatalog'
          onSelect={onSelect} 
        /> 
      </Modal>
    }
    </div>
  )
}

export default RecatalogModal;