/**
 * Author: Charles
 * Date: 2022.9.13
 * Description: [行政执法列表]
 */
import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Card, Form, Input, Button, Table, Tooltip, Upload, message, Select } from 'antd';
import { paginations } from '@/constants';
import {
  StyledPageContainer,
  StyledPageContent,
  StyledEllipsisWrap,
  StyledPageHeader,
} from '@/components/style';
import { ZoomInOutlined, UploadOutlined } from '@ant-design/icons';
import * as services from '@/services/data';
import { ExportFile } from '@/utils/utils';
import { mapCause, enumYear } from '@/constants';
import ModalEnforcement from './Modal/ModalEnforcement';

const FormItem = Form.Item;
const Option = Select.Option;

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

  useEffect(() => {
    form.setFieldsValue({
      ...dataSearch,
    });
  }, [dataSearch]);

  /* 点击搜索 */

  const onFinish = values => {
    handleFinish(values);
  };

  /* 点击重置 */
  const onReset = () => {
    handleReset();
  };

  return (
    <Form name="Form_Enforcement" layout="inline" form={form} onFinish={onFinish}>
      <FormItem label="当事人或法人姓名" name="placeName">
        <Input placeholder="请输入当事人或法人姓名" style={{ width: '220px' }} />
      </FormItem>
      <FormItem label="办案单位" name="company">
        <Input placeholder="请输入办案单位" style={{ width: '220px' }} />
      </FormItem>
      <FormItem label="案件类型" name="type">
        <Select placeholder="请选择案件类型" style={{ width: '150px' }}>
          <Option value="ALL">全部</Option>
          {Object.values(mapCause).map(item => {
            return (
              <Option key={item.value} value={item.value}>
                {item.label}
              </Option>
            );
          })}
        </Select>
      </FormItem>
      <FormItem label="处罚年份" name="yearDate">
        <Select placeholder="请选择处罚年份" style={{ width: '150px' }} showSearch>
          <Option value="ALL">全部</Option>
          {enumYear().map(item => {
            return (
              <Option key={item.value} value={item.value}>
                {item.label}
              </Option>
            );
          })}
        </Select>
      </FormItem>
      <FormItem>
        <Button type="primary" htmlType="submit" className="mr-15">
          搜索
        </Button>
        <Button className="mr-15" htmlType="button" onClick={onReset}>
          重置
        </Button>
      </FormItem>
    </Form>
  );
};

/* DataTable */
const DataTable = props => {
  const {
    dispatch,
    loading,
    handleGetList,
    dataEnforcement: { records = [], current, size, total },
  } = props;

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

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      fixed: 'left',
      width: 80,
      render(t, r, idx) {
        return (current - 1) * size + idx + 1;
      },
    },
    {
      title: '统一编号',
      dataIndex: 'num',
      align: 'center',
      width: 200,
    },
    {
      title: '案件类型',
      dataIndex: 'type',
      align: 'center',
      width: 120,
      render: (t, r) => {
        return (mapCause[t] && mapCause[t].label) || '-';
      },
    },
    {
      title: '当事人',
      dataIndex: 'placeUserName',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return t ? (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={1}>{t}</StyledEllipsisWrap>
          </Tooltip>
        ) : (
          '-'
        );
      },
    },
    {
      title: '案由',
      dataIndex: 'cause',
      align: 'center',
      width: 220,
      render: (t, r) => {
        return t ? (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={2}>{t}</StyledEllipsisWrap>
          </Tooltip>
        ) : (
          '-'
        );
      },
    },
    {
      title: '办案单位',
      dataIndex: 'company',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return t ? (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={1}>{t}</StyledEllipsisWrap>
          </Tooltip>
        ) : (
          '-'
        );
      },
    },
    {
      title: '立案时间',
      dataIndex: 'filingDate',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return t || '-';
      },
    },
    {
      title: '处罚时间',
      dataIndex: 'punishDate',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return t || '-';
      },
    },
    {
      title: '结案时间',
      dataIndex: 'closeDate',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return t || '-';
      },
    },
    {
      title: '操作',
      align: 'center',
      fixed: 'right',
      width: 80,
      render(t, r) {
        return (
          <Tooltip placement="top" title="查看详情">
            <ZoomInOutlined
              style={{ cursor: 'pointer', fontSize: 18 }}
              onClick={() => {
                dispatch({
                  type: 'Enforcement/changeState',
                  payload: {
                    dataModal: {
                      modalType: 'Enforce_Ment_Modal',
                      modalShow: true,
                      modalData: r,
                    },
                  },
                });
              }}
            />
          </Tooltip>
        );
      },
    },
  ];
  const pagination = {
    ...paginations,
    total: total,
    pageSize: size,
    current,
    showSizeChanger: total > 10,
    onChange: (current, pageSize) => {
      handlePageChange(current, pageSize);
    },
    onShowSizeChange: (current, pageSize) => {
      handlePageChange(1, pageSize);
    },
    showTotal(total) {
      return `总共 ${total} 条数据`;
    },
  };
  return (
    <Table
      rowKey="id"
      loading={loading}
      dataSource={records}
      columns={columns}
      pagination={pagination}
      scroll={{ x: 2000, y: `calc(100vh - 448px)` }}
    />
  );
};

/* Main */
const Enforcement = props => {
  const {
    dispatch,
    loading,
    loadingUpload,
    dataSearch,
    dataEnforcement,
    dataEnforcement: { size },
  } = props;

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

  /* 列表 */
  const handleGetList = (current, size) => {
    dispatch({
      type: 'Enforcement/getEnforcementList',
      payload: {
        current: current || 1,
        size: size || 10,
      },
    });
  };

  /* 点击搜索 */
  const handleFinish = values => {
    dispatch({
      type: 'Enforcement/changeState',
      payload: {
        dataSearch: {
          ...values,
        },
      },
    });
    handleGetList(0, size);
  };

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

  /* 上传组件配置 */
  const uploadProps = {
    customRequest: file => {
      const formData = new FormData();
      formData.append('file', file.file);
      dispatch({ type: 'Enforcement/importEventIllegal', payload: formData });
    },
    beforeUpload: file => {
      const isLt50M = file.size / 1024 / 1024 < 50;
      if (!isLt50M) {
        message.error('文件大小需小于50M');
        return false;
      }
      return isLt50M;
    },
  };

  return (
    <StyledPageContainer>
      <StyledPageHeader border={true}>
        <Upload {...uploadProps}>
          <Button loading={loadingUpload} type="primary" icon={<UploadOutlined />}>
            数据导入
          </Button>
        </Upload>
        <Button
          type="primary"
          onClick={() => {
            ExportFile('行政执法案件模版', services.exportEventIllegalTemplate, {});
          }}
        >
          模版下载
        </Button>
      </StyledPageHeader>
      <StyledPageContent>
        <Card bordered={false}>
          <SearchForm
            dataSearch={dataSearch}
            handleReset={handleReset}
            handleFinish={handleFinish}
          />
          <div className="mt-16">
            <DataTable
              loading={loading}
              dispatch={dispatch}
              handleGetList={handleGetList}
              dataEnforcement={dataEnforcement}
            />
          </div>
        </Card>
      </StyledPageContent>
      <ModalEnforcement />
    </StyledPageContainer>
  );
};

export default connect(({ Enforcement, loading }) => ({
  ...Enforcement,
  loading: loading.effects['Enforcement/getEnforcementList'],
  loadingUpload: loading.effects['Enforcement/importEventIllegal'],
}))(Enforcement);