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';
import { User } from '../../../stores/user';

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


export default class extends Page {
  constructor(props) {
    props.size = 15;
    super(props);
    this.columns = [
      {
        title: '消息',
        key: 'title',

        render: (text, row) => {
          return <div onClick={() => {
            this.realMessage(row);
          }}>
            {!row.isRead ? <span className='dot'>{text}</span> : text}
            {row.content && <div className='ws-pl'>{row.content}{row.link && <a className='m-l-5' href={row.link} target="_blank">{row.linkTitle || '查看详情'}</a>}{row.linkSecond && <a className='m-l-5' href={row.linkSecond} target="_blank">{row.linkSecondTitle || '查看详情'}</a>}</div>}
          </div>;
        },
      },
      {
        title: '类型',
        key: 'type',
        width: 120,
      },
      {
        title: '发送时间',
        key: 'date',
        width: 180,
        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>;
        },
      }];
  }

  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-DD HH: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('操作成功');
      User.refreshToken();
      this.refresh();
    });
  }

  realMessage(record) {
    My.readMessage(record.id).then(() => {
      this.refresh();
    });
  }

  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,
              placeholder: '消息类型',
              key: 'messageType',
            },
          ]}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
        />
        <UserTable
          size="small"
          columns={this.columns}
          data={list}
          current={page}
          total={total}
          pageSize={this.state.search.size}
          onChange={(value) => {
            this.onChangePage(value);
          }}
        />
      </div>
    );
  }
}