/**
 * Author: Charles
 * Date: 2022.9.13
 * Description: [投诉举报列表]
 */
import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Card, Form, Input, Button, Table, Tooltip, DatePicker } from 'antd';
import { paginations } from '@/constants';
import { StyledPageContainer, StyledPageContent, StyledEllipsisWrap } from '@/components/style';
import { ZoomInOutlined } from '@ant-design/icons';
import moment from 'moment';

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

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

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

  /* 点击搜索 */

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

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

  return (
    <Form name="Form_Complaint" layout="inline" form={form} onFinish={onFinish}>
      <FormItem label="公司名称" name="keyWord">
        <Input placeholder="请输入公司名称" style={{ width: '250px' }} />
      </FormItem>
      <FormItem label="投诉举报时间" name="createTime">
        <RangePicker allowClear={false} style={{ width: '300px' }} />
      </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,
    dataComplaint: { 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 - 350px)` }}
    />
  );
};

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

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

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

  /* 点击搜索 */
  const handleFinish = values => {
    const { keyWord, createTime } = values;
    dispatch({
      type: 'Complaint/changeState',
      payload: {
        dataSearch: {
          keyWord,
          startDate: createTime[0]
            ? moment(createTime[0].startOf('day').valueOf()).format('YYYY-MM-DD HH:mm:ss')
            : undefined,
          endDate: createTime[1]
            ? moment(createTime[1].endOf('day').valueOf()).format('YYYY-MM-DD HH:mm:ss')
            : undefined,
        },
      },
    });
    handleGetList(0, size);
  };

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

  return (
    <StyledPageContainer>
      <StyledPageContent>
        <Card bordered={false}>
          <SearchForm
            dataSearch={dataSearch}
            handleReset={handleReset}
            handleFinish={handleFinish}
          />
          <div className="mt-16">
            <DataTable
              loading={loading}
              handleGetList={handleGetList}
              dataComplaint={dataComplaint}
            />
          </div>
        </Card>
      </StyledPageContent>
    </StyledPageContainer>
  );
};

export default connect(({ Complaint, loading }) => ({
  ...Complaint,
  loading: loading.effects['Complaint/getComplaintList'],
}))(Complaint);