import React from 'react';
import { connect } from 'dva';
import Modal from './Modal';
import { DataTable } from '../../../components';
import { Switch } from 'antd';

const Reminder = ({ dispatch, reminders, loading }) => {
  const { list, total, currentItem, modalVisible, mode } = reminders;

  const domain = 'reminders';

  const modalProps = {
    dispatch,
    loading,
    mode,
    domain,
    reminders,
    record: currentItem,
    visible: modalVisible,
    maskClosable: false,
    width: '80%',
    confirmLoading: mode === 'create' ? loading.effects[`${domain}/create`] : loading.effects[`${domain}/update`],
    readOnly: mode === 'view',
    title: '预警提醒',
    wrapClassName: 'vertical-center-modal',
    onOk(data) {
      dispatch({
        type: `${domain}/${mode}`,
        payload: data,
      });
    },
    onCancel() {
      dispatch({
        type: `${domain}/hideModal`,
      });
    },
  };

  const tableProps = {
    scroll: { x: '100%', y: 350 },
    domain,
    dispatch,
    loading,
    total,
    dataSource: list,
    showDelete: false,
    filter: [{
      title: '预警提醒',
      dataIndex: 'reminderLike',
    }],
    columns: [{
      title: '提醒种别',
      dataIndex: 'remindClass',
      width: '10%',
    }, {
      title: '提醒类型',
      dataIndex: 'remindType',
      width: '10%',
    }, {
      title: '提醒天数1',
      dataIndex: 'remindDays1',
      width: '10%',
    }, {
      title: '提醒天数2',
      dataIndex: 'remindDays2',
      width: '10%',
    }, {
      title: '提醒天数3',
      dataIndex: 'remindDays3',
      width: '10%',
    }, {
      title: '提醒天数4',
      dataIndex: 'remindDays4',
      width: '10%',
    }, {
      title: '提醒天数5',
      dataIndex: 'remindDays5',
      width: '10%',
    }, {
      title: '是否生效',
      dataIndex: 'deleteFlag',
      width: '10%',
      render: (value, record, index) => (value ? '否' : '是')
    }, {
      title: '开关',
      dataIndex: '',
      width: '10%',
      render: (value, record, index) =>
        <Switch size="small" checked={!record.deleteFlag}
                onChange={(checked) => {
                  dispatch({
                    type: checked ? `${domain}/enable` : `${domain}/disable`,
                    payload: {
                      id: record.id,
                    }
                  });
                }}/>
    }],
  };

  return (
    <div className="content-inner">
      <DataTable {...tableProps} />
      {modalVisible && <Modal {...modalProps} />}
    </div>
  );
};
export default connect(({ reminders, loading }) => ({ reminders, loading }))(Reminder);
