import React from 'react';
import { Button,Cascader,Input, Select, Spin, Table,Tabs, message, Form ,AutoComplete} from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import {ShowModal} from '../../../../tools.js'
import { citySelect, provinceList } from '@/NewDicProvinceList';
import ShowModalDiv from "@/showModal.jsx";
import ZhuanjiaoDetail from "@/zhuanjiaoDetail.jsx";
import Detaile from './detail.jsx';
import {ChooseList} from "../../../order/orderNew/chooseList";

const {TabPane} =Tabs
const QueryCustomer = 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,
        departmentId: this.state.departmenttSearch,
        aid: this.state.theTypes,
      },
      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.createTime = thisdata.createTime && thisdata.createTime.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)
    );
  },
  //部门
  departmentList() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      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({
              key: index,
              name: item.name,
              id: item.id,
            });
          });
        }
        this.setState({
          departmentArr: theArr,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  getInitialState() {
    return {
      addressSearch: [],
      dataSource: [],
      zhuanjiaoVisible: false,
      zhuanjiaoData: [],
      loading: false,
      departmentArr: [],
      selectedRowKeys: [],
      selectedRowKey: [],
      selectedRows: [],
      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",
        },
        {
          title: "地区",
          dataIndex: "locationProvince",
          key: "locationProvince",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "客户所属人",
          dataIndex: "adminName",
          key: "adminName",
        },
        {
          title: "资料所属人",
          dataIndex: "informationMaintainer",
          key: "informationMaintainer",
        },
        {
          title: "操作",
          dataIndex: "abc",
          key: "abc",
          render: (text, record, index) => {
            return (
              <div>
                <Button
                  disabled={record.signBills === 0}
                  onClick={(e) => {
                    e.stopPropagation(), this.seeDetail(record);
                  }}
				  type="primary"
				  style={{ marginRight: 10 }}
                >
                  {record.signBills === 0 ? '暂未签单' : '查看签单详情'}
                </Button>
                <Button
                  onClick={(e) => {
                    e.stopPropagation(), this.zhuanjiaoLog(record);
                  }}
                  type="primary"
                >
                  查看转交记录
                </Button>
              </div>
            );
          },
        },
      ],
    };
  },
  zhuanjiaoDetailCancel() {
    this.setState({
      zhuanjiaoVisible: false,
    });
  },
  zhuanjiaoLog(record) {
    this.setState({
      zhuanjiaoVisible: true,
      zhuanjiaoId: record.id,
    });
  },
  seeDetail(record) {
    this.setState({
      data: record,
      visitModul: true,
    });
  },
  closeDesc(e) {
    this.state.visitModul = e;
  },
  search() {
    this.loadData();
  },
  reset() {
    this.state.nameSearch = "";
    this.state.departmenttSearch = undefined;
    this.state.theTypes = "";
    this.state.auto = "";
    this.state.provinceSearch = undefined;
    this.state.addressSearch = [];
    this.loadData();
  },
  componentWillReceiveProps(nextProps) {
    if (nextProps.ApiUrl != this.props.ApiUrl) {
      this.state.nameSearch = "";
      this.state.provinceSearch = undefined;
      this.state.addressSearch = [];
      this.loadData(null, nextProps.ApiUrl);
    }
  },

  componentWillMount() {
    this.departmentList();
    //城市
    let Province = [];
    provinceList.map(function (item) {
      var id = String(item.id);
      Province.push(
        <Select.Option value={id} key={item.name}>
          {item.name}
        </Select.Option>
      );
    });
    this.state.Provinces = Province;
    this.loadData();
  },
  //指定转交人自动补全
  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,
    });
  },
  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach(item => {
      arr.forEach(val => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr
    });
  },
  render() {
    let departmentArr = this.state.departmentArr || [];
    const intentionState = this.props.intentionState;
    const FormItem = Form.Item;
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          modalVisible: false,
          selectedRows: selectedRows.slice(-1),
          selectedRowKeys: selectedRowKeys.slice(-1),
        });
      },
      onSelect: (recordt, selected, selectedRows) => {
        this.setState({
          modalVisible: false,
          recordt: recordt.id,
        });
      },
    };
    const dataSources = this.state.customerArr || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    const hasSelected = this.state.selectedRowKeys.length > 0;
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} />
        <div className="content-title">
          <span>{!intentionState ? "单位客户查询" : "个人客户查询"}</span>
        </div>
        <Tabs defaultActiveKey="1" onChange={this.callback} 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: 150 ,marginRight:'10px',marginLeft:'10px'}}
                            value={this.state.departmenttSearch}
                            onChange={(e) => { this.setState({ departmenttSearch: e }) }}>
                            {
                                departmentArr.map(function (item) {
                                        return <Select.Option key={item.id} >{item.name}</Select.Option>
                                })
                            }
                    </Select>   */}
              {/* <AutoComplete
				        className="certain-category-search"
				        dropdownClassName="certain-category-search-dropdown"
				        dropdownMatchSelectWidth={false}
				        dropdownStyle={{ width: 120 }}
				        style={{ width: '120px'}}
				        dataSource={options}
				        placeholder="客户所有人姓名"
				        value={this.state.auto}
				        onChange={this.httpChange}
				        filterOption={true}
				        onBlur={this.blurChange}
				        onSelect={this.selectAuto}
				    >
				        <Input />
				    </AutoComplete>   */}
              <Button type="primary" onClick={this.search}>
                搜索
              </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>
        </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}
            />
          </Spin>
        </div>
        <Detaile
          visitModul={this.state.visitModul}
          data={this.state.data}
          detailApi={this.props.detailApi}
          closeDesc={this.closeDesc}
        />
        {this.state.zhuanjiaoVisible ? (
          <ZhuanjiaoDetail
            cancel={this.zhuanjiaoDetailCancel}
            visible={this.state.zhuanjiaoVisible}
            id={this.state.zhuanjiaoId}
          />
        ) : (
          ""
        )}
      </div>
    );
  },
});
export default QueryCustomer;