import React from "react";
import $ from "jquery/src/ajax";
import "react-quill/dist/quill.bubble.css";
import moment from "moment";
import {
  Form,
  Icon,
  Button,
  Input,
  Spin,
  Table,
  message,
  Modal,
  Select,
  DatePicker,
  Popconfirm,
} from "antd";
const { Option } = Select;
const { TextArea } = Input;
const { RangePicker } = DatePicker;
//主体
const Customers = Form.create()(
  React.createClass({
    loadData(pageNo) {
      this.state.data = [];
      this.setState({
        loading: true,
        page: pageNo
      });
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url:
          globalConfig.context +
          "/api/admin/visitingCustomers/listVisitingCustomers",
        data: {
          pageNo: 1,
          pageSize: this.state.pagination.pageSize,
          name: this.state.name,
          startTime: this.state.time[0],
          endTime: this.state.time[1]
        },
        success: function(data) {
          let theArr = [];
          if (!data.data || !data.data.list) {
            if (data.error && data.error.length) {
              message.warning(data.error[0].message);
            }
          } else {
            for (let i = 0; i < data.data.list.length; i++) {
              let thisdata = data.data.list[i];
              theArr.push({
                key: i + 1,
                id: thisdata.id,
                name: thisdata.name,
                mobile: thisdata.mobile,
                status: thisdata.status,
                remark: thisdata.remark,
                createTimes: thisdata.createTimes
              });
            }
            this.state.pagination.current = data.data.pageNo;
            this.state.pagination.total = data.data.totalCount;
          }
          this.setState({
            dataSource: theArr,
            pagination: this.state.pagination
          });
        }.bind(this)
      }).always(
        function() {
          this.setState({
            loading: false
          });
        }.bind(this)
      );
    },
    getInitialState() {
      return {
        //数据类型
        loading: false,
        visible: false,
        time: [],
        pagination: {
          defaultCurrent: 1,
          defaultPageSize: 10,
          showQuickJumper: true,
          pageSize: 10,
          onChange: function(page) {
            this.loadData(page);
            this.setState({
              selectedRowKeys: []
            });
          }.bind(this),
          showTotal: function(total) {
            return "共" + total + "条数据";
          }
        },
        columns: [
          {
            title: "序号",
            dataIndex: "id",
            key: "id"
          },
          {
            title: "姓名",
            dataIndex: "name",
            key: "name"
          },
          {
            title: "联系方式",
            dataIndex: "mobile",
            key: "mobile"
          },
          {
            title: "提交时间",
            dataIndex: "createTimes",
            key: "createTimes"
          },
          {
            title: "是否查看",
            dataIndex: "status",
            key: "status",
            render: text => {
              if (text == 0) {
                return "未读";
              } else if (text == 1) {
                return "已读";
              }
            }
          },
          {
            title: "回复备注",
            dataIndex: "remark",
            key: "remark"
          },
          {
            title: "操作",
            dataIndex: "aab",
            key: "aab",
            render: (text, record) => {
              return (
                <div>
                  <Button
                    type="primary"
                    onClick={(e) => {
                      this.addRemarks(record);
                    }}
                  >
                    添加备注
                  </Button>
                  <Popconfirm
                    placement="top"
                    title={"是否确认删除？"}
                    onConfirm={e => {
                      this.delete(record);
                    }}
                    okText="确认"
                    cancelText="取消"
                  >
                    <Button
                      type="primary"
                      style={{ marginLeft: 10 }}
                    >
                      删除
                    </Button>
                  </Popconfirm>
                </div>
              );
            }
          }
        ],
        //数据列表
        dataSource: []
      };
    },

    componentWillMount() {
      this.loadData();
    },
    stopPropagation(e) {
      e.stopPropagation();
      e.nativeEvent.stopImmediatePropagation();
    },
    addRemarks(record) {
        let status = record.status + ""
        this.setState({
            visible: true,
            id: record.id,
            status,
            remark: record.remark
        })
    },
    cancel() {
        this.setState({
            visible: false,
            remarks: undefined,
            status: []
        })
    },
    delete(record) {
        this.setState({
          loading: true
        });
        $.ajax({
          method: "post",
          dataType: "json",
          crossDomain: false,
          url:
            globalConfig.context +
            "/api/admin/visitingCustomers/updateVisitingCustomers",
          data: {
            id: record.id,
            status: 2,
            remark: record.remark
          },
          success: function(data) {
            let theArr = [];
              if (data.error && data.error.length) {
                message.warning(data.error[0].message);
              } else {
                message.success("删除成功!");
              this.loadData();
            }
          }.bind(this)
        }).always(
          function() {
            this.setState({
              loading: false
            });
          }.bind(this)
        );
    },
    tijiao() {
        this.setState({
            loading: true
        })
        $.ajax({
          method: "post",
          dataType: "json",
          crossDomain: false,
          url:
            globalConfig.context +
            "/api/admin/visitingCustomers/updateVisitingCustomers",
          data: {
            id: this.state.id,
            status: this.state.status,
            remark: this.state.remark
          },
          success: function(data) {
            let theArr = [];
              if (data.error && data.error.length) {
                message.warning(data.error[0].message);
              }else {
              this.loadData()
              this.cancel()
              message.success("提交成功!");
            }
          }.bind(this)
        }).always(
          function() {
            this.setState({
              loading: false
            });
          }.bind(this)
        );
    },
    reset() {
      this.state.time = []
      this.state.name = undefined
      this.loadData()
    },

    render() {
      const FormItem = Form.Item;
      return (
        <div className="user-content">
          <div className="content-title">
            <span>客户访问列表</span>
            <div className="user-search">
              <Input
                placeholder="请输入客户名称"
                style={{
                  width: "150px",
                  marginRight: "20px",
                  marginBottom: "10px"
                }}
                value={this.state.name}
                onChange={e => {
                  this.setState({ name: e.target.value });
                }}
              />
              <span style={{ fontSize: 14 }} >提交日期：</span>
              <RangePicker
                value={[
                  this.state.time[0] ? moment(this.state.time[0]) : null,
                  this.state.time[1] ? moment(this.state.time[1]) : null
                ]}
                onChange={(data, dataString) => {
                  this.setState({ time: dataString });
                }}
              />
              <Button
                type="primary"
                onClick={this.loadData}
                style={{ marginRight: "10px",marginLeft: 10 }}
              >
                搜索
              </Button>
              <Button onClick={this.reset} style={{ marginRight: "10px" }}>
                重置
              </Button>
            </div>
            <div className="patent-table">
              <Spin spinning={this.state.loading}>
                <Table
                  columns={this.state.columns}
                  dataSource={this.state.dataSource}
                  pagination={this.state.pagination}
                  onRowClick={this.tableRowClick}
                  size="small"
                  bordered
                />
              </Spin>
            </div>
          </div>
          <div className="patent-desc">
            <Modal
              className="customeDetails"
              title={"备注信息"}
              width="350"
              visible={this.state.visible}
              onOk={this.tijiao}
              okText={"保存"}
              onCancel={this.cancel}
            >
              <Spin spinning={this.state.loading}>
                <div className="clearfix">
                  <FormItem
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 14 }}
                    label="客户备注"
                  >
                    <TextArea
                      placeholder="请输入备注"
                      value={this.state.remark}
                      onChange={e => {
                        this.setState({
                          remark: e.target.value
                        });
                      }}
                    />
                  </FormItem>
                  <FormItem
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 14 }}
                    label="是否已读"
                  >
                    <Select
                      defaultValue="0"
                      style={{ width: 120 }}
                      value={this.state.status}
                      placeholder="是否阅读"
                      onChange={e => {
                        this.setState({
                          status: e
                        });
                      }}
                    >
                      <Option value="0">未读</Option>
                      <Option value="1">已读</Option>
                    </Select>
                  </FormItem>
                </div>
              </Spin>
            </Modal>
          </div>
        </div>
      );
    }
  })
);

export default Form.create()(Customers);