//空间监测

import React, { useEffect } from 'react';
import { connect } from 'dva';
import { Table, Form, Input, Button, AutoComplete } from 'antd';
import styles from './LimitedSpace.less';

function Data(props) {
  const { dispatch, currentUser, loading, form, dataConfig, data, pagination, spaceList } = props;
  const { projectId, spaceId } = props.match.params;
  const { getFieldDecorator, getFieldsValue } = form;
  let timer = null;

  const onSearch = () => {
    const { name } = getFieldsValue();
    dispatch({
      type: 'limitedSpace/queryData',
      payload: { project_id: projectId, name: name },
    });
  };

  useEffect(() => {
    dispatch({
      type: 'limitedSpace/querySpace',
      payload: { project_id: projectId },
    });

    dispatch({
      type: 'limitedSpace/queryDataConfig',
      payload: { project_id: projectId },
    });

    dispatch({
      type: 'limitedSpace/queryData',
      payload: { project_id: projectId },
    });

    timer = setInterval(() => {
      onSearch();
    }, 20 * 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  const getColorAndStrByStatus = status => {
    let str = '安全';
    let color = 'white';
    switch (status) {
      case 0:
        str = '-';
        color = 'white';
        break;
      case 1:
        str = '安全';
        color = 'white';
        break;
      case 2:
        str = '预警';
        color = 'yellow';
        break;
      case 3:
        str = '报警';
        color = 'red';
        break;
    }
    return { str, color };
  };
  const columns = [
    // { title: '序号', dataIndex: 'spaceId' },
    { title: '空间名称', dataIndex: 'name' },
    {
      title: '风险提示',
      render: item => {
        //风险提示按改行中最高风险状态显示
        const maxStatus = Math.max(...Object.values(item.statusObj));
        const { str, color } = getColorAndStrByStatus(maxStatus);
        return <div style={{ color: color }}>{str}</div>;
      },
    },
    ...dataConfig.map(config => ({
      title: (
        <div>
          {config.item_alias}
          <br />({config.item_unit})
        </div>
      ),
      // dataIndex: item.item_name,
      render: item => {
        const status = item.statusObj[config.item_name];
        const { color } = getColorAndStrByStatus(status);
        return <div style={{ color: color }}>{item[config.item_name]}</div>;
      },
    })),
  ];

  const nameFilter = (value, option) => {
    return option.key.indexOf(value) != -1;
  };

  return (
    <div className={styles.page}>
      <Form
        layout="inline"
        labelAlign="left"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 15 }}
        style={{ marginBottom: 20 }}
      >
        <Form.Item className={styles.searchItem} label="空间名称:">
          {getFieldDecorator('name')(
            <AutoComplete
              style={{ display: 'block' }}
              dataSource={spaceList.map(item => item.name)}
              filterOption={(value, option) => nameFilter(value, option)}
              children={<Input style={{ borderRadius: '8px' }} />}
            />
          )}
        </Form.Item>
        <Form.Item className="btn-item">
          <Button onClick={() => onSearch()} type="primary">
            搜索
          </Button>
        </Form.Item>
      </Form>
      <Table
        // scroll={{ x: 1500, y: 'false' }}
        columns={columns}
        rowKey="id"
        loading={loading}
        // dataSource={temp}
        dataSource={data}
        pagination={pagination}
      />
    </div>
  );
}

export default connect(({ limitedSpace, user, loading }) => ({
  currentUser: user.currentUser,
  loading: loading.models.limitedSpace,
  dataConfig: limitedSpace.dataConfig,
  data: limitedSpace.spaceData.list,
  pagination: limitedSpace.spaceData.pagination,
  spaceList: limitedSpace.space.list,
}))(Form.create()(Data));
