import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Alert, Button, Card, Popconfirm } from 'antd';
import Modal from './Modal';
import { DataTable } from '../../../components';

const Udc = ({ dispatch, udcs, udcItems, loading }) => {
  const { list, total, currentItem, modalVisible, mode, editable } = udcs;

  const domain = 'udcs';
  const domainCN = '数据字典';

  const modalProps = {
    dispatch,
    loading,
    udcItems,
    mode,
    domain,
    record: currentItem,
    visible: modalVisible,
    maskClosable: false,
    width: '60%',
    confirmLoading: mode === 'create' ? loading.effects[`${domain}/create`] : loading.effects[`${domain}/update`],
    readOnly: mode === 'view',
    title: mode === 'create' ? `新增${domainCN}` : (mode === 'update' ? `修改${domainCN}` : `查看${domainCN}`),
    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,
    showAdd: false,
    showDelete: false,
    showEdit: false,
    dataSource: list,
    sortBy: 'domainCode',
    filter: [{
      title: '数据字典',
      dataIndex: 'udcLike',
    }],
    columns: [{
      //   title: '状态',
      //   dataIndex: '',
      //   width: '5%',
      //   render: (value, record, index) => {
      //     return record.sysFlag ? <Icon type="lock" style={{ fontSize: 18, color: '#08c' }} /> : '';
      //   }
      // }, {
      title: '领域编号',
      dataIndex: 'domainCode',
      width: '20%',
    }, {
      title: '字典编号',
      dataIndex: 'udcCode',
      width: '25%',
    }, {
      title: '字典名称',
      dataIndex: 'udcName',
      width: '20%',
    }, {
      title: '字典描述',
      dataIndex: 'udcDesc',
      width: '30%',
    }],
    rowSelection: {
      onSelect: (record, selected, selectedRows, nativeEvent) => {
        dispatch({
          type: `${domain}/editable`,
          payload: {
            showEdit: !record.sysFlag,
          },
        });
      },
    },
  };

  const handleClearCache = () => {
    dispatch({ type: `${domain}/clearCache` });
  };

  return (

    <div>
      <Card>
        <Alert message="手动清空服务端UDC缓存，通常用于数据库UDC变更之后" type="warning" showIcon
               style={{ width: 500, display: 'inline', marginRight: 20 }}/>
        <Popconfirm title={'确定要清空UDC缓存么?'} placement="bottomLeft" onConfirm={handleClearCache}>
          <Button
            type="danger"
            loading={loading.effects[`${domain}/clearCache`]}
          >清空UDC缓存</Button>
        </Popconfirm>
      </Card>
      <Card>
        <DataTable {...tableProps} />
      </Card>
      {modalVisible && <Modal {...modalProps} />}
    </div>
  );
};

Udc.propTypes = {
  udcs: PropTypes.object,
  udcValues: PropTypes.object,
  loading: PropTypes.object,
  dispatch: PropTypes.func,
};

export default connect(({ udcs, udcItems, loading }) => ({ udcs, udcItems, loading }))(Udc);
