/**
 * 徐祥健<xuxj@hugeinfo.com.cn>
 * 2018年8月28日 10:41
 *
 */


import React from 'react';

import HeadView from '../view/HeadView';
import TableBtnView from '../view/TableBtnView';
import LinkView from '../view/LinkView';
import { Input, Button, DatePicker, Divider,  Row, Col, message, Modal, Popconfirm, Badge } from 'antd';
import moment from 'moment';
import Fetch from '../fetch';
import TableView from '../view/TableView';

export default class BusList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      formdata: {},
      key: 0,
      type: this.props.type,
      loading: false,
      msgType: ''
    };
  }

  componentDidMount() {
    document.title = '投诉建议管理';
    // Fetch.getSpecialPerson()
    //   .then(res => {
    //     this.setState({
    //       data: res
    //     });
    //   });
    const { type } = this.state;
    var msgType;
    switch(type){
      case 'onlineAdvice':
        msgType = 1;
        break;
      case 'onlineComplaints':
        msgType = 2;
        break;
      case 'onlineLetter':
        msgType = 3;
        break;
      case 'another':
        msgType = 4;
        break;
      default:
          break;
    }
    this.setState({ loading: true,msgType });
    Fetch.getComSugges({msgType, businessType: 22}).then( res => {
      for(var i=0;i<res.length;i++){
        res[i]['index'] = i+1; 
      }
      this.setState({
        data: res,
        loading: false
      })
    })
  }

  onTimeChange = (date, dateString) => {
    const formdata = {
      ...this.state.formdata,
      createTime: dateString
    };
    this.setState({ formdata });
  }
  onInputChange = ({ target: { value, name } }) => {
    if (name === 'reset') {
      this.setState({ formdata: {} });
      this.onReset();
    } else {
      const formdata = {
        ...this.state.formdata,
        [name]: value
      };
      this.setState({ formdata });
    }
  }
  
  onReset = () => {
    this.setState(prev => ({
      key: prev.key + 1
    }));
    this.setState({
      resetKey: Date.now(),
      formdata: {}
    }, this.onTableChange);
  }

  onSubmit = e => {
    e.preventDefault();
    this.onTableChange();
  }

  onTableChange = () => {
    this.setState({ loading: true });
    const { msgType } = this.state;
    Fetch.getComSugges({msgType,...this.state.formdata}).then( res => {
      for(var i=0;i<res.length;i++){
        res[i]['index'] = i+1; 
      }
      this.setState({
        data: res,
        loading: false
      })
    })
  }

  onDetail = (_text, _record) =>{
    const { type } = this.state;
    this.props.history.push('/busDetail/' + _text.businessType + '/' + _text.businessId + '/' + _text.createId  + '/' + 'detail' + '/' + type);
  }

  onDo = (_text, _record) =>{
    const { type } = this.state;
    this.props.history.push('/busDetail/' + _text.businessType + '/' + _text.businessId + '/' + _text.createId  + '/' + 'com' + '/' + type);
  }
  
  onDel = (_text, _record) => {
    Fetch.businessDel({businessId:  _text.businessId}).then( res => {
      if(res.code == 0){
        message.warning('正在更新列表');
        this.onTableChange();
      }
      }, err => {
        message.error(err);
    });
  }

  render() {
    const columns = [{
      title: '序号',
      dataIndex: 'index',
      key: 'index',
    },{
      title: '发送人',
      dataIndex: 'userName',
      key: 'userName',
    }, {
      title: '消息内容',
      dataIndex: 'content',
      key: 'content',
    }, {
      title: '发送时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: text => <span>{moment(text).format("YYYY-MM-DD HH:mm")}</span>
    }, {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: text => (
        text == "待审" ? 
        <Badge count={'待回复'} /> : <Badge count={'已回复'} style={{ backgroundColor: '#52c41a' }} />
      )
    },{
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
          {
            record.status == "待审" ? <label onClick={()=>{this.onDo(text, record)}} className="theme-color">处理</label>
            :<label onClick={()=>{this.onDetail(text, record)}} className="theme-color">详情</label>
          }
          
          <Divider type="vertical" />
          <Popconfirm placement="topRight" title={'你确定要删除该条记录吗'} onConfirm={()=>{this.onDel(text, record)}} okText="确定" cancelText="取消">
            <label className="theme-color">删除</label>
          </Popconfirm>
        </span>
      ),
    }];
    const { data, loading } = this.state;
    const { title, local, type, total, notRead, contact, sed } = this.props;
    return (
      <div className="app-page">
        <HeadView history={this.props.history} />
        <LinkView local={local} sed={sed} />
        <TableBtnView name={local} btnName='新建人员' key={this.state.key}>
          <Input placeholder="根据发送人模糊查询" style={{ width: "200px" }} name='userName' onChange={this.onInputChange} onPressEnter={this.onSubmit}/>
          <Input placeholder="根据消息内容模糊查询" style={{ width: "200px" }} name='content' onChange={this.onInputChange} onPressEnter={this.onSubmit}/>
          {/* <Input placeholder="根据状态模糊查询" style={{ width: "200px" }} name='status' onChange={this.onInputChange} onPressEnter={this.onSubmit}/> */}
          <DatePicker onChange={this.onTimeChange} placeholder="发送日期"/>
          <Button type="primary" onClick={this.onSubmit}>查询</Button>
          <Button name="reset" onClick={this.onInputChange}>重置</Button>
        </TableBtnView>
        <TableView columns={columns} data={data} pageSize='10' size='default' loading={loading}/>
        {/* <FormSearch /> */}
      </div>
    );
  }

}