import React from 'react';
import { Col, Row, Button } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import EditTableCell from '@src/components/EditTableCell';
import TableLayout from '@src/layouts/TableLayout';
import { asyncSMessage } from '@src/services/AsyncTools';
import { System } from '../../../stores/system';

const locations = [
  { page: '4-1/3模考-千行CAT', location: '显示第一次模考成绩', value: '4-1/3-show' },
  { page: '4-1-1 做题结束-练习报告', location: '建议用时', value: '4-1-1-suggest' },
  { page: '4-2-2模考-数学机经-选择习题册', location: '已更新至邮箱', value: '4-2-2-update' },
  { page: '4-2-2模考-数学机经-选择习题册', location: '下载弹框', value: '4-2-2-download' },
  { page: '4-2-2模考-数学机经-选择习题册', location: '邮箱处', value: '4-2-2-email' },
  { page: '4-4 模考-休息', location: 'Optional Break', value: '4-4-optional' },
  { page: '4-2-3 模考-数学机经-购买', location: '购买方式', value: '4-2-3-buy' },
  { page: '4-2-3 模考-数学机经-购买', location: '填写邮箱', value: '4-2-3-email' },
  { page: '5-1/3主页/弹框', location: '备注6', value: '5-1/3-note' },
];

export default class extends Page {
  constructor(props) {
    super(props);
    this.columns = [{
      title: '页面',
      dataIndex: 'page',
    }, {
      title: '位置',
      dataIndex: 'location',
    }, {
      title: '内容',
      dataIndex: 'value',
      render: (text, record) => {
        const { data } = this.state;
        return <EditTableCell value={data[record.value]} onChange={(v) => {
          this.changeData(record.value, v);
        }} />;
      },
    }];
  }

  initData() {
    System.getTips().then(result => {
      this.setState({ load: true, data: result });
    });
  }

  changeData(key, value) {
    const { data } = this.state;
    data[key] = value;
    this.setState({ data });
  }

  submit() {
    const { data } = this.state;
    System.setTips(data)
      .then(() => {
        this.setState(data);
        asyncSMessage('保存成功');
      });
  }

  renderView() {
    return <Block flex >
      <TableLayout
        columns={this.tableSort(this.columns)}
        list={locations}
        pagination={false}
        loading={this.props.core.loading}
      />
      <Row type="flex" justify="center">
        <Col>
          <Button type="primary" onClick={() => {
            this.submit();
          }}>保存</Button>
        </Col>
      </Row>
    </Block>;
  }
}