import React from "react";
import $ from "jquery/src/ajax";
import moment from "moment";
import {
  Button,
  Form,
  Input,
  Spin,
  Table,
  Select,
  message,
  Tabs,
  DatePicker,
  AutoComplete,
  Modal,
  Upload,
  Icon,
  Tooltip,
  Tag,
} from "antd";
import { ChooseList } from "../../../order/orderNew/chooseList";
import { ShowModal, } from "@/tools.js"
import { accountType, accountStatus } from "@/dataDic";
import ZhuanjiaoDetail from "@/zhuanjiaoDetail.jsx";
import IntentionDetail from "./intentionDetail/intentionDetail";
import ShowModalDiv from "@/showModal.jsx";
import FollowDetail from "./followDetail"
import Outbound from '../components/outbound';
import './clue.less';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;

const LimitedProject = React.createClass({

  getInitialState() {
    return {
      searchValues: {
        clueProcess: this.props.intentionState == 1 ? "0" : ""
      }, // 列表筛选条件
      loading: false, //加载动画
      changeList: undefined, // 更改后的表格显示数据
      dataSource: [], // 列表数据
      fjlist: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      columns: [
        {
          title: "客户名称",
          dataIndex: "nickname",
          key: "nickname",
          width: 300,
        },
        {
          title: "联系人",
          dataIndex: "contacts",
          key: "contacts",
        },
        {
          title: "联系电话",
          dataIndex: "contactMobile",
          key: "contactMobile",
        },
        {
          title: "所属人",
          dataIndex: "adminName",
          key: "adminName",
          isSelect: "jl",
        },
        {
          title: "转交人",
          dataIndex: "clueAname",
          key: "clueAname",
          isSelect: "yxy",
        },
        {
          title: "状态",
          dataIndex: "clueProcess",
          key: "clueProcess",
          render: (text, record) => {
            return (
              <div style={{ color: ["green", "", "red", "", ""][text] }}>
                {["待分配", "已分配", "已回退", "已释放", "已领取"][text]}
              </div>
            );
          },
        },
        {
          title: "导入时间",
          dataIndex: "clueTime",
          key: "clueTime",
          isSelect: "jl",
          render: (text, record) => {
            return (
              <div>
                {text}
              </div>
            );
          },
        },
        {
          title: "转交时间",
          dataIndex: "clueTransferTime",
          key: "clueTransferTime",
          isSelect: "yxy",
          render: (text, record) => {
            return (
              <div>
                {text}
              </div>
            );
          },
        },
        {
          title: "操作",
          dataIndex: "op",
          key: "op",
          render: (text, record) => {
            return (
              <div>
                <Outbound
                  type="public"
                  uid={record.id}
                />
                {
                  ((record.clueProcess == 1 && this.props.intentionState == 2) ||
                    ((record.clueProcess == 0 || record.clueProcess == 2) && this.props.intentionState == 1)
                  ) &&
                  <Button
                    style={{ marginLeft: 10 }}
                    type="primary"
                    onClick={(e) => {
                      let _this = this;
                      Modal.confirm({
                        title: "提示",
                        content: (
                          <span style={{ color: "red" }}>
                            确定将此客户领取至私有库吗？
                            <div style={{ marginTop: "5px", color: "#000" }}>
                              {record.nickname}
                            </div>
                          </span>
                        ),
                        onOk() {
                          _this.changeAssigner(3, record.id)
                        },
                        onCancel() { },
                      });
                    }}
                  >
                    领取
                  </Button>
                }
                {this.props.intentionState == 2 &&
                  <Button
                    style={{ marginLeft: 10 }}
                    type="primary"
                    onClick={(e) => {
                      let _this = this;
                      Modal.confirm({
                        title: "提示",
                        content: (
                          <span style={{ color: "red" }}>
                            确定将此客户退回吗？
                            <div style={{ marginTop: "5px", color: "#000" }}>
                              {record.nickname}
                            </div>
                          </span>
                        ),
                        onOk() {
                          _this.changeAssigner(1, record.id)
                        },
                        onCancel() { },
                      });
                    }}
                  >
                    回退
                  </Button>}
                <Button
                  style={{ marginLeft: 10 }}
                  type="primary"
                  onClick={(e) => {
                    e.stopPropagation();
                    this.zhuanjiaoDetail(record);
                  }}
                >
                  记录
                </Button>
              </div>
            );
          },
        },
      ],
      customerArr: [],
      selectedRowKeys: [],
      selectedRows: [],
      zhuanjiaoVisible: false,
      categoryArr: [],
      upLoad: {
        customRequest: (options) => {
          this.setState({
            upLoadFileLoading: true,
          })
          let params = new FormData();
          params.append("file", options.file);
          $.ajax({
            method: "post",
            url: globalConfig.context + "/api/admin/userClue/import",
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            data: params
          }).done(
            function (data) {
              this.setState({
                upLoadFileLoading: false,
              })
              if (data.error.length === 0) {
                if (data.data.errorCount == 0) {
                  message.success("上传成功！");
                } else {
                  Modal.info({
                    title: "提示",
                    width: 500,
                    content: (
                      <span>
                        {data.data.errorCount}个客户信息导入失败！
                        <div style={{ color: "red" }} dangerouslySetInnerHTML={{ __html: data.data.msg }}/>
                      </span>
                    ),
                    onOk() { },
                  });
                }
                this.loadData();
              } else {
                message.warning(data.error[0].message);
                this.loadData();
              }
            }.bind(this)
          ).always(
            function () {
              this.loadData();
              this.setState({
                upLoadFileLoading: false,
              });
            }.bind(this)
          );
        },
        name: "file",
        action: globalConfig.context + "/api/admin/userClue/import",
        showUploadList: false,
      },
      status: this.props.intentionState,
    };
  },

  componentWillMount() {
    this.defaultcolumns()
  },

  defaultcolumns() {
    const newArr = [];
    this.state.columns.forEach((item) => {
      if (this.props.intentionState == 1) {
        if (item.isSelect == "yxy") {
          return
        } else {
          newArr.push(item);
        }
      } else if (this.props.intentionState == 2) {
        if (item.isSelect == "jl") {
          return
        } else {
          newArr.push(item);
        }
      }
    });
    this.setState({
      changeList: newArr,
    }, () => {
      this.loadData();
    });
  },

  componentWillReceiveProps(prevProps) {
    if (prevProps.intentionState !== this.state.status) {
      this.setState({
        status: prevProps.intentionState
      }, () => {
        this.defaultcolumns()
      })
    }
  },

  // 列表接口
  loadData(pageNo) {
    const { searchValues, pagination } = this.state;
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchValues, {
      pageNo: pageNo || 1,
      pageSize: pagination.pageSize,
      shiroType: this.props.intentionState,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/userClue/list",
      data: datas,
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        let theArr = [];
        if (data.error && data.error.length === 0) {
          if (data.data) {
            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 {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  // 搜索
  search() {
    this.loadData();
  },
  // 重置
  reset() {
    this.setState({
      searchValues: {
        clueProcess: this.props.intentionState == 1 ? "0" : ""
      },
    }, () => {
      this.defaultcolumns();
    })
  },

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

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

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

  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,
    });
  },

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

  showConfirm() {
    let _this = this;
    Modal.confirm({
      title: "提示",
      content: (
        <span style={{ color: "red" }}>
          确定要转交以下客户吗？
          {this.state.selectedRows.map((value, index) => (
            <div key={index} style={{ marginTop: "5px", color: "#000" }}>
              {value.nickname}
            </div>
          ))}
        </span>
      ),
      onOk() {
        _this.changeAssigner(0)
      },
      onCancel() { },
    });
  },

  showConfirms() {
    let _this = this;
    Modal.confirm({
      title: "您确定将以下客户移至公共库吗？",
      content: (
        <span style={{ color: "red" }}>
          移除后，以下客户将被别人领取！
          {this.state.selectedRows.map((value, index) => (
            <div key={index} style={{ marginTop: "5px", color: "#000" }}>
              {value.nickname}
            </div>
          ))}
        </span>
      ),
      onOk() {
        _this.changeAssigner(2);
      },
      onCancel() { },
    });
  },
  // 批量转交，移至公共库
  changeAssigner(type, uid) {
    const _this = this;
    if (type == 0 && !this.state.theTypes) {
      message.warning("请输入转交人姓名");
      return
    }
    let changeIds = "";
    if (type == 0 || type == 2) {
      for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
        let rowItem = this.state.selectedRows[idx];
        if (rowItem.id) {
          changeIds =
            this.state.selectedRows.length - 1 === idx
              ? changeIds + rowItem.id
              : changeIds + rowItem.id + ",";
        }
      }
    } else if (type == 1 || type == 3) {
      changeIds = uid
    }
    let loading = message.loading("加载中...");
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/userClue/transfer",
      data: {
        uid: changeIds,
        type,
        transferId: type == 0 ? this.state.theTypes : undefined,
      },
    }).done(
      function (data) {
        loading();
        this.setState({
          selList: [],
        })
        if (!data.error.length) {
          this.setState({
            auto: "",
            loading: false,
            selectedRowKeys: [],
          });
          if (data.data == 1) {
            message.success(["转交成功！", "退回成功！", "成功移至公共库！", "领取成功！"][type]);
            _this.loadData();
          } else {
            data.data.forEach(function (e) { message.warning(e) })
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  },

  zhuanjiaoDetail(record) {
    this.setState({
      zhuanjiaoVisible: true,
      zhuanjiaoId: record.id,
    });
  },

  zhuanjiaoDetailCancel() {
    this.setState({
      zhuanjiaoVisible: false,
    });
  },

  tableRowClick(record, index) {
    this.state.visitModul = false;
    this.setState({
      modalVisible: true,
      basicState: true,
      contactState: true,
      modalName: record.name,
      RowData: record,
    });
  },

  closeDesc(e, s) {
    this.state.basicState = e;
    this.state.visitModul = e;
    this.state.modalVisible = e;
    this.state.visitModuls = e;
    this.state.showDesc = e;
    this.setState({
      tabsKey: "",
    });
    if (s) {
      this.loadData(this.state.ispage);
    }
  },
  //查看跟进记录列表
  loadVisit(pageNo) {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/customer/listFollowHistory',
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.paginations.pageSize,
        uid: this.state.RowData.id, //名称1
      },
      success: function (data) {
        let theArr = [];
        if (data.error.length || 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(thisdata);
          };
          this.state.paginations.current = data.data.pageNo;
          this.state.paginations.total = data.data.totalCount;
          this.setState({
            ispage: data.data.pageNo
          })
        };
        if (data.data.list && !data.data.list.length) {
          this.state.paginations.current = 0;
          this.state.paginations.total = 0;
        };
        this.setState({
          visitArrList: theArr,
          paginations: this.state.paginations
        });
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },
  // 模版下载
  exportExec() {
    message.config({
      duration: 20,
    });
    let loading = message.loading("下载中...");
    this.setState({
      exportPendingLoading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/userClue/exportTemplate",
      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;
  },

  followUp(e) {
    const { searchValues } = this.state;
    this.setState({
      searchValues: Object.assign(searchValues, {
        belongname: e,
      }),
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listAdminByName",
      data: {
        adminName: e,
      },
      success: function (data) {
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        }
        this.setState({
          fjlist: thedata,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  selectF(value) {
    const { searchValues, fjlist } = this.state;
    const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist;
    this.setState({
      searchValues: Object.assign(searchValues, {
        belongName: newdataSources.find((item) => item.name == value).id,
      }),
    });
  },

  render() {
    const { searchValues, } = this.state
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          modalVisible: false,
          selectedRows: selectedRows,
          selectedRowKeys: selectedRowKeys,
        });
      },
      onSelect: (recordt, selected, selectedRows) => {
        this.setState({
          modalVisible: false,
        });
      },
    };
    const hasSelected = this.state.selectedRowKeys.length > 0;
    const dataSources = this.state.customerArr || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    const newdataSources =
      JSON.stringify(this.state.fjlist) == "{}" ? [] : this.state.fjlist;
    const newoptions = newdataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    return (
      <div className="user-content clue">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>线索客户</span>
        </div>
        <div className="user-search">
          <Tabs defaultActiveKey="1" className="test">
            <TabPane tab="搜索" key="1">
              <div className="user-search" style={{ marginLeft: 10 }}>
                <Input
                  placeholder="客户名称"
                  value={searchValues["userName"]
                    ? searchValues["userName"]
                    : ""}
                  onChange={(e) => {
                    searchValues["userName"] = e.target.value;
                    this.setState({
                      searchValues: searchValues,
                    });
                  }}
                />
                <AutoComplete
                  className="certain-category-search"
                  dropdownClassName="certain-category-search-dropdown"
                  dropdownMatchSelectWidth={false}
                  style={{ width: "150px" }}
                  dataSource={newoptions}
                  placeholder="所属人"
                  value={searchValues["belongname"] || undefined}
                  onChange={this.followUp.bind(this)}
                  filterOption={true}
                  onSelect={this.selectF.bind(this)}
                >
                  <Input />
                </AutoComplete>
                <Select
                  style={{ width: 140 }}
                  placeholder=""
                  value={searchValues["clueProcess"]
                    ? searchValues["clueProcess"]
                    : ""}
                  onChange={(e) => {
                    searchValues["clueProcess"] = e;
                    this.setState({
                      searchValues: searchValues,
                    });
                  }}
                >
                  <Option value="">全部</Option>
                  <Option value="0">待分配</Option>
                  <Option value="1">已分配</Option>
                  <Option value="2">已回退</Option>
                  <Option value="3">已移除</Option>
                  <Option value="4">已领取</Option>
                </Select>

                <RangePicker
                  style={{ width: 300 }}
                  value={[
                    searchValues.startTime ? moment(searchValues.startTime) : null,
                    searchValues.endTime ? moment(searchValues.endTime) : null,
                  ]}
                  onChange={(data, dataString) => {
                    this.setState({
                      searchValues: Object.assign(searchValues, {
                        startTime: dataString[0],
                        endTime: dataString[1],
                      }),
                    });
                  }}
                />
                <Button
                  type="primary"
                  onClick={this.search}
                  style={{ margin: "0 10px" }}
                >搜索</Button>
                <Button onClick={this.reset}>重置</Button>
              </div>
            </TabPane>
            <TabPane tab="更改表格显示数据" key="2">
              <div style={{ marginLeft: 10 }}>
                <ChooseList
                  columns={this.state.columns}
                  changeFn={this.changeList}
                  changeList={this.state.changeList}
                  top={55}
                  margin={11}
                />
              </div>
            </TabPane>
            {this.props.intentionState == 1
              ? <TabPane tab="操作" key="3">
                <div className="user-search" >
                  <AutoComplete
                    className="certain-category-search"
                    dropdownClassName="certain-category-search-dropdown"
                    dropdownMatchSelectWidth={false}
                    style={{ width: "120px" }}
                    dataSource={options}
                    placeholder="输入转交人姓名"
                    value={this.state.auto}
                    onChange={this.httpChange}
                    filterOption={true}
                    onBlur={this.blurChange}
                    onSelect={this.selectAuto}
                    disabled={!hasSelected}
                  >
                    <Input />
                  </AutoComplete>
                  <Button
                    type="primary"
                    onClick={(e) => {
                      e.stopPropagation();
                      this.showConfirm();
                    }}
                    disabled={!hasSelected}
                    style={{ marginRight: 10 }}
                  >
                    批量转交
                  </Button>
                  <Button
                    style={{ marginLeft: 10 }}
                    onClick={(e) => {
                      e.stopPropagation();
                      this.showConfirms();
                    }}
                    type="primary"
                    disabled={!hasSelected}
                  >
                    批量移至公共库
                  </Button>
                  <Upload {...this.state.upLoad} disabled={this.state.upLoadFileLoading}>
                    <Button
                      loading={this.state.upLoadFileLoading}
                      type="primary"
                      style={{ marginLeft: 10 }}
                    >
                      批量上传
                    </Button>
                  </Upload>

                  <Button
                    style={{ marginLeft: 10 }}
                    onClick={(e) => {
                      this.exportExec()
                    }}
                    type="primary"
                  >
                    下载模板
                  </Button>

                </div>
              </TabPane> : ""}
          </Tabs>
        </div>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              size="middle"
              bordered
              columns={
                this.state.changeList == undefined
                  ? this.state.columns
                  : this.state.changeList
              }
              dataSource={this.state.dataSource}
              rowSelection={rowSelection}
              pagination={this.state.pagination}
            // onRowDoubleClick={this.tableRowClick}
            />
          </Spin>
        </div>
        {
          this.state.zhuanjiaoVisible &&
          <ZhuanjiaoDetail
            cancel={this.zhuanjiaoDetailCancel}
            visible={this.state.zhuanjiaoVisible}
            id={this.state.zhuanjiaoId}
          />
        }
        {
          this.state.modalVisible &&
          <IntentionDetail
            isLimit={true}
            isCustomerAdmin={true}
            tabsKey={this.state.tabsKey}
            categoryArr={this.state.categoryArr}
            detailApi={'/api/admin/customer/findOrganizationCustomerDetail'}
            IntentionData={this.state.RowData}
            modalVisible={this.state.modalVisible}
            name={this.state.modalName}
            closeDesc={this.closeDesc}
            basicState={this.state.basicState}
            contactState={this.state.contactState}
          />
        }

      </div>
    );
  },
});

export default LimitedProject;
