import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { asyncSMessage } from '@src/services/AsyncTools';
import UserLayout from '../../../layouts/User';
import menu from '../index';
import UserTable from '../../../components/UserTable';
import UserAction from '../../../components/UserAction';
import Tabs from '../../../components/Tabs';
import { My } from '../../../stores/my';
import { MessageType } from '../../../../Constant';
import { getMap, formatDate } from '../../../../../src/services/Tools';

const MessageTypeMap = getMap(MessageType, 'value', 'label');

const columns = [
  {
    title: '消息',
    key: 'title',
    render: (text, row) => {
      return <div>
        {row.isRead ? <span className='dot'>{text}</span> : text}
        {row.content && <div className=''>{row.content}{row.link && <a className='m-l-5' href={row.link} target="_blank">查看详情</a>}</div>}
      </div>;
    },
  },
  { title: '类型', key: 'type' },
  {
    title: '发送时间',
    key: 'date',
    render: (text) => {
      return <div className="sub">
        <div className="t-2 t-s-12">{text.split(' ')[0]}</div>
        <div className="t-6 t-s-12">{text.split(' ')[1]}</div>
      </div>;
    },
  }];

export default class extends Page {
  constructor(props) {
    props.size = 15;
    super(props);
  }

  initState() {
    return {
      tab: '',
      filterMap: {},
    };
  }

  initData() {
    const data = Object.assign(this.state, this.state.search);
    if (data.order) {
      data.sortMap = { [data.order]: data.direction };
    }
    data.filterMap = this.state.search;
    data.messageTypeSelect = MessageType.map(row => {
      row.title = row.label;
      row.key = row.value;
      return row;
    });
    data.messageTypeSelect.unshift({
      title: '消息类型',
      key: '',
    });
    this.setState(data);
    My.message(Object.assign({ read: data.tab === 'unread' ? 0 : null }, this.state.search)).then(result => {
      result.list = result.list.map(row => {
        row.type = MessageTypeMap[row.type];
        row.date = formatDate(row.createTime, 'YYYY-MM-DDHH:mm:ss');

        return row;
      });
      result.page = data.page;
      this.setState(result);
    });
  }

  onFilter(value) {
    this.search(value);
  }

  onTabChange(tab) {
    const data = { tab };
    this.refreshQuery(data);
  }

  onChangePage(page) {
    this.search({ page });
  }

  readAllMessage() {
    My.readAllMessage().then(() => {
      asyncSMessage('操作成功');
    });
  }

  renderView() {
    const { config } = this.props;
    return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
  }

  renderTable() {
    const { tab, list, messageTypeSelect, filterMap, page, total } = this.state;
    return (
      <div className="table-layout">
        <UserAction
          left={
            <Tabs
              type="tag"
              theme="white"
              size="small"
              space={5}
              width={54}
              active={tab}
              tabs={[{ key: '', title: '全部' }, { key: 'unread', title: '未读' }]}
              onChange={key => this.onTabChange(key)}
            />
          }
          right={<span style={{ cursor: 'pointer' }} onClick={() => {
            this.readAllMessage();
          }}>全部已读</span>}
          selectList={[
            {
              select: messageTypeSelect,
              key: 'messageType',
            },
          ]}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
        />
        <UserTable
          size="small"
          columns={columns}
          data={list}
          current={page}
          total={total}
          pageSize={this.state.search.size}
          onChange={(value) => {
            this.onChangePage(value);
          }}
        />
      </div>
    );
  }
}