import React from 'react';
import {Form, Button, Spin, message, Table, Tooltip, Input, Modal} from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import FollowDetail from '../../followDetail.jsx'
import {getContactType} from '@/tools.js';
import VisitDetail from './visitDetail.jsx';

const confirm = Modal.confirm;

const Visit = React.createClass({
	getInitialState(){
		return {
      visitArrList: [],
      loading: false,
      visitModul: false,
      visitModuls: false,
	  followId:0,
	  ispage:1,
      paginations: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadVisit(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      visitsList: [
        {
          title: "客户名称",
          dataIndex: "identifyName",
          key: "identifyName",
        },
        {
          title: "跟进方式",
          dataIndex: "contactType",
          key: "contactType",
          render: (text) => {
            return getContactType(text);
          },
        },
        {
          title: "联系人",
          dataIndex: "contacts",
          key: "contacts",
          render: (text, record) => {
            return (
              <div>
                {record.readOnly ? <span>***</span> : <span>{text}</span>}
              </div>
            );
          },
        },
        {
          title: "联系电话",
          dataIndex: "contactMobile",
          key: "contactMobile",
          render: (text, record) => {
            return (
              <div>
                {record.readOnly ? <span>***</span> : <span>{text}</span>}
              </div>
            );
          },
        },
        {
          title: "跟进人",
          dataIndex: "adminName",
          key: "adminName",
        },
        {
          title: "跟进说明",
          dataIndex: "result",
          key: "result",
          // }, {
          // 	title: '操作',
          // 	dataIndex: 'ttt',
          // 	key: 'ttt',
          // 	render: (text, record, index) => {
          // 		return <div>
          //                 {!record.readOnly&&<Popconfirm title="是否删除?" onConfirm={(e)=>{this.visitDelet(record)}} okText="删除" cancelText="不删除">
          // 				    <Button style={{marginRight:'10px',color:'#ffffff',background:'#f00',border:'none'}} onClick={(e)=>{e.stopPropagation()}}>删除</Button>
          // 				</Popconfirm>}
          //             </div>
          // 	}
        },
        {
          title: "跟进时间",
          dataIndex: "followTime",
          key: "followTime",
        },
		{
		  title: "指导意见",
		  dataIndex: "abc",
		  key: "abc",
		  render: (text, record) => {
			  return (
				  <div>
					  {record.guidance ?
						  <div style={{
							  cursor:"pointer",
							  width: '150px',
							  whiteSpace: 'nowrap',
							  overflow: 'hidden',
							  textOverflow: 'ellipsis',
						  }}
						  onClick={(e)=>{
							e.stopPropagation();
							Modal.info({
							  title: '指导意见',
							  content: (
								  <div style={{
									  wordWrap:"break-word"
								  }}>
									  {record.guidance}
								  </div>
							  ),
							  onOk() {},
							});
						  }}>
							  <span>
								{record.guidance}
							  </span>
					  </div> : (this.props.isEditGuidanceLv ? <Button
						  onClick={(e) => {
							  e.stopPropagation();
							  this.setState({
								  guidanceVisible: true,
								  followId: record.followId
							  })
						  }}
						  type="primary"
					  >
						  立即指导
					  </Button> : <span>暂未指导</span>)}
				  </div>
			  );
		  },
		},
		{
		  title: "指导时间",
		  dataIndex: "guidanceTime",
		  key: "guidanceTime",
		  render: (text, record) => {
			  return (
				  <span>{text ? text : ''}</span>
			  )
		  }
		}
      ],
	  guidanceVisible: false,
	  guidance: ''
    };
	},
	//拜访记录删除
	visitDelet(e) {
		this.setState({
			visitModul:false,
			loading: true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/customer/deleteFollow",
			data: {
				followId: e.followId, //删除的ID    
			}
		}).done(function(data) {
			if(!data.error.length) {
				message.success('删除成功！');
				this.setState({
					loading: false,
				});
			} else {
				message.warning(data.error[0].message);
			};
			this.loadVisit();
		}.bind(this));
	},
	//查看跟进记录列表
	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.props.data.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));
	},
	componentWillMount(){
		this.loadVisit();
	},
	detailsModal(){
		this.props.closeDetail(false, false)
	},
	//点击整行
	VisitRowClick(record){
		this.setState({
			followData: record,
			visitModul:true,
		})
	},
	//进入新增拜访记录
    visit() {
		let obj = {
			id: this.props.data.id
		}
		this.setState({
			followData:obj,
			visitModuls:true,
		})
	},
	closeDesc(e,s){
		this.state.visitModul=e
		this.state.visitModuls=e
		if(s){
			this.loadVisit()
		}
	},
	//发布指导意见
	releaseGuidance(e){
		e.stopPropagation();
		if(!this.state.guidance){
			message.info('指导意见不能为空')
			return;
		}
		this.setState({
			loading: true,
		});
		$.ajax({
			method: "post",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/customer/addGuidance",
			data: {
				guidance: this.state.guidance,
				followId: this.state.followId,
			},
		}).done(function(data) {
			if(!data.error.length) {
				message.success("发布成功");
				this.loadVisit(this.state.ispage);
				this.setState({
					loading: false,
					guidanceVisible: false,
				});
			} else {
				message.warning(data.error[0].message);
			}
		}.bind(this));
	},
	componentWillReceiveProps(nextProps) {
		if(nextProps.data.id&&nextProps.visitState){
			this.loadVisit()
		}
		this.setState({
			visitModul:false
		})
	},
	render(){
		return(
			<div className="clearfix">
				{!this.props.isGuidanceLv ? <Button
                    onClick={(e) => {
                      e.stopPropagation();
                      this.visit();
                    }}
					type="primary"
					style={{marginTop:'10px',float: 'right'}}
                  >
                    客户跟进
                  </Button> : <div/>}
			    <Spin spinning={this.state.loading}>
				  <Table
				     style={{marginTop:this.props.isGuidanceLv ? '0px' : '60px'}}
	            	 pagination={this.state.paginations}
	            	 columns={this.state.visitsList} 
	            	 dataSource={this.state.visitArrList}
	            	 onRowClick={this.VisitRowClick}
	            	 />
			    </Spin> 
			    <VisitDetail 
			    	categoryArr={this.props.categoryArr}
			    	followData={this.state.followData}
			    	visitModul={this.state.visitModul}
			    	closeDesc={this.closeDesc}
			    	mid={this.props.data.id}
			    />
				<FollowDetail
				    categoryArr={this.props.categoryArr}
					followData={this.state.followData}
					visitModul={this.state.visitModuls}
					closeDesc={this.closeDesc}
					loadData={this.loadVisit}
				/>
				{/*指导意见*/}
				{this.state.guidanceVisible ? <Modal
					className="customeDetails"
					title="指导意见"
					width='500px'
					visible={this.state.guidanceVisible}
					onOk={()=>{
						this.setState({
							guidanceVisible: false,
							guidance: '',
						},()=>{
							this.loadVisit();
						})
					}}
					onCancel={()=>{
						this.setState({
							guidanceVisible: false,
							guidance: '',
						},()=>{
							this.loadVisit();
						})
					}}
					footer=''
				>
					<Spin spinning={this.state.loading}>
						<div style={{
							display:'flex',
							flexFlow:'column',
						}}>
							<Input
								style={{ width: '400px',height:'50px' }}
								placeholder="请输入指导意见"
								type={'textarea'}
								onChange={(e)=>{
									this.setState({
										guidance: e.target.value,
									})
								}}
							/>
							<Button
								type="primary"
								style={{ marginTop: "10px", marginBottom: '10px' }}
								onClick={(e)=>{
									let _this = this;
									confirm({
										title: '确定要提交本次指导意见吗?',
										content: '指导意见提交成功后无法修改',
										onOk() {
											_this.releaseGuidance(e);
										},
										onCancel() {},
									});
								}}
							>
								保存
							</Button>
						</div>
					</Spin>
				</Modal> : <div/>}
			</div>	
		)
	}
})
export default Visit;
