/**
 * 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 } 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';

const FormItem = Form.Item;

/* 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_Place" layout="inline" form={form} onFinish={onFinish}>
      <FormItem label="公司名称" name="name">
        <Input placeholder="请输入公司名称" style={{ width: '250px' }} />
      </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 {
    loading,
    handleGetList,
    dataPlace: { 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: 'name',
      align: 'center',
      width: 200,
      render: (t, r) => {
        return t ? (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={1}>{t}</StyledEllipsisWrap>
          </Tooltip>
        ) : (
          '-'
        );
      },
    },
    {
      title: '公司地址',
      dataIndex: 'address',
      align: 'center',
      width: 220,
      render: (t, r) => {
        return t ? (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={2}>{t}</StyledEllipsisWrap>
          </Tooltip>
        ) : (
          '-'
        );
      },
    },
    {
      title: '通讯地址',
      dataIndex: 'postalAddress',
      align: 'center',
      width: 220,
      render: (t, r) => {
        return t ? (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={2}>{t}</StyledEllipsisWrap>
          </Tooltip>
        ) : (
          '-'
        );
      },
    },
    {
      title: '所属地区',
      dataIndex: 'region',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return t ? (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={2}>{t}</StyledEllipsisWrap>
          </Tooltip>
        ) : (
          '-'
        );
      },
    },
    {
      title: '负责人',
      dataIndex: 'person',
      align: 'center',
      width: 150,
    },
    {
      title: '身份证号码',
      dataIndex: 'personCode',
      align: 'center',
      width: 220,
    },
    {
      title: '负责人电话',
      dataIndex: 'personTel',
      align: 'center',
      width: 150,
    },
    {
      title: '联系人',
      dataIndex: 'contacts',
      align: 'center',
      width: 150,
    },
    {
      title: '联系人电话',
      dataIndex: 'contactsTel',
      align: 'center',
      width: 180,
    },
    {
      title: '主营范围',
      dataIndex: 'mainScope',
      align: 'center',
      width: 180,
      render: (t, r) => {
        return t ? (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={2}>{t}</StyledEllipsisWrap>
          </Tooltip>
        ) : (
          '-'
        );
      },
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      align: 'center',
      width: 200,
      render: (t, r) => {
        return t ? (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={2}>{t}</StyledEllipsisWrap>
          </Tooltip>
        ) : (
          '-'
        );
      },
    },
    // {
    //   title: '操作',
    //   align: 'center',
    //   fixed: 'right',
    //   width: 80,
    //   render(t, r) {
    //     return (
    //       <Tooltip placement="top" title="查看详情">
    //         <ZoomInOutlined style={{ cursor: 'pointer', fontSize: 18 }} onClick={() => {}} />
    //       </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 - 400px)` }}
    />
  );
};

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

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

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

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

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

  /* 上传组件配置 */
  const uploadProps = {
    customRequest: file => {
      const formData = new FormData();
      formData.append('file', file.file);
      dispatch({ type: 'Place/importPlace', 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.exportPlaceTemplate, {});
          }}
        >
          模版下载
        </Button>
      </StyledPageHeader>
      <StyledPageContent>
        <Card bordered={false}>
          <SearchForm
            dataSearch={dataSearch}
            handleReset={handleReset}
            handleFinish={handleFinish}
          />
          <div className="mt-16">
            <DataTable loading={loading} handleGetList={handleGetList} dataPlace={dataPlace} />
          </div>
        </Card>
      </StyledPageContent>
    </StyledPageContainer>
  );
};

export default connect(({ Place, loading }) => ({
  ...Place,
  loading: loading.effects['Place/getPlaceList'],
  loadingUpload: loading.effects['Place/importPlace'],
}))(Place);