import React from 'react';
import {
  Form,
  Button,
  Spin,
  message,
  Table,
  Popconfirm,
  Modal,
  AutoComplete,
  Input,
  Select, Tooltip
} from "antd";
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import {getfllowSituation,getcustomerStatue} from '@/tools.js';
import BusinessDetail from './businessDetail.jsx';

const Business = React.createClass({
  getInitialState() {
    return {
      selectedRowKeys: [],
      bVisible: false,
      loading: false,
      dataBusiness: [],
      followData: {},
      paginationt: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.BusinessList(page, false);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      businessIntentionList: [
        {
          title: "客户名称",
          dataIndex: "identifyName",
          key: "identifyName",
          // width: 150,
          render: (text) => {
            return (
                <Tooltip title={text}>
                  <div style={{
                    // maxWidth:'150px',
                    // overflow:'hidden',
                    // textOverflow: "ellipsis",
                    // whiteSpace:'nowrap',
                  }}>{text}</div>
                </Tooltip>
            )
          },
        },
        {
          title: "业务名",
          dataIndex: "businessName",
          key: "businessName",
        },
        {
          title: "业务所属人",
          dataIndex: "adminName",
          key: "adminName",
        },
        {
          title: "业务意向进度",
          dataIndex: "followSituation",
          key: "followSituation",
          render: (text) => {
            return getfllowSituation(text);
          },
        },
        {
          title: "客户状态",
          dataIndex: "customerStatus",
          key: "customerStatus",
          render: (text) => {
            return getcustomerStatue(text);
          },
        },
        {
          title: "意向时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        // {
        //   title: "操作",
        //   dataIndex: "ooo",
        //   key: "ooo",
        //   render: (text, record) => {
        //     const dataSources = this.state.customerArr || [];
        //     const options = dataSources.map((group) => (
        //       <Select.Option key={group.id} value={group.name}>
        //         {group.name}
        //       </Select.Option>
        //     ));
        //     return (
        //       <div className="control">
        //         <Button
        //           onClick={(e) => {
        //             e.stopPropagation();
        //             this.businessIntentionDetails(record);
        //           }}
        //         >
        //           查看
        //         </Button>
        //         <AutoComplete
        //           className="certain-category-search"
        //           dropdownClassName="certain-category-search-dropdown"
        //           dropdownMatchSelectWidth={false}
        //           dropdownStyle={{ width: 120 }}
        //           style={{
        //             width: "120px",
        //             marginLeft: 10,
        //             transition: "all .5s",
        //             display:
        //               record.followSituation == 5 ? "inline-block" : "none",
        //           }}
        //           dataSource={options}
        //           placeholder="输入转交人姓名"
        //           onChange={this.httpChange}
        //           filterOption={true}
        //           onBlur={this.blurChange}
        //           onSelect={this.selectAuto}
        //         >
        //           <Input />
        //         </AutoComplete>
        //         <Button
        //           style={{ marginLeft: 10 }}
        //           onClick={(e) => {
        //             //   this.changeBusiness(record);
        //             e.stopPropagation();
        //             this.showConfirm(this.changeBusiness, record);
        //           }}
        //           type={"primary"}
        //           style={{
        //             marginLeft: 10,
        //             transition: "all .5s",
        //             display:
        //               record.followSituation == 5 ? "inline-block" : "none",
        //           }}
        //         >
        //           转交业务
        //         </Button>
        //       </div>
        //     );
        //   },
        // },
      ],
    };
  },
  showConfirm(fn, record) {
    Modal.confirm({
      title: "提示",
      content: <span style={{ color: "red" }}>确定转交此项目？</span>,
      onOk() {
        fn(record);
      },
      onCancel() {},
    });
  },
  //指定转交人自动补全
  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,
    });
  },
  businessIntentionDetails(record) {
    this.setState({
      followData: record,
      businessModul: true,
    });
  },
  businessIntentionCancel() {
    this.setState({
      businessModul: false,
    });
  },
  //业务意向
  BusinessList(pageNo) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listBusiness",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.paginationt.pageSize,
        uid: this.props.data.id,
      },
      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({
              key: i,
              businessId: thisdata.businessId,
              businessProjectId: thisdata.businessProjectId,
              businessName: thisdata.businessName,
              identifyName: thisdata.identifyName,
              followSituation: thisdata.followSituation,
              customerStatus: thisdata.customerStatus,
              adminName: thisdata.adminName,
              createTime: thisdata.createTime,
            });
          }
          this.state.paginationt.current = data.data.pageNo;
          this.state.paginationt.total = data.data.totalCount;
        }
        if (data.data && data.data.list && !data.data.list.length) {
          this.state.paginationt.current = 0;
          this.state.paginationt.total = 0;
        }
        this.setState({
          dataBusiness: theArr,
          paginationt: this.state.paginationt || [],
        });
        // console.log(this.state.dataBusiness);
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
        window.setTimeout(() => {
          let dom = document.querySelectorAll(".control");
          for (let i = 0; i < dom.length; i++) {
            document.querySelectorAll(".control")[i].parentNode.style.width =
              "300px";
          }
        }, 100);
      }.bind(this)
    );
  },
  componentWillMount() {
    this.BusinessList();
    // console.log(this.state.dataBusiness);
  },
  detailsModal() {
    this.props.closeDetail(false, false);
  },
  componentWillReceiveProps(nextProps) {
    if (nextProps.data.id && nextProps.businessState) {
      this.BusinessList();
    }
    this.setState({
      businessModul: false,
    });
  },
  changeBusiness(e) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/privateBusinessTransfer",
      data: {
        inputId: this.state.theTypes,
        pid: e.businessProjectId,
        uid: this.props.data.id,
      },
      success: function (data) {
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          message.success("转交成功！");
          this.props.closeDesc(false, true);
          this.props.closeDetail();
          this.BusinessList();
          this.setState({
            selectedRowKeys: [],
          });
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  onSelectChange(selectedRowKeys) {
    this.setState({
      selectedRowKeys,
      businessModul: false,
    });
  },
  render() {
    return (
      <div className="clearfix">
        <Spin spinning={this.state.loading}>
          <Table
            size="middle"
            pagination={this.state.paginationt}
            columns={this.state.businessIntentionList}
            dataSource={this.state.dataBusiness}
          />
        </Spin>
        <BusinessDetail
          ids={this.props.data.id}
          data={this.state.followData}
          businessModul={this.state.businessModul}
          businessIntentionCancel={this.businessIntentionCancel}
        />
      </div>
    );
  },
});

export default Business;