import React from 'react';
import {
  Checkbox,
  Button,
  AutoComplete,
  Cascader,
  Input,
  Select,
  Tabs,
  Spin,
  Table,
  message,
  DatePicker,
  Form,
  Modal,
  Tooltip
} from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import moment from 'moment';
import { citySelect, provinceList } from '@/NewDicProvinceList';
import { socialAttribute, industry, auditStatusL, lvl, currentMember } from '@/dataDic.js';
import { getSocialAttribute, beforeUploadFile, ShowModal } from "@/tools.js";
import FollowDetail from './followDetail.jsx'
import ShowModalDiv from "@/showModal.jsx";
import ZhuanjiaoDetail from "@/zhuanjiaoDetail.jsx";
import IntentionDetail from './intentionDetail/intentionDetail'
import './customer.less';
import { ChooseList } from "../../../order/orderNew/chooseList";
import EnterpriseNameChange from "../../../../common/enterpriseNameChange";
import Detaile from "../query/detail";

const { TabPane } = Tabs
const confirm = Modal.confirm;
const IntentionCustomer = Form.create()(React.createClass({
  loadData(pageNo, apiUrl) {
    this.setState({
      visitModul: false,
      loading: true,
      ispage: pageNo,
      modalVisible: false
    });
    let api = apiUrl ? apiUrl : this.props.ApiUrl;
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + api,
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        name: this.state.nameSearch,
        channel: this.state.channelSearch,
        province: !(this.state.addressSearch).length ? this.state.provinceSearch : this.state.addressSearch[0],
        city: !(this.state.addressSearch).length ? '' : this.state.addressSearch[1],
        startDate: this.state.releaseDate[0],
        endDate: this.state.releaseDate[1],
      },
      success: function (data) {
        ShowModal(this);
        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];
            let diqu = (thisdata.province == null ? "" : thisdata.province) + (thisdata.city == null ? "" : "-" + thisdata.city) + (thisdata.area == null ? "" : "-" + thisdata.area);
            thisdata.key = i;
            thisdata.id = thisdata.uid;
            thisdata.transferTime = thisdata.transferTime && thisdata.transferTime.split(" ")[0];
            thisdata.lastSignTime = thisdata.lastSignTime && thisdata.lastSignTime.split(" ")[0];
            thisdata.lastFollowTime = thisdata.lastFollowTime && thisdata.lastFollowTime.split(" ")[0];
            thisdata.locationProvince = diqu
            theArr.push(thisdata);
          };
          this.state.pagination.current = data.data.pageNo;
          this.state.pagination.total = data.data.totalCount;
        };
        if (data.data && data.data.list && !data.data.list.length) {
          this.state.pagination.current = 0
          this.state.pagination.total = 0
        };
        this.setState({
          dataSource: theArr,
          pagination: this.state.pagination,
          selectedRowKeys: []
        });
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },
  //品类数据获取
  category() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/Varieties/getSuperList",
      data: {},
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              value: item.id,
              key: item.cname,
            });
          });
        }
        this.setState({
          categoryArr: theArr,
        });
      }.bind(this),
    });
  },

  getInitialState() {
    return {
      categoryArr: [],
      addressSearch: [],
      orgCodeUrl: [],
      companyLogoUrl: [],
      visible: false,
      searchMore: true,
      releaseDate: [],
      visitModul: false,
      keys: false,
      detailApi: "",
      followData: {},
      selectedRowKeys: [],
      selectedRowKey: [],
      selectedRows: [],
      loading: false,
      defaultActiveKey: '',
      modalVisible: false,
      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: "name",
          key: "name",
          width: 200,
          render: (text, record) => {
            return (
              <span>
                {record.channel === 1 ? <div style={{
                  background: '#ef7207',
                  color: '#FFF',
                  padding: '1px 7px',
                  borderRadius: '5px',
                  fontSize: '12px',
                  display: 'inline-block',
                  marginRight: '10px'
                }}>
                  外联
                </div> : null}
                <Tooltip title={text}>
                  <div
                  // style={{
                  //   maxWidth: '120px',
                  //   overflow: 'hidden',
                  //   textOverflow: "ellipsis",
                  //   whiteSpace: 'nowrap',
                  // }}
                  >{text}</div>
                </Tooltip>
              </span>
            )
          },
        },
        {
          title: "统一社会信用代码",
          dataIndex: "orgCode",
          key: "orgCode",
          render: (text) => {
            return <div style={{ color: !text ? "red" : "#000000A6" }}>
              {!text ? "待补充" : text}
            </div>;
          },
        },
        {
          title: "地区",
          dataIndex: "locationProvince",
          key: "locationProvince",
        },
        {
          title: "最新签单日期",
          dataIndex: "transferTime",
          key: "transferTime",
        },
        {
          title: "最新跟进日期",
          dataIndex: "lastFollowTime",
          key: "lastFollowTime",
        },
        {
          title: "剩余私有天数",
          dataIndex: "surplusFollowTime",
          key: "surplusFollowTime",
        },
        // {
        //   title: "剩余签单天数",
        //   dataIndex: "surplusSignTime",
        //   key: "surplusSignTime",
        // },
        // {
        //   title: "联系人",
        //   dataIndex: "contacts",
        //   key: "contacts",
        // },
        // {
        //   title: "联系电话",
        //   dataIndex: "contactMobile",
        //   key: "contactMobile",
        // },
        {
          title: "社会属性",
          dataIndex: "societyTag",
          key: "societyTag",
          render: (text) => {
            return getSocialAttribute(text);
          },
        },
        {
          title: "操作",
          dataIndex: "abc",
          key: "abc",
          width: 420,
          render: (text, record, index) => {
            return (
              <div>
                <Button
                  onClick={(e) => {
                    const _this = this
                    e.stopPropagation()
                    if (!record.orgCode) {
                      confirm({
                        title: '您暂时不可以跟进客户',
                        content: `请先完善"企业统一社会信用代码"`,
                        cancelText: '取消',
                        okText: '去完善',
                        onOk() {
                          _this.tableRowClick(record)
                        },
                        onCancel() { },
                      });
                    } else {
                      this.visit(record);
                    }
                  }}
                  type="primary"
                >
                  客户跟进
                </Button>
                <Button
                  style={{ marginLeft: 10 }}
                  onClick={(e) => {
                    e.stopPropagation(), this.zhuanjiaoDetail(record);
                  }}
                  type="primary"
                >
                  转交记录
                </Button>
                <Button
                  style={{ marginLeft: 10 }}
                  type="primary"
                  onClick={(e) => {
                    e.stopPropagation();
                    this.setState({
                      defaultActiveKey: '6'
                    }, () => {
                      this.tableRowClick(record);
                    })
                  }}
                >
                  转交项目
                </Button>
                <Button
                  style={{ marginLeft: 10 }}
                  type="primary"
                  onClick={(e) => {
                    e.stopPropagation();
                    this.setState({
                      visitD: true,
                      RowData: record,
                    })
                  }}
                >
                  新增限定项目
                </Button>
              </div>
            );
          },
        },
      ],
      data: [],
      dataSource: [],
      selList: [],
    };
  },
  zhuanjiaoDetail(record) {
    this.setState({
      zhuanjiaoVisible: true,
      zhuanjiaoId: record.id
    })
  },
  zhuanjiaoDetailCancel() {
    this.setState({
      zhuanjiaoVisible: false
    })
  },

  //进入新增拜访记录
  visit(e) {
    this.setState({
      followData: e,
      visitModul: true,
      modalVisible: false
    })
  },
  //列表删除功能
  delectRow() {
    let deletedIds;
    for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
      let rowItem = this.state.selectedRows[idx];
      if (rowItem.id) {
        deletedIds = rowItem.id;
      };
    };
    this.setState({
      loading: true,
      selectedRowKeys: [],
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/deleteCustomer",
      data: {
        uid: deletedIds, //删除的ID
      }
    }).done(function (data) {
      if (!data.error.length) {
        message.success('删除成功！');
        this.setState({
          loading: false,
        });
      } else {
        message.warning(data.error[0].message);
      };
      this.loadData(this.state.ispage);
    }.bind(this));
  },
  componentWillMount() {
    //城市
    let Province = [];
    provinceList.map(function (item) {
      var id = String(item.id)
      Province.push(
        <Select.Option value={id} key={item.name}>{item.name}</Select.Option>
      )
    });
    //行业
    let intentionalArr = [];
    industry.map(function (item) {
      intentionalArr.push(
        <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
      )
    });
    this.state.Provinces = Province;
    this.state.intentionalOption = intentionalArr;
    this.loadData();
    this.category();
  },
  closeDesc(e, s) {
    this.state.visitD = e
    this.state.basicState = e
    this.state.visitModul = e;
    this.state.modalVisible = e;
    this.state.showDesc = e;
    this.setState({
      defaultActiveKey: ''
    })
    if (s) {
      this.loadData(this.state.ispage);
    };
  },
  search() {
    this.loadData();
  },
  reset() {
    this.state.nameSearch = '';
    this.state.addressSearch = [];
    this.state.provinceSearch = undefined;
    this.state.channelSearch = undefined;
    this.state.citySearch = undefined;
    this.state.releaseDate[0] = undefined;
    this.state.releaseDate[1] = undefined;
    this.loadData();
  },
  searchSwitch() {
    this.setState({
      visitModul: false,
      searchMore: !this.state.searchMore
    });
  },
  //整行点击
  tableRowClick(record) {
    this.state.visitModul = false;
    this.state.RowData = record;
    this.setState({
      // selectedRowKeys: [],
      modalVisible: true,
      basicState: true,
      contactState: true,
      modalName: record.name
    })
  },
  //指定转交人自动补全
  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));
  },
  componentWillReceiveProps(nextProps) {
    if (nextProps.ApiUrl != this.props.ApiUrl) {
      if (!this.state.searchMore) {
        this.state.searchMore = true
      }
      this.state.nameSearch = '';
      this.state.addressSearch = [];
      this.state.provinceSearch = undefined;
      this.state.channelSearch = undefined
      this.state.citySearch = undefined;
      this.state.releaseDate[0] = undefined;
      this.state.releaseDate[1] = undefined;
      this.loadData(null, nextProps.ApiUrl);
    };
  },
  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach(item => {
      arr.forEach(val => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr
    });
  },
  //上级主管输入框失去焦点是判断客户是否存在
  selectAuto(value, options) {
    this.setState({
      auto: value,
    });
  },
  //值改变时请求客户名称
  httpChange(e) {
    if (e.length >= 1) {
      this.supervisor(e);
    }
    this.setState({
      auto: e,
    });
  },
  showConfirm() {
    if (this.state.confirmLoading) {
      return false;
    }
    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.name}
              </div>
            ))
          }
        </span>
      ),
      onOk() {
        _this.setState({
          informationTransferVisible: true
        })
      },
      onCancel() { },
    });
  },
  //转交
  changeAssigner(infor) {

    let type = infor
    if (infor == 1) {
      if (this.state.selList.length == 0) {
        message.warn("请勾选您需要转交的信息！")
        return
      } else if (this.state.selList.length == 2) {
        type = 3
      } else {
        type = this.state.selList[0]
      }
    }

    if (this.state.theTypes) {
      this.setState({
        confirmLoading: true,
        informationTransferVisible: false
      })
      const hide = message.loading('转交中...', 0);
      let changeIds = '';
      let oldAid = '';
      for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
        let rowItem = this.state.selectedRows[idx];
        if (rowItem.id) {
          oldAid = rowItem.aid;
          changeIds = this.state.selectedRows.length - 1 === idx ? changeIds + rowItem.id : changeIds + rowItem.id + ',';
        }
      }
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/customer/transferToOther",
        data: {
          uid: changeIds, //这一行数据的ID
          aid: this.state.theTypes, //指定转交人的ID
          oldAid: window.adminData.uid,
          operatorType: 4,
          data: type,
        },
      }).done(
        function (data) {
          hide();
          this.setState({
            selList: [],
          })
          if (!data.error.length) {
            this.setState({
              auto: "",
              loading: false,
              selectedRowKeys: [],
            });
            if (data.data.length == 0) {
              message.success("转交成功！");
            } else {
              data.data.forEach(function (e) { message.warning(e) })
            }
          } else {
            message.warning(data.error[0].message);
          }
          this.loadData(
            Math.min(
              this.state.ispage == undefined ? 1 : this.state.ispage,
              Math.ceil((this.state.pagination.total - 1) / 10)
            )
          );
          this.setState({
            confirmLoading: false
          })
        }.bind(this)
      );
    } else {
      message.warning("请输入转交人姓名");
    }
  },
  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,
    });
  },
  render() {
    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,
          recordt: recordt.id
        })
      },
    };
    const hasSelected = this.state.selectedRowKeys.length > 0;
    const { RangePicker } = DatePicker;
    const dataSources = this.state.customerArr || [];
    const options = dataSources.map((group) =>
      <Select.Option key={group.id} value={group.name}>{group.name}</Select.Option>
    )
    const intentionState = this.props.intentionState || '';
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        {this.state.zhuanjiaoVisible ? (
          <ZhuanjiaoDetail
            cancel={this.zhuanjiaoDetailCancel}
            visible={this.state.zhuanjiaoVisible}
            type={1}
            id={this.state.zhuanjiaoId}
          />
        ) : (
          ""
        )}
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>{!intentionState ? "签单客户" : "签单客户"}</span>
          <span style={{ color: "red", float: "right" }}>注：签单客户，30天未跟进，将自动释放至公共库！！！</span>
        </div>
        <Tabs defaultActiveKey="1" className="test">
          <TabPane tab="搜索" key="1">
            <div className="user-search">
              <Input
                placeholder="客户名称"
                value={this.state.nameSearch}
                onChange={(e) => {
                  this.setState({ nameSearch: e.target.value });
                }}
              />
              <Select
                placeholder="是否为外联"
                style={{ width: 110 }}
                value={this.state.channelSearch}
                onChange={(e) => {
                  this.setState({ channelSearch: e });
                }}
              >
                <Select.Option value={0}>
                  非外联
                </Select.Option>
                <Select.Option value={1}>
                  外联
                </Select.Option>
              </Select>
              <Select
                placeholder="省"
                style={{ width: 80 }}
                value={this.state.provinceSearch}
                onChange={(e) => {
                  this.setState({ provinceSearch: e });
                }}
              >
                {this.state.Provinces}
              </Select>
              <span style={{ marginRight: "10px" }}>
                <Cascader
                  options={citySelect()}
                  value={this.state.addressSearch}
                  placeholder="选择城市"
                  onChange={(e, pre) => {
                    this.setState({ addressSearch: e });
                  }}
                />
              </span>
              {/* <div className="clearfix" style={{ marginTop: "5px" }}>
                <div
                  className="search-more"
                  style={this.state.searchMore ? { display: "none" } : {}}
                > */}
              <span>签单时间：</span>
              <RangePicker
                value={[
                  this.state.releaseDate[0]
                    ? moment(this.state.releaseDate[0])
                    : null,
                  this.state.releaseDate[1]
                    ? moment(this.state.releaseDate[1])
                    : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({ releaseDate: dataString });
                }}
              />
              {/* </div>
              </div> */}
              <Button
                type="primary"
                onClick={this.search}
                style={{ marginLeft: 10 }}
              >
                搜索
              </Button>
              <Button onClick={this.reset}>重置</Button>
              {/* {adminData.isSuperAdmin?<Popconfirm title="是否删除?" onConfirm={this.delectRow} okText="是" cancelText="否">
							     <Button type="danger" style={{marginLeft:'10px'}}
	                       			 disabled={!hasSelected}
	                       		 >删除<Icon type="minus" />
	                        </Button>
	                </Popconfirm>:''
	                }*/}
              {/* <span style={{ marginLeft: "10px", marginRight: "20px" }}>
                更多搜索
                <Switch
                  checked={!this.state.searchMore}
                  onChange={this.searchSwitch}
                />
              </span> */}
            </div>
          </TabPane>
          <TabPane tab="操作" key="2">
            <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>
              <EnterpriseNameChange
                type='journal'
                disabled={!(hasSelected && this.state.selectedRows.length === 1)}
                style={{ marginLeft: 10 }}
                enterpriseId={this.state.selectedRows[0] && this.state.selectedRows[0].id} />
            </div>
          </TabPane>
          <TabPane tab="更改表格显示数据" key="3">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                columns={this.state.columns}
                changeFn={this.changeList}
                changeList={this.state.changeList}
                top={55}
                margin={11}
              />
            </div>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              size="middle"
              columns={
                this.state.changeList
                  ? this.state.changeList
                  : this.state.columns
              }
              dataSource={this.state.dataSource}
              rowSelection={rowSelection}
              pagination={this.state.pagination}
              onRowClick={this.tableRowClick}
            />
          </Spin>
        </div>
        <FollowDetail
          categoryArr={this.state.categoryArr}
          followData={this.state.followData}
          visitModul={this.state.visitModul}
          closeDesc={this.closeDesc}
          loadData={this.loadData}
        />
        <IntentionDetail
          categoryArr={this.state.categoryArr}
          detailApi={this.props.detailApi}
          IntentionData={this.state.RowData}
          loadData={() => { this.loadData(this.state.pagination.current) }}
          modalVisible={this.state.modalVisible}
          defaultActiveKey={this.state.defaultActiveKey}
          name={this.state.modalName}
          closeDesc={this.closeDesc}
          basicState={this.state.basicState}
          contactState={this.state.contactState}
        />
        {this.state.informationTransferVisible && <Modal
          visible={this.state.informationTransferVisible}
          width="420px"
          title="提醒"
          onCancel={() => {
            this.setState({
              informationTransferVisible: false,
              selList: [],
            })
          }}
          footer={[
            <Button key="1" size="large" type={"primary"} onClick={() => {
              this.changeAssigner(1);
            }}>需要</Button>,
            <Button key="2" size="large" type={"danger"} onClick={() => {
              this.changeAssigner(0);
            }}>不需要</Button>,
          ]}
        >
          <div style={{ padding: "0px 40px 20px" }}>
            请确定，是否一并转交以下信息，如单个资料无法转交成功，则去掉对应“勾选”项，转交单一信息!
          </div>
          <div style={{ width: "50%", margin: "0 auto" }}>
            <Checkbox.Group onChange={e => { this.setState({ selList: e }); }}>
              <Checkbox value={1}>1.需要转交该客户资料</Checkbox>
              <br />
              <Checkbox value={2}>2.需要转交该客户名下的订单</Checkbox>
            </Checkbox.Group>
          </div>
        </Modal>}

        <Detaile
          visitModul={this.state.visitD}
          data={this.state.RowData}
          detailApi='/api/admin/customer/getLockedProject'
          closeDesc={this.closeDesc}
        />

      </div>
    );
  }
}));
export default IntentionCustomer;