import React, { Component } from "react";
import {
  AutoComplete,
  Button,
  DatePicker,
  Input,
  message,
  Modal,
  Select,
  Spin,
  Table,
  Tabs,
  Tag,
  Tooltip,
} from "antd";
import { ShowModal, splitUrl, getClockState } from "@/tools";
import { ChooseList } from "../../order/orderNew/chooseList";
import $ from "jquery/src/ajax";
import "./index.less";
import moment from "moment";

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

class PublicSummary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNo: 1,
      loading: false,
      changeList: undefined,
      selectedRowKeys: [],
      columns: [
        {
          title: "客户名称",
          dataIndex: "nickname",
          key: "nickname",
          width: 150,
          // fixed: "left",
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "标签",
          dataIndex: "status",
          key: "status",
          width: 200,
          render: (text, record) => (
            <div style={{ display: "flex", flexDirection: "row" }}>
              <Tag
                color={["#45b97c", "#69541b", "#f47920", "#8552a1", "#228fbd"][record.type]}
              >
                {
                  record.type === 0
                    ? "业务公出" : record.type === 1
                      ? "技术公出" : record.type === 2
                        ? "行政公出" : record.type === 3
                          ? "技术协单" : record.type === 4
                            ? "协单助手" : ""
                }
              </Tag>
              <Tag color={getClockState(text).color}>
                {getClockState(text).title}
              </Tag>
              {record.updateStatus == 1 && <Tag color="#1E90FF">改</Tag>}
            </div>
          ),
        },
        {
          title: "签单次数",
          dataIndex: "userName",
          key: "userName",
        },
        {
          title: "签单金额",
          dataIndex: "sname",
          key: "sname",
        },
        {
          title: "首次签单时间",
          dataIndex: "createTimes",
          key: "createTimes",
        },
        {
          title: "最新签单时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "最新签单类型",
          dataIndex: "duration",
          key: "duration",
        },
        {
          title: "跟进人",
          dataIndex: "remarks",
          key: "remarks",
        },
        {
          title: "跟进部门",
          dataIndex: "plan",
          key: "plan",
        },
        {
          title: "跟进方式",
          dataIndex: "expectedEffect",
          key: "expectedEffect",
        },
        {
          title: "跟进说明",
          dataIndex: "supplement",
          key: "supplement",
        },
        {
          title: "次数",
          dataIndex: "nextPlan",
          key: "nextPlan",
        },
        {
          title: "最新跟进时间",
          dataIndex: "auditInfo",
          key: "auditInfo",
        },
        {
          title: "累计以前项目",
          dataIndex: "annexUrls",
          key: "annexUrls",
        },
      ],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      dataSource: [],
      searchInfor: {}
    };
    this.loadData = this.loadData.bind(this);
    this.resetAll = this.resetAll.bind(this);
    this.changeList = this.changeList.bind(this);
    this.selectSuperId = this.selectSuperId.bind(this);
    this.supervisor = this.supervisor.bind(this);
    this.httpChange = this.httpChange.bind(this);
    this.blurChange = this.blurChange.bind(this);
    this.selectAuto = this.selectAuto.bind(this);
    this.getCustomer = this.getCustomer.bind(this);
    this.selectCustomerAuto = this.selectCustomerAuto.bind(this);
    this.httpCustomerChange = this.httpCustomerChange.bind(this);
    this.blurCustomerChange = this.blurCustomerChange.bind(this);
    this.exportExec = this.exportExec.bind(this);
  }
  //获取上级组织
  selectSuperId() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length === 0) {
          for (let i = 0; i < data.data.length; i++) {
            let theData = data.data[i];
            theArr.push(
              <Select.Option value={theData.id} key={theData.id}>
                {theData.name}
              </Select.Option>
            );
          }
          this.setState({
            contactsOption: theArr,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach((item) => {
      arr.forEach((val) => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr,
    });
  }

  loadData(pageNo) {
    const { searchInfor, pagination } = this.state;
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchInfor, {
      pageNo: pageNo || 1,
      pageSize: pagination.pageSize,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/release/publicReleaseDtails",
      data: datas,
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          if (data.data.list) {
            pagination.current = data.data.pageNo;
            pagination.total = data.data.totalCount;
            if (data.data && data.data.list && !data.data.list.length) {
              pagination.current = 0;
              pagination.total = 0;
            }
            this.setState({
              dataSource: data.data.list,
              pagination: this.state.pagination,
              pageNo: data.data.pageNo,
            });
          } else {
            this.setState({
              dataSource: data.data,
              pagination: false,
            });
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

  resetAll() {
    this.setState(
      {
        searchInfor: JSON.parse(JSON.stringify({})),
        selectedRowKeys: [],
      },
      () => {
        this.loadData();
      }
    );
  }

  supervisor(e) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listAdminByName",
      data: {
        adminName: e,
        status: "2",
      },
      success: function (data) {
        if (data.error && data.error.length === 0) {
          this.setState({
            customerArr: data.data,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () { }.bind(this));
  }

  httpChange(e) {
    if (e.length >= 1) {
      this.supervisor(e);
    }
    this.setState({
      auto: e,
    });
  }

  selectAuto(value, options) {
    this.setState({
      auto: value,
    });
  }

  httpCustomerChange(e) {
    if (e.length >= 1) {
      this.getCustomer(e);
    }
    this.setState({
      customer: e,
    });
  }

  selectCustomerAuto(value, options) {
    this.setState({
      customer: value,
    });
  }

  getCustomer(e) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/getUserByName",
      data: {
        name: e,
      },
      success: function (data) {
        if (data.error && data.error.length === 0) {
          this.setState({
            customerList: data.data,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () { }.bind(this));
  }

  blurCustomerChange(e) {
    let theType = "";
    let contactLists = this.state.customerList || [];
    if (e) {
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          theType = item.id;
        }
      });
    }
    this.setState({
      theCustomerTypes: theType,
    });
  }

  blurChange(e) {
    let theType = "";
    let contactLists = this.state.customerArr || [];
    if (e) {
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          theType = item.id;
        }
      });
    }
    this.setState({
      theTypes: theType,
    });
  }

  componentWillMount() {
    this.loadData();
    this.selectSuperId();
  }
  // 导出Excel
  exportExec() {
    this.setState({
      exportPendingLoading: true,
    });
    message.config({
      duration: 20,
    });
    let loading = message.loading("下载中...");
    let data = this.state.searchInfor;
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url:
        globalConfig.context + "/api/admin/release/publicReleaseDtails/export",
      data,
      success: function (data) {
        if (data.error.length === 0) {
          this.download(data.data);
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        loading();
        this.setState({
          exportPendingLoading: false,
        });
      }.bind(this)
    );
  }
  // 下载
  download(fileName) {
    window.location.href =
      globalConfig.context + "/open/download?fileName=" + fileName;
  }
  // 选择行
  onSelectChange(selectedRowKeys, selectedRows) {
    this.setState({
      selectedRowKeys,
      selectedRows,
    });
  }
  // 关闭弹窗
  closeDesc() {
    this.setState({
      mvisible: "",
    });
    this.loadData(this.state.pageNo);
  }

  render() {
    const { searchInfor, selectedRowKeys } = this.state
    const dataSources = this.state.customerArr || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    const customerList = this.state.customerList || [];
    const customerOptions = customerList.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    const rowSelection = {
      hideDefaultSelections: true,
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
    };
    return (
      <div>
        <div className="user-content">
          <div className="content-title">
            <span>签单客户汇总</span>
          </div>
          <Tabs defaultActiveKey="1" className="test">
            <TabPane tab="搜索" key="1">
              <div
                className="user-search"
                style={{
                  marginTop: "10px",
                  marginLeft: "10px",
                  marginRight: "10px",
                }}
              >
                <span style={{ marginRight: "10px" }}>
                  <AutoComplete
                    className="certain-category-search"
                    dropdownClassName="certain-category-search-dropdown"
                    dropdownMatchSelectWidth={false}
                    style={{ width: 160 }}
                    dataSource={customerOptions}
                    placeholder="输入客户名称"
                    value={searchInfor.customer}
                    onChange={this.httpCustomerChange}
                    filterOption={true}
                    onBlur={this.blurCustomerChange}
                    onSelect={this.selectCustomerAuto}
                  >
                    <Input />
                  </AutoComplete>
                </span>
                <span style={{ marginRight: "10px" }}>
                  <AutoComplete
                    className="certain-category-search"
                    dropdownClassName="certain-category-search-dropdown"
                    dropdownMatchSelectWidth={false}
                    style={{ width: 160 }}
                    dataSource={options}
                    placeholder="跟单人姓名"
                    value={searchInfor.auto}
                    onChange={this.httpChange}
                    filterOption={true}
                    onBlur={this.blurChange}
                    onSelect={this.selectAuto}
                  >
                    <Input />
                  </AutoComplete>
                </span>
                <span style={{ marginRight: "10px" }}>
                  <Select
                    style={{ width: 160 }}
                    placeholder="会员状态"
                    value={searchInfor.projectType}
                    onChange={(e) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          projectType: e,
                        }),
                      });
                    }}
                  >
                    <Option value="1">会员</Option>
                    <Option value="0">非会员</Option>
                  </Select>
                </span>

                <span style={{ marginRight: "10px" }}>
                  <Select
                    style={{ width: 160 }}
                    placeholder="有无退单"
                    value={searchInfor.chargeback}
                    onChange={(e) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          chargeback: e,
                        }),
                      });
                    }}
                  >
                    <Option value="1">有退单</Option>
                    <Option value="0">无退单</Option>
                  </Select>
                </span>

                <span style={{ marginRight: "10px" }}>
                  <Select
                    style={{ width: 160 }}
                    placeholder="选择跟进方式"
                    value={searchInfor.followup}
                    onChange={(e) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          followup: e,
                        }),
                      });
                    }}
                  >
                    <Option value="1">公出打卡</Option>
                    <Option value="0">其他跟进</Option>
                  </Select>
                </span>

                <span style={{ marginRight: "10px" }}>
                  <Select
                    style={{ width: 160 }}
                    placeholder="是否大客户"
                    value={searchInfor.followup}
                    onChange={(e) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          followup: e,
                        }),
                      });
                    }}
                  >
                    <Option value="1">大客户</Option>
                    <Option value="0">非大客户</Option>
                  </Select>
                </span>

                <span style={{ marginRight: "10px" }}>
                  <Select
                    style={{ width: 160 }}
                    placeholder="签单次数"
                    value={searchInfor.followup}
                    onChange={(e) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          followup: e,
                        }),
                      });
                    }}
                  >
                    <Option value="1">1次</Option>
                    <Option value="2">2次</Option>
                    <Option value="3">3次</Option>
                    <Option value="4">3次以上</Option>
                  </Select>
                </span>

                <span style={{ marginRight: "10px" }}>
                  <Select
                    style={{ width: 160 }}
                    placeholder="最新签单类型"
                    value={searchInfor.followup}
                    onChange={(e) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          followup: e,
                        }),
                      });
                    }}
                  >
                    <Option value="1">高新复购</Option>
                    <Option value="2">其他复购</Option>
                  </Select>
                </span>

                <span style={{ marginRight: "10px" }}>
                  <Select
                    placeholder="选择跟进部门"
                    style={{ width: 200 }}
                    value={searchInfor.depId}
                    onChange={(e) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          depId: e,
                        }),
                      });
                    }}
                    notFoundContent="未获取到上级组织列表"
                  >
                    {this.state.contactsOption}
                  </Select>
                </span>

                <span style={{ marginRight: "10px" }}>
                  <span style={{ marginRight: "5px", marginBottom: "10px" }}>
                    跟进时间 :
                  </span>
                  <RangePicker
                    style={{ marginRight: "10px", marginBottom: "10px" }}
                    value={[
                      searchInfor.startDate
                        ? moment(searchInfor.startDate)
                        : null,
                      searchInfor.endDate ? moment(searchInfor.endDate) : null,
                    ]}
                    onChange={(data, dataString) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          startDate: dataString[0],
                          endDate: dataString[1],
                        }),
                      });
                    }}
                  />
                </span>

                <span style={{ marginRight: "10px" }}>
                  <span style={{ marginRight: "5px", marginBottom: "10px" }}>
                    首次签单 :
                  </span>
                  <RangePicker
                    style={{ marginRight: "10px", marginBottom: "10px" }}
                    value={[
                      searchInfor.startDate
                        ? moment(searchInfor.startDate)
                        : null,
                      searchInfor.endDate ? moment(searchInfor.endDate) : null,
                    ]}
                    onChange={(data, dataString) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          startDate: dataString[0],
                          endDate: dataString[1],
                        }),
                      });
                    }}
                  />
                </span>

                <span style={{ marginRight: "10px" }}>
                  <span style={{ marginRight: "5px", marginBottom: "10px" }}>
                    最新签单 :
                  </span>
                  <RangePicker
                    style={{ marginRight: "10px", marginBottom: "10px" }}
                    value={[
                      searchInfor.startDate
                        ? moment(searchInfor.startDate)
                        : null,
                      searchInfor.endDate ? moment(searchInfor.endDate) : null,
                    ]}
                    onChange={(data, dataString) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          startDate: dataString[0],
                          endDate: dataString[1],
                        }),
                      });
                    }}
                  />
                </span>

                <Button
                  type="primary"
                  onClick={() => {
                    this.loadData();
                  }}
                  style={{ marginRight: "10px", marginBottom: "10px" }}
                >
                  搜索
                </Button>
                <Button
                  onClick={this.resetAll}
                  style={{ marginRight: "10px", marginBottom: "10px" }}
                >
                  重置
                </Button>
              </div>
            </TabPane>
            <TabPane tab="更改表格显示数据" key="2">
              <div style={{ marginLeft: 10 }}>
                <Spin spinning={this.state.loading}>
                  <ChooseList
                    columns={this.state.columns}
                    changeFn={this.changeList}
                    changeList={this.state.changeList}
                    top={55}
                    margin={11}
                  />
                </Spin>
              </div>
            </TabPane>
            <TabPane tab="操作" key="3">
              <div style={{ float: "left" }}>
                <Button
                  type="primary"
                  loading={this.state.exportPendingLoading}
                  onClick={this.exportExec}
                  style={{ margin: 10 }}
                >
                  导出Excel
                </Button>
              </div>
              <div style={{ float: "left" }}>
                <Button
                  type="primary"
                  onClick={() => { }}
                  style={{ margin: 10 }}
                  disabled={this.state.selectedRowKeys.length !== 1}
                >
                  客户日志
                </Button>
              </div>
              <div style={{ float: "left" }}>
                <Button
                  type="primary"
                  onClick={() => {
                    this.setState({
                      mvisible: "channellog",
                    });
                  }}
                  style={{ margin: 10 }}
                  disabled={this.state.selectedRowKeys.length !== 1}
                >
                  转交日志
                </Button>
              </div>
            </TabPane>
          </Tabs>
          <div className="patent-table">
            <Spin spinning={this.state.loading}>
              <Table
                bordered
                size="middle"
                scroll={{ x: "120%" }}
                columns={
                  this.state.changeList
                    ? this.state.changeList
                    : this.state.columns
                }
                dataSource={this.state.dataSource}
                pagination={this.state.pagination}
                rowSelection={rowSelection}
              />
            </Spin>
          </div>
        </div>
      </div>
    );
  }
}

export default PublicSummary;
