import React from 'react';
import { Tabs, Button, Icon } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import TreeLayout from '@src/layouts/TreeLayout';
import ActionLayout from '@src/layouts/ActionLayout';
import { formatTreeData } from '@src/services/Tools';
import { asyncDelConfirm, asyncForm, asyncSMessage } from '@src/services/AsyncTools';
// import { System } from '../../../stores/system';
import { Examination } from '../../../stores/examination';
import { Exercise } from '../../../stores/exercise';

export default class extends Page {
  constructor(props) {
    super(props);
    this.exerciseActionList = [{
      key: 'addChild',
      name: '增加子节点',
    }, {
      key: 'addBrother',
      name: '增加兄弟节点',
      selectNum: 1,
    }, {
      key: 'edit',
      name: '编辑',
      selectNum: 1,
    }, {
      key: 'delete',
      name: '批量删除',
      type: 'danger',
      needCheck: 1,
    }];
    this.exerciseItemList = [{
      key: 'id',
      type: 'hidden',
    }, {
      key: 'parentId',
      type: 'tree',
      name: '父节点',
      tree: [],
      fieldNames: { label: 'title', value: 'value', children: 'children' },
      notFoundContent: null,
      onChange: (value) => {
        console.log(value);
      },
    }, {
      key: 'titleZh',
      name: '中文名称',
      type: 'input',
      placeholder: '请输入中文名称',
      required: true,
    }, {
      key: 'titleEn',
      name: '英文名称',
      type: 'input',
      placeholder: '请输入英文名称',
      required: true,
    }, {
      key: 'description',
      name: '描述',
      type: 'textarea',
      placeholder: '请输入描述',
      required: true,
    }];
    this.examinationActionList = [{
      key: 'addChild',
      name: '增加子节点',
    }, {
      key: 'addBrother',
      name: '增加兄弟节点',
      selectNum: 1,
    }, {
      key: 'edit',
      name: '编辑',
      selectNum: 1,
    }, {
      key: 'delete',
      name: '批量删除',
      type: 'danger',
      needCheck: 1,
    }];
    this.examinationItemList = [{
      key: 'id',
      type: 'hidden',
    }, {
      key: 'parentId',
      type: 'tree',
      name: '父节点',
      tree: [],
      fieldNames: { label: 'title', value: 'value', children: 'children' },
      notFoundContent: null,
      onChange: (value) => {
        console.log(value);
      },
    }, {
      key: 'titleZh',
      name: '中文名称',
      type: 'input',
      placeholder: '请输入中文名称',
      required: true,
    }, {
      key: 'titleEn',
      name: '英文名称',
      type: 'input',
      placeholder: '请输入英文名称',
      required: true,
    }, {
      key: 'description',
      name: '描述',
      type: 'textarea',
      placeholder: '请输入描述',
      required: true,
    }];
    this.state.tab = 'exercise';
  }

  initData() {
    this.refresh();
  }

  refresh() {
    const { tab } = this.state;
    if (tab === 'exercise') {
      return this.refreshExercise();
    }
    return this.refreshExamination();
  }

  refreshExercise() {
    Exercise.allStruct().then(result => {
      const list = result.map(row => { row.title = `${row.titleZh}/${row.titleEn}`; return row; });
      this.exerciseItemList[1].tree = formatTreeData([{ title: '根节点', id: 0 }].concat(list), 'id', 'title', 'parentId');
      this.setState({
        exerciseList: list,
        exerciseStruct: formatTreeData(list.map(row => {
          if (row.level < 4) return row;
          row = Object.assign({}, row);
          row.title = <div className='node'>{row.title}<Button className='after-node' size='small' type={row.questionStatus > 0 ? 'primary' : 'ghost'} onClick={(e) => {
            e.preventDefault();
            row.questionStatus = row.questionStatus > 0 ? 0 : 1;
            Exercise.editStruct(row).then(() => {
              this.refresh();
            });
          }}>{row.questionStatus > 0 ? [<Icon type='pause' />, <span>提问中</span>] : [<Icon type="caret-right" />, <span>提问关闭</span>]}</Button></div>;
          return row;
        }), 'id', 'title', 'parentId'),
      });
    });
  }

  refreshExamination() {
    Examination.allStruct().then(result => {
      const list = result.map(row => { row.title = `${row.titleZh}/${row.titleEn}`; return row; });
      this.examinationItemList[1].tree = formatTreeData([{ title: '根节点', id: 0 }].concat(list), 'id', 'title', 'parentId');
      this.setState({
        examinationList: list,
        examinationStruct: formatTreeData(list.map(row => {
          if (row.level !== 2) return row;
          row = Object.assign({}, row);
          row.title = <div className='node'>{row.title}<Button className='after-node' size='small' type={row.questionStatus > 0 ? 'primary' : 'ghost'} onClick={(e) => {
            e.preventDefault();
            row.payStatus = row.payStatus > 0 ? 0 : 1;
            Examination.editStruct(row).then(() => {
              this.refresh();
            });
          }}>{row.payStatus > 0 ? [<Icon type="pay-circle" />, <span>付费</span>] : [<Icon type="eye" />, <span>免费</span>]}</Button></div>;
          return row;
        }), 'id', 'title', 'parentId'),
      });
    });
  }

