import React from 'react';
import { connect } from 'dva';
import DeployModal from './DeployModal';
import RoleModal from './RoleModal';
import NotifyModal from './NotifyModal';
import { DataTable } from '../../../components';
import { config, dataUtils } from '../../../utils';
import { Button, Col, List, Row, Tabs } from 'antd';

const TabPane = Tabs.TabPane;

const Definition = ({ dispatch, definitions, loading }) => {
  const {
    list, total, latestList, latestTotal, currentItem, mode,
    deployModalVisible, roleModalVisible, notifyModalVisible,
    taskRoles, taskNotifies
  } = definitions;

  const domain = 'definitions';

  const deployModalProps = {
    dispatch,
    loading,
    mode,
    domain,
    record: currentItem,
    visible: deployModalVisible,
    maskClosable: false,
    width: '70%',
    readOnly: mode === 'view',
    title: '流程部署',
    wrapClassName: 'vertical-center-modal',
    onOk(data) {
      dispatch({ type: `${domain}/hideAndRefresh` });
    },
    onCancel() {
      dispatch({ type: `${domain}/hideModal` });
    },
  };

  const roleModalProps = {
    dispatch,
    loading,
    mode,
    domain,
    record: currentItem,
    taskRoles,
    visible: roleModalVisible,
    maskClosable: false,
    width: '50%',
    readOnly: mode === 'view',
    title: `流程角色 - ${currentItem.defName}`,
    wrapClassName: 'vertical-center-modal',
    onOk() {
      dispatch({ type: `${domain}/saveTaskRoles` });
    },
    onCancel() {
      dispatch({ type: `${domain}/hideModal` });
    },
  };

  const notifyModalProps = {
    dispatch,
    loading,
    mode,
    domain,
    record: currentItem,
    taskNotifies,
    visible: notifyModalVisible,
    maskClosable: false,
    width: '50%',
    readOnly: mode === 'view',
    title: `流程知会 - ${currentItem.defName}`,
    wrapClassName: 'vertical-center-modal',
    onOk() {
      dispatch({
        type: `${domain}/saveTaskNotifies`,
        payload: { defId: currentItem.defId }
      });
      dispatch({ type: `${domain}/hideAndRefresh` });
    },
    onCancel() {
      dispatch({ type: `${domain}/hideModal` });
    },
  };

  const renderExtraInfo = (record) => {
    if (record.confs && record.files) {
      return <Row gutter={24}>
        <Col span={12}>
          <List
            size="small"
            header={<div>配置文件</div>}
            bordered
            dataSource={record.files}
            renderItem={item => (<List.Item>{item}</List.Item>)}
          />
        </Col>
        <Col span={12}>
          <List
            size="small"
            header={<div>DB配置</div>}
            bordered
            dataSource={record.confs}
            renderItem={item => (<List.Item>{item}</List.Item>)}
          />
        </Col>
      </Row>;
    } else {
      return 'Loading...';
    }
  };

  const tableProps = {
    scroll: { x: '100%', y: 450 },
    rowKey: 'defId',
    domain,
    showAdd: false,
    showView: false,
    showEdit: false,
    showDelete: false,
    enableDoubleClick: false,
    withFetch: false,
    sortBy: 'depTime',
    sortDirection: 'DESC',
    dispatch,
    loading,
    expandedRowRender: renderExtraInfo,
    buttons: [{
      key: 'designFlow',
      type: 'primary',
      name: '设计流程图',
      requiredSelected: 1,
      cb: (selectedKeys) => {
        window.open(`${config.designerURL}/?defId=${selectedKeys[0]}`);
      },
    }, {
      key: 'designForm',
      type: 'primary',
      name: '设计表单',
      requiredSelected: 1,
      cb: (selectedKeys) => {
        window.open(`${config.designerURL}/form?defId=${selectedKeys[0]}`);
      },
    }, {
      key: 'bpmRole',
      type: 'primary',
      name: '流程角色',
      requiredSelected: 1,
      cb: (selectedKeys, searchBarForm, selectedRows) => {
        dispatch({
          type: `${domain}/queryTaskRoles`,
          payload: {
            selectedRow: selectedRows[0],
          }
        });
      },
    }, {
      key: 'commit',
      type: 'primary',
      name: '发布',
      requiredSelected: 1,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/commitModel`,
          payload: {
            defId: selectedKeys[0],
          }
        });
      },
    }, {
      key: 'notify',
      type: 'primary',
      name: '知会',
      requiredSelected: 1,
      cb: (selectedKeys, searchBarForm, selectedRows) => {
        dispatch({
          type: `${domain}/queryTaskNotifies`,
          payload: {
            selectedRow: selectedRows[0],
          }
        });
      },
    }],
    filter: [{
      title: '流程定义',
      dataIndex: 'defIdName',
    }],
    columns: [{
      title: '流程定义编号',
      dataIndex: 'defId',
      className: 'alignLeft',
      sorter: true,
      width: '25%',
    }, {
      title: '流程定义名称',
      dataIndex: 'defName',
      className: 'alignLeft',
      sorter: true,
      width: '25%',
    }, {
      title: '版本',
      dataIndex: 'version',
      className: 'alignLeft',
      width: '5%',
    }, {
      title: '文件名',
      dataIndex: 'srcName',
      className: 'alignLeft',
      width: '25%',
    }, {
      title: '部署时间',
      dataIndex: 'depTime',
      sorter: true,
      width: '15%',
      render: (value, row, index) => {
        return dataUtils.dtm(value);
      },
    }],
  };

  const latestTableProps = {
    ...tableProps,
    total: latestTotal,
    dataSource: latestList,
    onExpand: (expanded, record) => {
      expanded && dispatch({
        type: `${domain}/loadExtraInfo`,
        payload: {
          defId: record.defId,
          isLatest: true,
        }
      });
    },
  };

  const historicTableProps = {
    ...tableProps,
    buttons: [
      ...tableProps.buttons.filter(b => b.key !== 'bpmRole')
    ],
    total,
    dataSource: list,
    onExpand: (expanded, record) => {
      expanded && dispatch({
        type: `${domain}/loadExtraInfo`,
        payload: {
          defId: record.defId,
          isLatest: false,
        }
      });
    },
  };

  const onDeploy = () => {
    dispatch({
      type: `${domain}/showDeployModal`
    });
  };

  const deployBtn = <Button key="deploy" type="primary" onClick={onDeploy}>部署</Button>;

  return (
    <div className="content-inner">
      <Tabs type="card" tabBarExtraContent={deployBtn}>
        <TabPane tab="最新版本" key="1">
          <DataTable {...latestTableProps} />
        </TabPane>
        <TabPane tab="历史版本" key="2">
          <DataTable {...historicTableProps} />
        </TabPane>
      </Tabs>
      {deployModalProps && <DeployModal {...deployModalProps} />}
      {roleModalProps && <RoleModal {...roleModalProps} />}
      {notifyModalProps && <NotifyModal {...notifyModalProps} />}
    </div>
  );
};

export default connect(({ definitions, loading }) => ({ definitions, loading }))(Definition);
