/**
 * Author: llw
 * Date: 2020.7.16
 * Description: [应用列表]
 */
import React, { useEffect } from 'react';
import { connect, Link } from 'umi';
import { Card, Form, DatePicker, Input, Button, Table, Divider, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { paginations } from '@/constants';
import moment from 'moment';

const { RangePicker } = DatePicker;
const FormItem = Form.Item;

/* SearchForm */
const SearchForm = props => {
  const [form] = Form.useForm();
  const { 
    dataSearch, 
    handleReset, 
    handleFinish, 
    dataSearch: { createTimeBegin, createTimeEnd }
  } = props;

  useEffect(() => {
    form.setFieldsValue({
			...dataSearch,
			createTime: [createTimeBegin ? moment(createTimeBegin) : undefined, createTimeEnd ? moment(createTimeEnd) : undefined]
		});
  }, [dataSearch]);

  /* 点击搜索 */	
	const onFinish = (values) => {
		handleFinish(values);
  };
  
  /* 点击重置 */
  const onReset = () => {
		handleReset();
  };
  
  return (
    <Form
			name="Form_Application"
			layout="inline"
			form={form}
			onFinish={onFinish}
    >
      <FormItem label="应用名称" name="name">
        <Input placeholder="请输入应用名称" style={{width: "220px"}} />
			</FormItem>
			<FormItem label="创建时间" name="createTime">
				<RangePicker allowClear={false} />
			</FormItem>
      <FormItem>
        <Button type="primary" htmlType="submit" className="mr-15">搜索</Button>
				<Button className="mr-15" htmlType="button" onClick={onReset}>重置</Button>
        <Link to="/appliction/info"><Button>创建应用</Button></Link>
      </FormItem>
    </Form>
  )
};

/* DataTable */
const DataTable = props => {
  const { 
    loading, 
    handleDel,
    handleGetList,
    dataApplication: { data = [], page, size, totalItem } 
  } = props;

  /* 点击分页 */
  const handlePageChange = (page, size) => {
    handleGetList(page, size);
  };

  const columns = [
    {
      title: '应用名称',
      dataIndex: 'name',
      align: 'center'
    },
    {
      title: '应用标识码',
      dataIndex: 'code',
      align: 'center',
      render(t, r) {
        return t || '--'
      }
    },
    {
      title: '应用链接地址',
      dataIndex: 'url',
      align: 'center',
      render(t, r) {
        return t || '--'
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'center',
      render(t, r) {
        return t ? moment(t).format("YYYY-MM-DD HH:mm:ss") : '--'
      }
    },
    {
      title: '操作',
      align: 'center',
      render(t, r) {
        return (
          <>
            <Link to={`/appliction/info?id=${r.id}`}>编辑</Link>
            <Divider type="vertical" />
            <a onClick={() => handleDel(r)}>删除</a>
          </>
        )
      }
    }
  ];
  const pagination = {
    ...paginations,
    total: totalItem,
    pageSize: size,
    current: page,
    showSizeChanger: totalItem > 20,
    onChange: (page, pageSize) => {
      handlePageChange(page, pageSize);
    },
    onShowSizeChange: (page, pageSize) => {
      handlePageChange(1, pageSize);
    },
    showTotal(total) {
      return `总共 ${total} 条数据`;
    },
  };
  return (
    <Table 
      rowKey="id"
      loading={loading}
      dataSource={data} 
      columns={columns} 
      pagination={pagination}
    />
  )
};

/* Main */
const Application = props => {
  const { dispatch, loading, dataSearch, dataApplication, dataApplication: { size } } = props;

  useEffect(() => {
    handleGetList(1, 10);
  }, [])

  /* 应用列表 */
  const handleGetList = (page, size) => {
    dispatch({type: 'Application/getApplicationList', payload: {
      page: page || 1,
      size: size || 10
    }});
  };

  /* 点击搜索 */
  const handleFinish = (values) => {
    const { createTime, name } = values;
    dispatch({type: 'Application/changeState', payload: {
      dataSearch: {
        name,
        createTimeBegin: createTime[0] ? createTime[0].startOf('day').valueOf() : undefined,
        createTimeEnd: createTime[1] ? createTime[1].endOf('day').valueOf() : undefined,
      }
    }});
    handleGetList(0, size);
  };

  /* 点击重置 */
  const handleReset = () => {
    dispatch({type: 'Application/resetSearch'});
    handleGetList(0, 10);
  };

  /* 点击删除 */
  const handleDel = ({ id }) => {
    Modal.confirm({
      title: '确定删除该应用吗?',
      icon: <ExclamationCircleOutlined />,
      okText: '确定',
      cancelText: '取消',
      onOk() {
        dispatch({type: 'Application/delApplication', payload: {id}});
      },
    });
  };

  return (
    <Card bordered={false}>
      <SearchForm 
        dataSearch={dataSearch}
        handleReset={handleReset}
        handleFinish={handleFinish}
      />
      <div className="mt-24">
        <DataTable 
          loading={loading}
          handleDel={handleDel}
          handleGetList={handleGetList}
          dataApplication={dataApplication}
        />
      </div>
    </Card>
  )
};

export default connect(({ Application, loading }) => ({
  ...Application,
  loading: loading.effects["Application/getApplicationList"]
}))(Application)