  addChildAction() {
    const { tab, exerciseList, examinationList, selectedKeys } = this.state;
    let itemList;
    let node = 0;
    if (tab === 'exercise') {
      itemList = this.exerciseItemList;
      if (selectedKeys.length > 0) {
        node = exerciseList.filter(row => row.id === Number(selectedKeys[0]))[0].id;
      }
    } else {
      itemList = this.examinationItemList;
      if (selectedKeys.length > 0) {
        node = examinationList.filter(row => row.id === Number(selectedKeys[0]))[0].id;
      }
    }
    asyncForm('新增', itemList, { parentId: `${node}` }, data => {
      console.log(data);
      let handler;
      if (tab === 'exercise') {
        handler = Exercise.addStruct(data);
      } else {
        handler = Examination.addStruct(data);
      }
      return handler.then(() => {
        asyncSMessage('新增成功!');
        this.refresh();
      });
    });
  }

  addBrotherAction() {
    const { tab, exerciseList, examinationList, selectedKeys } = this.state;
    let itemList;
    let node;
    if (tab === 'exercise') {
      itemList = this.exerciseItemList;
      if (selectedKeys.length > 0) {
        node = exerciseList.filter(row => row.id === Number(selectedKeys[0]))[0].parentId;
      }
    } else {
      itemList = this.examinationItemList;
      if (selectedKeys.length > 0) {
        node = examinationList.filter(row => row.id === Number(selectedKeys[0]))[0].parentId;
      }
    }
    asyncForm('新增', itemList, { parentId: `${node}` }, data => {
      let handler;
      if (tab === 'exercise') {
        handler = Exercise.addStruct(data);
      } else {
        handler = Examination.addStruct(data);
      }
      return handler.then(() => {
        asyncSMessage('新增成功!');
        this.refresh();
      });
    });
  }

  editAction() {
    const { tab, exerciseList, examinationList, selectedKeys } = this.state;
    let itemList;
    let list;
    if (tab === 'exercise') {
      itemList = this.exerciseItemList;
      list = exerciseList;
    } else {
      itemList = this.examinationItemList;
      list = examinationList;
    }
    asyncForm('编辑', itemList, list.filter(row => row.id === Number(selectedKeys[0])).map(row => {
      row.parentId = `${row.parentId}`;
      return row;
    })[0], data => {
      let handler;
      if (tab === 'exercise') {
        handler = Exercise.editStruct(data);
      } else {
        handler = Examination.editStruct(data);
      }
      return handler.then(() => {
        asyncSMessage('编辑成功!');
        this.refresh();
      });
    });
  }

  deleteAction() {
    const { tab, checkedKeys } = this.state;
    asyncDelConfirm('删除确认', '是否删除选中节点?', () => {
      if (tab === 'exercise') {
        return Promise.all(checkedKeys.map(row => Examination.delStruct({ id: row })));
      }
      return Promise.all(checkedKeys.map(row => Examination.delStruct({ id: row })));
    }).then(() => {
      asyncSMessage('删除成功!');
      this.refresh();
    });
  }

  renderExamination() {
    const { loading } = this.state;
    return <Block loading={loading}>
      <ActionLayout
        itemList={this.exerciseActionList}
        selectedKeys={this.state.selectedKeys}
        checkedKeys={this.state.checkedKeys}
        onAction={key => this.onAction(key)} />
      <TreeLayout autoExpandParent defaultExpandAll checkable itemList={this.state.examinationStruct} selectedKeys={this.state.selectedKeys} onSelect={(selectedKeys) => {
        this.setState({ selectedKeys });
      }} checkedKeys={this.state.checkedKeys} onCheck={(checkedKeys) => {
        this.setState({ checkedKeys });
      }} />
    </Block>;
  }

  renderExercise() {
    const { loading } = this.state;
    return <Block loading={loading}>
      <ActionLayout
        itemList={this.exerciseActionList}
        selectedKeys={this.state.selectedKeys}
        checkedKeys={this.state.checkedKeys}
        onAction={key => this.onAction(key)} />
      <TreeLayout autoExpandParent defaultExpandAll checkable itemList={this.state.exerciseStruct} selectedKeys={this.state.selectedKeys} onSelect={(selectedKeys) => {
        this.setState({ selectedKeys });
      }} checkedKeys={this.state.checkedKeys} onCheck={(checkedKeys) => {
        this.setState({ checkedKeys });
      }} />
    </Block>;
  }

  renderView() {
    const { tab } = this.state;
    return <Block><Tabs activeKey={tab} onChange={(value) => {
      this.setState({ tab: value, selectedKeys: [], checkedKeys: [] });
      this.refresh();
    }}>
      <Tabs.TabPane tab="练习结构" key="exercise">
        {this.renderExercise()}
      </Tabs.TabPane>
      <Tabs.TabPane tab="模考结构" key="examination">
        {this.renderExamination()}
      </Tabs.TabPane>
    </Tabs></Block>;
  }
}