'use strict';

import './index.less';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';
import axios from 'axios';
import {
  Feedback,
  Table,
  Pagination,
  DatePicker,
  Dialog,
  moment,
  Select,
} from '@icedesign/base';
import { getNavLinks, apiList } from '../utils';

const { RangePicker } = DatePicker;
const startTime = new Date(Date.now() - 30 * 24 * 3600 * 1000);
const endTime = new Date();

// import { typeComponents } from '../../component-data';

// const components = typeComponents.ice.map((item) => {
//   return `Ice${item.name}`;
// });

@withRouter
export default class LogList extends Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  };

  state = {
    data: [],
    startTime: startTime.getTime(),
    endTime: endTime.getTime(),
    pagination: {
      current: 1,
      pageSize: 10,
      total: 0,
    },
    type: 'error',
  };

  constructor(props) {
    super(props);
    this.component = this.props.params.component || ''; // components[0];
  }

  componentDidMount() {
    this.fetchData({});
  }

  fetchData = ({ pageSize = 10, pageNo = 1 }) => {
    const { startTime, endTime, type } = this.state;
    return axios
      .get(apiList.getLogDetail, {
        params: {
          startTime,
          endTime,
          pageNo,
          pageSize,
          type,
          name: this.component.toLowerCase(),
        },
      })
      .then((response) => {
        const { data } = response;

        this.setState({
          pagination: data.pagination || {},
          data: data.list || [],
        });
      })
      .catch((err) => {
        console.warn(err);
        Feedback.toast.error('请求失败');
      });
  };

  onDateChange = (time) => {
    this.setState(
      {
        startTime: time[0].getTime(),
        endTime: time[1].getTime(),
      },
      () => {
        this.fetchData({});
      }
    );
  };

  onPageChange = (value) => {
    this.fetchData({ pageNo: value });
  };

  renderTime = (item, idx) => {
    const d = new Date(item);
    return (
      <span>
        {moment(d)
          .locale('zh-cn')
          .format('YYYY-MM-DD HH:mm:ss')}
      </span>
    );
  };

  renderBrowser = (_, index) => {
    const item = this.state.data[index];
    return (
      <span>
        {`${item.browser_family}.${item.browser_major}.${item.browser_minor}.${
          item.broswer_patch
        }`}
      </span>
    );
  };

  renderOriginUrl = (item, idx) => {
    return (
      <a target="_blank" href={item}>
        {item}
      </a>
    );
  };

  renderOS = (_, index) => {
    const item = this.state.data[index];

    return (
      <span>{`${item.os_family} ${item.os_major}.${item.os_minor}.${
        item.os_patch
      }`}</span>
    );
  };

  onOptionChange = (type) => {
    this.setState(
      {
        type,
      },
      () => {
        this.fetchData({});
      }
    );
  };

  onComponentChange = (value) => {
    this.props.router.push(`/collect/log/${value}`);
  };

  render() {
    const { pagination = {}, data = [], type, components } = this.state;

    return (
      <div>
        <div style={{ overflow: 'hidden' }}>
          <span style={{ float: 'left', margin: '5px 10px' }}>组件选择：</span>
          <span style={{ float: 'left', marginRight: '10px' }}>
            <Select value={this.component} onChange={this.onComponentChange}>
              {components.map((item, index) => {
                return (
                  <Select.Option key={index} value={item}>
                    {item}
                  </Select.Option>
                );
              })}
            </Select>
          </span>
          <span style={{ float: 'left' }}>
            选择时间：{' '}
            <RangePicker
              defaultValue={[startTime, endTime]}
              onChange={this.onDateChange}
            />
          </span>
          <span style={{ float: 'left', margin: '5px 10px' }}>日志类型：</span>
          <span style={{ float: 'left' }}>
            <Select
              defaultValue={type}
              value={type}
              onChange={this.onOptionChange}
            >
              <Select.Option value="error">error</Select.Option>
              <Select.Option value="data">data</Select.Option>
              <Select.Option value="pv">pv</Select.Option>
              <Select.Option value="others">others</Select.Option>
            </Select>
          </span>
        </div>
        <div style={{ marginTop: '20px' }}>
          <Table dataSource={data}>
            <Table.Column
              title="时间"
              dataIndex="time"
              cell={this.renderTime}
            />
            <Table.Column title="浏览器" cell={this.renderBrowser} />
            <Table.Column title="操作系统" cell={this.renderOS} />
            <Table.Column title="日志信息" dataIndex="msg" />
            <Table.Column
              title="发生页面"
              dataIndex="origin_url"
              cell={this.renderOriginUrl}
            />
          </Table>
        </div>
        <div style={{ float: 'right', margin: '20px' }}>
          <Pagination {...pagination} onChange={this.onPageChange} />
        </div>
      </div>
    );
  }
}